News

Create a jQuery scroll-triggered animation

Give your content beautiful animations for when the user has scrolled to that position – perfect for responsive sites when content can be pushed further down the screen

scrolltrigger

Animation effects are all well and good but it’s not always possible to see them if the user hasn’t scrolled to their location on the page when they’re being triggered. The problem is, that location is getting harder and harder to predict, given the sheer multitude of different-sized screens that users can be looking at your site with.

Libraries such as Scrollr are great but it’s all based on pixel sizes and whether the user has scrolled a certain number of pixels down the page. This isn’t possible to predict with responsive devices, as content gets pushed further down the page and those pixel sizes go up the spout.

In this tutorial we are going to take a different approach to animating content on the screen and it will work well with many responsive frameworks such as Bootstrap and Foundation. We’ve opted to use Foundation but that isn’t the main focus here; instead we are focusing on using the free animate.css library of animations. To trigger these we are using the appear.js plug-in for jQuery, which enables us to detect when certain elements will appear on the screen. When they do appear, we will then add in the relevant animation effects so that the user sees the right animation at the right time. This is perfect for anything that you really want to draw the user’s attention to.

Start the project

From the resource CD, copy the tutorial folder to your web server, your local server or, if you are using Brackets, to anywhere on your hard drive. In Brackets, open the entire folder so that we can use its built-in Node.js server. Open the ‘start.html’ file and then add the following stylesheets and fonts.

001 <link rel=”stylesheet” 
href=”css/animate.min.css” />
002 <link href=’http://fonts.googleapis.com/
css?family=Gafata’ rel=’stylesheet’ 
type=’text/css’>
003 

Set up the background

The animate.css file is from daneden.github.io/animate.css and we’ve added it already. We’ll start styling the page up now, so add the CSS shown below for the body tag inside of the empty style tags in the document. This adds the background image so that it covers the entirety of the page.

001 body{ 
002        background: url(img/bg.jpg) 
no-repeat center center fixed; 
003          -webkit-background-size: cover;
004          -moz-background-size: cover;
005          -o-background-size: cover;
006          background-size: cover;
007    }
008



Link up the typeface

Now add the next lines of CSS, which add the correct typeface from the Google font we added in Step 1 to the heading tags. We also change all the typography to have a white colour that will enable it to stand out against the different-coloured backgrounds that we will add.

001 h1, h2, h3, h4, h5, .subheader 
{ font-family: ‘Gafata’, sans-serif; }
002    h1, h2, h3, h4, h5, p, .subheader 
{ color: #fff; }

Style the hero

We will add some space between the first content and the menu so that the background image can be seen on the screen. We will make this first block of colour behind our text semi-transparent so that on desktop devices the background can be seen through. The heading and image are also given a little padding at the top.

001 #hero{
002        margin-top: 500px;
003        background: rgba(256, 154, 9, 0.7);
004        min-height: 500px;
005    }
006    #hero h1{ padding-top: 20px;}
007    #hero img{ padding-top: 90px;}

Sign-up colours

The next section down in our design is the sign-up section, so we will add the styling for this, which will give the section a light teal background colour. Later we will add animation to the heading to draw attention to the sign-up element within this section of the website page.

001 #signup {
002        margin-top: 300px;
003        background: #0ec8b0;
004        padding: 90px 0;
005    }

Three-column section

The next section of the site is the three-column section, so in a similar way to earlier we will add the colours for the background of this section. We are adding plenty of margin top to each section of the page so that the animation can clearly be seen as we reach each section.

001 #three {
002        margin-top: 300px;
003        background: #00add8;
004        padding: 90px 0;
005    } 
006



Finish the page

Now we add the lower section of the site, which contains an image and text. This has a light purple background and the footer is a dark grey colour. This concludes the backgrounds of the page and spaces our design out ready for us to start thinking about adding the animated elements to the page.

001 #lower {
002        margin-top: 300px;
003        background: #df86ca;
004        padding: 90px 0;
005    } #footer {
006        background: #333;
007        padding: 30px 0;
008    }

Add the first animation

Locate the <div> tag with the ID for the ‘hero’ section. Inside the row that immediately follows is a <div> with a class of ‘medium-7 columns’. Change this as shown in the following code snippet and refresh your page in the browser. You will see the large image automatically animated down from the top of the page.

001 <div class=”medium-7 columns 
animated fadeInDownBig” >

Move in the text

Find the <div> with the ID ‘introText’ and change the class as shown below. Again, refresh your browser so that you can see that in action. Now both of the elements on the screen animate into place. This is good but if this were a mobile device this content would likely be off the bottom of the screen, which might cause users confusion when they see the logo fly past.

001 <div id=”introText” class=”medium-5 
columns animated fadeInUpBig” >

Use appear.js

A better way to solve the animation is to only trigger the animation to take place once the relevant parts are on the screen. For this we will use the jQuery plug-in called appear.js, available from github.com/morr/jquery.appear, however we’ve already included it. Add the following code after the Foundation JavaScript library at the bottom of the document.

001 
002 <script src=”js/jquery.appear.js”></script>
003 

Readable text

After the line ‘$(document).foundation();’ add the code shown below. Here we are ensuring that any element with the class ‘animated’ has the appear functionality enabled. When they do appear on the screen we will then store their animation properties from the data element in the animation variable.

001 $(document).ready(function($) {
002 
003    $(‘.animated’).appear();
004    $(‘.animated’).on(‘appear’, function() {
005        var elem = $(this);
006   var animation = elem.
data(‘animation’);

Save the delay

When the animation is visible, we check if there is any element data for an animation delay and we will use this to chain animations later. If there is, it is stored in the animationDelay variable, ready to trigger the correct animation after the delay time has passed.

001 if ( !elem.hasClass(‘visible’) ) {
002            var animationDelay = elem.data(‘animation-delay’);

Apply the delay

If anything was stored in the animationDelay variable that we used in the previous step then here we add a timeout function to wait until the appropriate amount of time has passed before calling the animation to actually play. This is done by passing through the animation as a class into the element.

001 if ( animationDelay ) {
002                setTimeout(function(){
003                    elem.addClass
( animation + “ visible” );
004                }, animationDelay);
005            } 

No delay, just animate

If there is no delay stored with the animation then we just want the animation to play, so the else statement we’re using here simply adds in the animation to the element without the delay ready for it to start. With these in place we can now go ahead and amend our tags that we added to the animation to earlier.

001    else {
002                elem.addClass
( animation + “ visible” );
003            }
004        }
005    });
006 }); 
007 

Style the animation

Initially we are going to make the animated elements invisible and only turn on their visibility as the page scrolls to them. We can then call their animation from the JavaScript we have just added. Add these two classes to the style tags at the top of the document.

001 .animated {
002            visibility: hidden;
003    }
004 .visible {
005           visibility: visible;
006    }
007 

Set up the animation

Now we will amend the tag that we changed in Step 8 with the code shown below. Notice how we move the animation class into the data-animation tag? We grab that content in JavaScript once it is on the screen and then add it again as a class; this will trigger the animation and ensure that it only fires when on screen.

001 <div class=”medium-7 columns animated” 
data-animation=”fadeInDownBig”>
002 

Delayed animation

Now amend the tag that we set up in Step 9. This time we also add a data element for ‘animation-delay’. As before, this will be picked up by our JavaScript and used to set the timeout function so that the animation is delayed before being called. We are now triggering this animation only when it is fully on the screen.

001 <div id=”introText” class=”medium-5 columns
animated “ data-animation=”fadeInUpBig” 
data-animation-delay=”200”>
002



Throwing a wobbly

Look a little further down the document at the ‘signup’ <div> id. Inside here you will find a heading 1 tag. Amend the tag as shown below. Here we are adding a wobble animation, which really draws attention to the heading as the user reaches this part of the page.

001 <h1 class=”text-center animated” data-
animation=”wobble”>Free download</h1>
002 

Three columns of content

A little further down the page in the <div> tag with the id of ‘three’ are three four-column sections. Change the first as shown below so that it flips in along the y axis. There is no delay on this first one, however we will stagger the next couple of columns so that they appear in sequence along the page.

001 <div class=”medium-4 columns animated” 
data-animation=”flipInY”>
002 

Stagger the second column

Now find the second ‘medium-4 columns’ content and add in the data animation and delay attributes as shown below. This waits almost half a second before this content starts to animate onto the page. By staggering the animation here we can draw far more attention to the content on the page.

001 <div class=”medium-4 columns animated” 
data-animation=”flipInY” data-animation-
delay=”400”>
002

Last of the three columns

Find the final column that has the class ‘medium-4 columns’ and again add the animation and delay, data attributes. Here we are waiting a little longer than before to almost a second before animating. Save the page and scroll to this section of the page to trigger it.

001 <div class=”medium-4 columns animated” 
data-animation=”flipInY” 
data-animation-delay=”800”>

Animate the last image

Finally, move down the page to find the image tag of the jeans and add in the class and animation for this element. Save the page and preview this in the browser in order to see this image move in. This is a particularly useful technique for any element that you would like to draw attention to on your webpage.

001 <img src=”img/jeans.jpg” class=”animated” 
data-animation=”wobble”>
002



×