Multithemes Plan theme demo shows using Joe Workman’s CSS Box stack as one way to add animations. Some of the animations use a numeric code: scroll1, scroll2, etc. Is there a cheat sheet on the web that shows or describes the animations for those codes?
@Turtle, I’m not finding anything about the types of animations the scroll1, scroll2, etc. are.
CSS Box stack does not do animations per se, it is a simple container that you can define custom CSS and a unique ID. The example on Joe’s site is for a scrolling panoramic image because the image is bigger than the container hence why it can scroll… here.
If the Plan Theme is using it for animations it is only the target of the Theme’s animations, not the animation control.
HTH
Brad
@Turtle, I understand what CSS Box does and how it works. What I want to know is what type of animation is scroll1, what type of animation is scroll2, and so on.
From the Theme’s HTML Source Code… (first page of the demo)
`//--------------------------------scroll effects -----------------------------------
// Credits: http://daneden.me/animate - Licensed under the MIT license - Copyright © 2013 Daniel Eden
// version 1.0 OLD CLASSES!! use new classes below
jQuery(’.scroll1’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated fadeIn’, // Class to add to the elements when they are visible
}); ;
jQuery(’.scroll2’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated bounceInLeft’
}); ;
jQuery(’.scroll3’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated bounceInUp’
}); ;
jQuery(’.scroll4’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated fadeInDown’
}); ;
jQuery(’.scroll5’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated lightSpeedIn’
}); ;
jQuery(’.scroll6’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated flipInX’
}); ; `
HTH
Brad
Yeah, that’s why it’s important for Theme developers to include some sort of instructions with their themes, a demo site is not enough for some (including myself!)
Brad
Just so you know, the developer may be using those settings AND/OR these ones as both come from the demo site file theme.js
`// version 1.1 ----------- NEW CLASSES ---------------
// Class name = Effect description
// scrollfade = FadeIn’
// scrollfadedown = Fade In Down’
// scrollfadeup = Fade In Up’
// scrollslideup = Slide In Up
// scrollslideleft = Slide In Left
// scrollsliderigh = Slide In Right
// scrollbounce = Bounce
// scrollbounceleft = Bounce In Left
// scrollbounceup = Bounce In Up
// scrollbouncein = bounce In
// scrollspeedin = Light Speed In
// scrollflip = Flip In X (horizontal)
// scrollelastic = Elastic Band + bounch
// scrolltada = Tada tumult
// TO EDIT GLOBAL OPTION OPEN THE jquery.viewportchecker.js AND EDIT the code below
// The currently available global options are:
// classToAdd: ‘visible’, // Class to add to the elements when they are visible
// classToRemove: ‘invisible’, // Class to remove before adding ‘classToAdd’ to the elements
// offset: 100, // [100 OR 10%] The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a ‘%’ at the end
// invertBottomOffset: true, // Add the offset as a negative number to the element’s bottom
// repeat: false, // Add the possibility to remove the class if the elements are not visible
// callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return “add” or “remove”, depending if the class was added or removed
// scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
jQuery(’.scrollfade’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated fadeIn’,
offset: 50,
repeat: true
}); ;
jQuery(’.scrollfadeup’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated fadeInUp’
// offset: 10,
// repeat: true
}); ;
jQuery(’.scrollfadedown’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated fadeInDown’
}); ;
jQuery(’.scrollslideup’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated slideInUp’
}); ;
jQuery(’.scrollslideleft’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated slideInLeft’
}); ;
jQuery(’.scrollslideright’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated slideInRight’
}); ;
jQuery(’.scrollbounce’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated bounce’
}); ;
jQuery(’.scrollbounceleft’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated bounceInLeft’
}); ;
jQuery(’.scrollbounceup’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated bounceInUp’
}); ;
jQuery(’.scrollbouncein’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated bounceIn’
}); ;
jQuery(’.scrollspeedin’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated lightSpeedIn’
}); ;
jQuery(’.scrollflip’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated flipInX’
}); ;
jQuery(’.scrollelastic’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated rubberBand’
}); ;
jQuery(’.scrolltada’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated tada’
}); ;
//--------------------- END SCROLL EFFECTS ---------------------`
It might depend on what page type you’re creating, might be dependant on Theme version, hard to say without having the Theme myself.
HTH
Brad
@Turtle, I found the info! There’s a lot of files that come with the Plan theme, and there’s a lot of information in those files. I found the code equivalent info in the Read Me PDF. There are hints to the info in on the Animations page of the demo file of the theme, but not enough to know what the codes mean. Anyway, I will be working on my “Plan” site today!
