How is an HTML element animated as soon as it appears on screen?
I found an example on the stack overflow tour page, where info elements slide into the page as soon as you scroll down far enough. What is the trick behind that?
You need to use JavaScript to detect the location of the viewport and activate it when it becomes visible.
You can use JavaScript to detect and execute the transition and then CSS or JavaScript to do the animations.
There are many jquery based scripts available to accomplish this. Here is one example:
1. Create a Html element you want to check if it's in the viewport.
<div class="demo"></div>
2. Load the jQuery javascript library and jQuery Viewport Checker plugin at the end of your document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="viewportchecker.js"></script>
3. Call the plugin on this element and do something in the javascript.
<script>
$(document).ready(function(){
$('.demo').viewportChecker({
// Class to add to the elements when they are visible
classToAdd: 'visible',
// The offset of the elements (let them appear earlier or later)
offset: 100,
// Add the possibility to remove the class if the elements are not visible
repeat: false,
// 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
callbackFunction: function(elem, action){}
});
});
</script>
