Orlando Web Design Company
Small, simple animations are fun and interesting! They can keep your users engaged and spice up your website.
Just-add-water CSS animation!
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
To use animate.css in your website, simply drop the stylesheet into your document’s <head>.
<head> <link rel="stylesheet" href="animate.min.css"> </head>
And add the class animated to an element, along with any of the animation names.
<h1 class="animated infinite bounce">Example</h1>
That’s it! You’ve got a CSS animated element. Super!
WOW.js is a very easy and powerful jQuery plugin. Animations are revealed when you scroll. It uses Animate.css and you can easily customize the animation’s style, delay, length, & offset among others.
To use WOW.js,first link to the CSS animation library.
<head> <link rel="stylesheet" href="css/animate.css"> </head>
Then link and activate WOW.js
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
Add the CSS class “wow” to the html element that you want to animate. This class makes the element invisible until the user scrolls to reveal it.
<div class="wow"> Content to Reveal Here </div>
Finally, add animation style. Pick an animation style in Animate.css , then add the CSS class to the HTML element
<div class="wow bounceInUp"> Content to Reveal Here </div>
And you are done! The animations will now play when a user scrolls down.
ScrollReveal creates easy scroll animations for web and mobile browsers.
Animations are triggered when they enter the viewport and they work in both directions, it dozen;t matter if you scroll up or down.
scrollReveal.js does not require jQuery, but does rely on CSS3 transitions. CSS3 transitions only work on the latest browser versions. IE 9 or below & Opera mini do not support CSS3 transitions.
To use scroll reveal, just add the script before the closing </body> tag.
Then activate ScrollReveal by adding the script below.
<script> window.sr = ScrollReveal(); </script>
Both scripts should look like this:
<!DOCTYPE html> <html> <body> <!-- All the things... --> <script src="js/scrollreveal.min.js"></script> <script> window.sr = new scrollReveal(); </script> </body> </html>
To animate an element, add “data-sr” to the fist tag.
<p data-sr> Hello! I'm animated :) </p>
After the class is added, it will be animated and revealed as it enters the viewport.
Orlando Web Design Company: Would you like to add animations to your webiste? Do you have questions? Contact us for a free quote!