Learn How to Create Scroll based CSS Animation | Make Beautiful Parallax Effects

It’s all the rage: make a scroll based css animation that react to how far a user has scrolled down a page.

The latest craze in web design is here, and we show you how to create animations that react to how far the user has scrolled down the page. You’ve probably seen the sites we’re focusing on here.

They require the user to scroll down the page, and as they do so the site appears as normal, but then it might stop, other content might move in from the edges, text may animate, and so on. The average web designer is left wondering how this is happening as it completely messes with what the scroll bar stands for.

Fortunately, it’s pretty easy to create this kind of content.

Scroll-Based Animations

Scroll based CSS Animation

First and foremost we need to use a jQuery plugin called Skrollr. We’ve included it in the start folder, but check out the project page on GitHub. Once we have this plugin we use the HTML5 data attribute to embed data based on how many pixels the user has scrolled down the page. To animate we simply change to CSS properties; so at 0px we might have top:-30%, then at 2000px we set top:50%. This would slide an object from off the top to the centre of the page over a scroll distance of 2,000px. It’s straightforward to create, so let’s dive in.

1. Getting started

Copy the start folder from the resource disc onto your desktop and open index.html in a code editor. In the head section add the link shown below that will display the correct typeface in the design. Take a look at the body section and you will see four comments splitting the body into four sections.

[css]<link href="http://fonts.googleapis.com/css?family=Dosis:500" rel="stylesheet" type="text/css" />[/css]

2. Create the background

Just before the comment for the first section add the code as shown below. We are using the data attribute for HTML5 that stores the scroll position and what we want to happen. We are not doing anything for the first 1,400px on the display then we are going to change the background colour – we repeat the colour change at other scroll points.

[html]
<div id="bg" data-0="background-color:rgb(70,168,189);" data-1400=""
data-1900="background-color: rgb(133,60,79)" data-3500=""
data-4000="background- color:rgb(60,60,60)" data-4950=""
data-5250="background-color:rgb(255,142,73)"></div>
[/html]

3. Style the background

Now move back to the head section and add the following code that will style up the h1 tag into the right font, but more importantly it sets the size of the background. Later when we have added content you will see that as you scroll down the page the colour changes four times as per the colours in step 2.

[css]<style>
h1{
color: #fff; font-size: 4em;
text-align: centre; font-family: ‘Dosis’, sans-serif;
}
#bg {
top: 0; left: 0; width: 100%; height: 100%;
}
</style>[/css]

4. Adding content

Move your cursor down to the first section comment in the body tag. Add the code after the comment as shown. This displays a clock and positions it on the screen. From 1,500 to 1,700px down the page the clock’s opacity will fade out. You can see the opacity property in the data attribute.

[html]<div class="holder" data-0="top:50%; left:65%” data-1500=”opacity:1” data- 1700=”opacity:0”>
<img src=”images/clock.png” width=”300” height=”300” alt=”clock”>
</div>[/html]

5. Lending a hand

The clock needs some hands on it, so let’s start by adding the first. You can see in this code that we are transforming the rotation property. This first clock hand we’ll add will be the hour hand, so you will see it moves to 65 degrees in total, which is about 2.5 hours on the clock face!

[html]
<div class=”arm” data-0=”top:50%; left:65%; transform:rotate(0deg);” data-1400=”top:50%; left:65%; transform:rotate(60deg);opacity:1” data-1600=”top:50%; left:65%; transform:rotate (65deg);opacity:0”><img src=”images/arm2.png” width=”30” height=”300” alt=”clock-hand”></div>
[/html]

6. Hand in hand

So now we add the minute hand to our clock and this time it rotates much more so that it echoes what is taking place on the hour hand. You will also notice that both hands actually fade out for the last 200px that they are on the screen. Any CSS property can be animated in this way.

[html]

<div class=”arm” data-0=”top:50%; left:65%; transform:rotate(0deg);” data-1400=”top:50%; left:65%; transform:rotate(720deg);opacity:1” data-1600=”top:50%; left:65%; transform:rotate (790deg);opacity:0”><img src=”images/arm1.png” width=”30” height=”300” alt=”clock-hand”></div>

[/html]

7. Style the clock

Now we’ll move back into the style tags in the head section of the document. We’re styling our holder that contains the clock graphic. Here we set the size of it and offset it by half of its width and height in the margins,sothatwearecontrollingthecentrepositionof the clock’s location when we animate it.

[css]
.holder{ width: 300px; height: 300px;
margin-left: -150px; margin-top: -150px;
}
[/css]

8. Styling the hands

Now we add the CSS for the arms of the clock. We once again set the width and height and offset it as in the previous step. More importantly here though, we set the transform origin position to the centre of the div element so that we can rotate it around it’s centre point. Save and test this in the browser.

[css]

.arm {

width: 30px; height: 300px;

margin-left: -15px; margin-top: -150px;

-webkit-transform-origin: 50% 50%;

-moz-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

-o-transform-origin: 50% 50%;

transform-origin: 50% 50%;

}

[/css]

9. Add some text

As you scroll down the page you should see the hands of the clock turning, before the clock fades out entirely. Return to the document and continue adding the following code into the first section comment of the page body. This adds some text that will appear alongside our clock. Here you can see that the text slides out to the left and fades.

[html]

<div data-0="top:50%;

left:35%" data-1350="top:50%; left:35%;

opacity:1" data-1650="top:50%; left:-15%;

opacity:0"><h1>Give Us A<br>Problem</h1>

</ div>

[/html]

10. Style the text

Move back into the style tag and add the following CSS that will position the text and a wrapper for the next section of animation. Save the document and view in a web browser now. You will see the text to the left of the clock, and when the document scrolls down, the text will slide off to the left.

[html]

.text1 {

width: 300px; height: 320px;

margin-left: -150px; margin-top: -160px;

}

#cog-wrapper {

width: 400px; height: 400px;

margin-left: -200px; margin-top: -200px;

}[/html]

11. Adding a holding div

Our next section of code adds a holder that will contain two cogs. This starts to slide in from the right when the user scrolls 1,600px. It eventually slides off the left-hand side of the screen. In the next step, when we add our cogs they will need to be placed before the closing div tag shown below.

[html]

<div id=”cog-wrapper” data-1600=”top:50%;

left:130%” data-1900=”top:50%; left:50%”

data- 3500=”top:50%; left:50%” data- 3800=”

top:50%; left:-130%”> </div>

[/html]

12. Adding the cogs

Now we add two cogs inside the cog-wrapper we created in the previous step. Make sure the code here is placed inside the closing div tag of the code in the previous step. The cogs are rotating here at different speeds to reflect the different sizes of cogs turning against one another.

[html]

<div id=”cog-wrapper” data-1600=”top:50%; left:130%” data-1900=”top:50%; left:50%” data- 3500=”top:50%; left:50%” data-3800=”top:50%; left:-130%”>

<div id=”cog2” data- 1600=”transform:rotate(0deg);” data-3800=”transform:rotate(360deg);”><img src=”images/cog2. png” width=”200” height=”200” alt=”cog2”></div>

[/html]

13. Placing the first cog

Add the following code to the CSS section in the head of the document. This styles the width and height of the first cog and places it within the cog wrapper. The transform origin is moved to the centre of the cog so that it rotates correctly within the animation on screen.

[css]

#cog1 {

width: 250px; height: 250px;

margin-left: 30px; margin-top: 30px;

-webkit-transform-origin: 50% 50%;

-moz-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

-o-transform-origin: 50% 50%;

transform-origin: 50% 50%; }

[/css]

14. The second cog

Add the CSS code for the second cog, which only differs from the first with the width and height. Now save the document and refresh your browser. You will see that as you scroll down the cogs will fly on to the screen and then fly off again. Meanwhile the cogs are rotating together in the centre.

[css]

#cog2 {

width: 200px; height: 200px;

margin-left: 200px; margin-top: 200px;

-webkit-transform-origin: 50% 50%;

-moz-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

-o-transform-origin: 50% 50%;

transform-origin: 50% 50%;

}

[/css]

15. Annotating the cogs

Move the cursor back to the body section and place the following code before the third comment in the code. This adds two text boxes to the page, above and below the cogs on the screen. These text boxes animate in from the top and bottom of the document.

[html]

<div class=”text2” data-1550=”top:-20%; left: 50%” data-1750=”top:25%; left: 50%” data-3600=”” data-3800=”top:-20%; left: 50%”><h1>We’ll Apply</h1></div> <div class=”text2” data-1550=”top:120%; left: 50%” data-1750=”top:80%; left: 50%” data-3600=”” data-3800=”top:120%; left: 50%”><h1>Ourselves</h1></div>

[/html]

16. CSS for the text

Move into the CSS section of code again and add the CSS for the text. This creates the text regions that are necessary for the text we added in the previous step. Save the document now and switch over to your browser. Refresh the page and scroll down to see the text move into the document with the cogs.

[css]

.text2 {

width: 50%; height: 200px;

margin-left: -25%; margin-top: -100px;

}

[/css]

17. Spark of inspiration

Move the cursor to just after the third comment in the body of the document. Add the code below which sets up a light bulb to fade in after the cogs have left the screen. The bulb appropriately fades out when the user scrolls down 5,150px of page height.

[html]

<div class=”holder” data-3900=”opacity:0;” data-4000=”opacity:1;” data-4950=”top:50%; left:65%” data-5150=”top:50%; left:125%; “><img src=”images/bulb.png” width=”300” height=”340” alt=”light bulb”></div>

[/html]

18. Enlightening words

Directly under the last code we add the code shown here. This adds in the text that will display next to the light bulb. This text slides in from the top, pauses until the user has scrolled down to 4,950px then slides out to the left of the page. Save the document and refresh the browser to see it in action.

[html]

<div class=”text1” data-3800=”top:120%; left:35%” data-4000=”top:50%; left:35%;” data-4950=”opacity:1;” data-5150=”top:50%; left:-10%; opacity:0”><h1>Bringing<br>You A<br>Solution</h1></div>

[/html]

19. Final segment

We are now ready to move onto the final segment in the animation, so place your cursor after the fourth comment in the body code and add the div as shown below. This will slide a house image onto the screen from the left-hand side. As this is the final animation, there is no need to animate this content off the screen.

[html]

<div class=”holder” data-4950=”opacity:0; top:50%; left:-15%;” data-5250=”opacity:1; top:50%; left:35%;”><img src=”images/home.png” width=”300” height=”300” alt=”home”></div>

[/html]

20. Doing it right

Once the house image has moved onto the screen, we let the user scroll down another 300px. Then we will move a tick image over the top of that to signify completion. Add the code shown below, which animates the tick fading in from above and positioning itself directly over the home icon.

[html]

<div class=”holder” data-5550=”opacity:0; top:0%; left:35%;” data-5850=”opacity:1; top:50%; left:35%;”><img src=”images/tick.png” width=”300” height=”300” alt=”tick”></div>

[/html]

21. Creating a home

Just before the tick animates down the screen onto the home we want there to be some text next to the home to give it some context. Add the code shown, below the last, and you will notice that this text slides down and fades in beside the home image.

[html]

<div class=”text1” data-5050=”top:20%; left:65%; opacity:0” data-5350=”top:40%; left:65%; opacity:1”><h1>We Are<br>The Home</ h1></div>

[/html]

22. Final words

The very last element to add is the final text, which will appear just after the tick has animated. This slides up from the bottom of the screen and sits under the first text. Save the document and head back to your browser. You can refresh the page and see your animation from start to finish, in all its glory.

[html]

<div class=”text1” data-5750=”top:80%; left:65%; opacity:0” data-6050=”top:60%; left:65%; opacity:1”><h1>Of Great<br>Ideas</ h1></div>

[/html]

Demo

Post A Comment

Leave a Reply

Your email address will not be published. Required fields are marked *