What does this plugin do and how does it work?
HTML / CSS doesnt currently offer a way to start an animation based on the users scroll position. This plugin adds a simple way to bi-pass this using jQuery. Simply choose how far off the viewport you'd like the animations to start, use either some default animations or make your own animation using the advanced settings then watch the magic happen before your eyes.
Standard Settings
Default Animations
Advanced Animations
Standard Settings
Default Animations
We have many default animations which you can choose to use at your own desire. Simply add any of these classes to an item and watch the magic happen.
Orange Text = Optional choice of direction
- move-in-up, left, right, down - A simple move from your chosen direction into place.
- fade-in-up, left, right, down - A simple fade to the item. Just use 'fade-in' if you'd like a static fade
- flip-up, left, right, down - A 3D flip animation from your chosen direction
- bounce-in-up, left, right, down - A bounce effect from your chosen direction
- type-text-fast, medium, slow - Text typing animation (Only works on text elements e.g. h3, p, h1, etc)
If you have an idea and you would like more default animations added please
contact us.
Advanced Animations
Want to tailor your animation 100% to your site?
Simply add the items class, id or element to the selection box under advanced options. When this/these item(s) is/are due to animate a class will be added to this/these element(s) called 'scroll-triggered'. So now you can target the item when it hasn't been triggered and after it has been triggered using this class. Your CSS could look like this:
.button { opacity:0 ; transition: all 1s }
.button.scroll-triggered { opacity: 1 ; }
Just remember to use the transition property to decide how long you would like the animation to last for.