In this tutorial you will learn:
- how to setup your html for a parallax website
- how to animate background image at a different speed then page scrolling
- how to precisely control the timing and duration of your animations.
/js/_main.jsfiles in your favorite code editor. That’s where we will be doing all our updates. Before we dive in, lets quickly explain what we have for start.
Step 1 – Setup
The code in
The code in
index.htmlis pretty simple, we have 4
sectionswith a background image
.bcgand a content container
.hsContainer(home slide container) which is by default horizontally and vertically centered.
sectionhas a custom background and the content is repositioned to the desired position. The
styleof the text is also slightly different on each of the sections, that’s purely to make it nicely readable.
_main.jswe have a simple script which preloads our background images (thanks to ImagesLoaded) and
resizeseach of the sections to be
100%of the browser viewport.
If you view the index file in a browser now, you will see 4 sections scrolling as they would normally and the background image
fixedas defined in our stylesheet. Next we’ll initiate the Skrollr.js and start creating our parallax scrolling effect.
Step 2 – Skrollr.js
Add the following lines to your
main.jsto enable Skrollr.js and to refresh it after our sections are resized to
100%of the height of the viewport.
Now we have to add some
data attributesto our sections to see Skrollr in action and to see our background image and content to move at a different speed. Copy and paste the following lines into your
What we are telling the browser is to change the background image position from
50% -100px, which means that the image is moved up by 100px from the start of the scrolling until the bottom of the
#slide-1hits the top of the
The text is scrolling with the page until the
#slide-1 h2hits the centre of our browser and then animates quickly of the screen and fades out, which we have defined in
data-top="bottom: 1200px; opacity: 0".
data-anchor-targetis a very powerful attribute, which enables you to define exactly when should your animation start and finish in relation the defined
targetelement. Using this attribute correctly enables you to have aprecise control over the timing of your scrolling animations.
Copy and paste the following lines of code to enable animations on the second slide.
Here we are animating the background image at the same speed to keep things consistent. The difference between #slide-1 and #slide-2 is that the second slide is scrolling through the whole viewport, but the first one loads already visible.
That’s why we are defining both
data-centeris actually not doing anything as it’s value is exactly half way between top and bottom, but experiment with different values and see how the data-center affects the whole animation.
Think about it as another keyframe.
We are going to slightly tweak our css for the
h2of this slide, because we want this heading to be fixed to the bottom of the viewport. Update your css for Slide 2 with the following styles.
Now the heading is fixed
70%from the top and doesn’t scroll with the page. This enables us to make this heading visible much earlier than before when it wasn’t fixed. We are also fading it out when the
100pxfrom the bottom of the browser.
You should know by now what to do…copy and paste the following lines of code into your
Again our background is animating at the same speed as the rest of the page, which makes things nicely consistent. You can tweak the settings to whatever you like, just keep in mind that subtle parallax scrolling effects usually work much better and are easier on eyes than quick animations.
Hey you, still following? Lets copy and paste settings for our last slide.
For the final slide we are also going to slightly tweak our css. We want the text to be
fixedto the top of the browser and we will remove the background color and padding. Update your stylesheet with the following highlighted lines of code.
This makes the heading on the last slide fixed to
250pxfrom the top. The skrollr attributes for
.hsContentare making the heading invisible until the
top of #slide-4is
25% from the topof the browser window.
Step 3 – Force Height
If you have followed the tutorial and got to this point, you will see everything working fine in the browser and all our parallax scrolling animationsworking nicely. There is only one issue. When you scroll past the last slide, you will see a big black slide coming from nowhere.
Skrollr is by default manipulating the height of the document to make sure all animations fit inside and the black color is our background color.
But what we want is the page to finish at the end of the last slide. To do that we will need to turn off the
forceHeightoption for Skrollr.
main.jswith the following code.
Now everything should be working exactly how we wanted.
There you have it, a simple parallax scrolling tutorial with a subtle animations. Let me know what do you think about parallax scrolling animations. Are they being overused or used on wrong projects?