Animation on Scroll

In this tutorial we'll show you how to add the "animation on scroll" effect with the float-panel.js script and some CSS3 animation styles.

• Plain JavaScript(4KB). jQuery is not required.
• Cross browser support. Degrade nicely with legacy browsers.
• Completely FREE to use.

• The JS

  Add the following script to the head section of your page:

  <script src="float-panel.js"></script>

• The Markup

  Add the CSS class, slideanim, to the elment that is expected to have the "animation on scroll" effect:

  <img class="slideanim" src="img1.jpg" /> <i class="fa fa-bar-chart slideanim"></i> <div class="row slideanim">...</div>

• The CSS / CSS3

  .slideanim { visibility:hidden; visibility:visible\9;/*For old IE browsers IE6-8 */ } .slideanim.slide { visibility: visible; animation: slide 1s; } .slideanim::after { /* useful when its child elements are float:left; */ content: ""; display: table; clear: both; } @keyframes slide { 0% { opacity: 0; transform: translateY(50%); } 100% { opacity: 1; transform: translateY(0); } }
  • Browser Compatibility:   CSS3 transition and transform properties are well supported by all modern browsers (now we don't even need the -webkit- prefix), and it will degrade nicely with legacy browsers such as IE6 - IE9.

And that's it! I hope you enjoyed this tutorial and find it useful.

Demo

Scroll down the page. Some elements will slide in when they come into view.