How to add animation to a website

orlando web design company

Orlando Web Design Company

Small, simple animations are fun and interesting! They can keep your users engaged and spice up your website.

Thanks to CSS3 animations, we can now animate HTML elements without using JavaScript or Flash. Below you can find our 3 favorite ways to animate elements using html5, css3 & jQuery.


animate.css

animate-css

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

wow-js

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

scroll-reveal

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.

<script src="js/scrollreveal.min.js"></script>

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!

Category: Orlando Web Design Tags: , , , No Comments

Author

M5 Design Studio

We are a small, but creative and passionate team of designers and developers specializing in web design, graphic design, branding & digital marketing.


Google Chrome Is Getting Rid Of Cookies

Google Chrome is getting rid of cookies: The Future of Digital Marketing in a Cookieless World

Digital Marketing Agency The digital marketing landscape is undergoing a major transformation with the impending dep
Orlando WordPress Developers

WordPress Plugin ACF 5.0. is now Compatible with Gutenberg!

Orlando WordPress Developer With Gutenberg's release just around the corner, we all want to make sure our WordPress web

WordPress Coding Standards 1.1.0 are Now Available

Orlando WordPress Developer If you are a WordPress Developer, one of the major challenges in today’s development univ

Comments are closed.