Menu
I'm trying to apply CSS transition effect when an element comes to viewport (i.e. when user scrolls to it), but not before.
I already know how to use CSS transitions, but how do I apply them only when the element comes to viewport?
What it the best way of doing this? If there's some library's to simplify the task, I would be glad to know.
445
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
This will animate the color property when you hover over a link on the page. Pretty simple, and you've probably seen or used something similar. But transitions are not just limited to use with :hover . You can animate CSS properties, thus use CSS transitions without hover.
Give CSS3 Animate It a go, makes the whole process as simple as adding a few clases.
http://jackonthe.net/css3animateit/
Then you can just add the classes like this to get started.
<div class='animatedParent'> <h2 class='animated bounceInDown'>It Works!</h2> </div> Here is a great demo:
Slide In (as you scroll down) Boxes | CSS-Tricks http://bit.ly/19NN2NJ
Slide in from bottom boxes - CodePen http://bit.ly/1dvNF9U
Maybe it helps you to see point. Point is detect a viewport and apply effect just onScroll as you can see in demo. If you want help with bug or specific problem just send a source :-) and I'll solve.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
