How to start an animation when an item appears on the screen?

Question

How is an HTML animated element as soon as it appears on the screen?

I found an example on a page where information items glide across the page as soon as you scroll down far enough. What is this trick?

Answer 1

You need to use javascript to locate the viewport and activate it when it becomes visible.

You can use javascript to detect and perform the transition, and then css or javascript to animate.

There are many jquery-based scripts to accomplish this. Here is one example:

---

Demo

---

1. Create the Html element that you want to check if it is in the viewport.

<div class="demo"></div> 

2. Download 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 of this element and do something in 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> 

---

DOWNLOAD THIS SCRIPT