In this tutorial we will create a scrolling website containing 4 fullscreen sections with images and a short description.

We’ll use Skrollr.js and to animate CSS3 transform: translate() of a large container to create smooth scrolling transitions between the slides.

View Demo →Download Files ↓

What you’ll learn

• how to lay out your html
• how to use Skrollr for horizontal animations
• how to pause a scrolling animation
• how to animate like David Copperfield
• and much more

Related Screencast

View on YouTube.

Busy working on your own project? Jump to the individual sections.

• 1:22 – 1. Create slides container
• 3:27 – 2. Add individual slides
• 7:50 – 3. Position an image caption
• 11:50 – 4. Make the slides fullscreen
• 12:40 – 5. A scrolling helper
• 15:28 – 6. Adding Skrollr and the data-attributes
• 18:30 – 7. Pausing a scrolling animation
• 20:49 – 9. Final tweaks

Open the starting files, watch the video and follow the steps below.

1. Create Slides container

This will be our full width, full height container with an overflow hidden.

<div id="slides-container">
    <div id="slides"></div>
</div>

html, body {
    width:100%;
    height:100%;
}

/* full width/height container */
#slides-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* double the height/width of a viewport */
#slides {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

body and html are both resized to 100% width and height.

#slides is a container that will include all 4 slides.

Again it takes up the whole screen.

2. Add individual slides

Next we’ll add 4 divs .slide and set the width and height to 50%.

This will make sure we can layout all 4 of these containers into each corner of the parent #slides.

<div id="slides-container">
    <div id="slides">
        <div id="slide-1" class="slide"></div>
        <div id="slide-2" class="slide"></div>
        <div id="slide-3" class="slide"></div>
        <div id="slide-4" class="slide"></div>
    </div>
</div>

.slide {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:50%;
}
#slide-1 {
    background: url('../img/bcg_slide-1.jpg') no-repeat center center;
    background-size: cover;
}
#slide-2 {
    background: url('../img/bcg_slide-2.jpg') no-repeat center center;
    background-size: cover;
}
#slide-3 {
    background: url('../img/bcg_slide-3.jpg') no-repeat center center;
    background-size: cover;
}
#slide-4 {
    background: url('../img/bcg_slide-4.jpg') no-repeat center center;
    background-size: cover;
}

To position each slide into the right place we’ll use transform: translate();

/* Slide 2 goes to the bottom left */
#slide-2 {
    background: url('../img/bcg_slide-2.jpg') no-repeat center center;
    background-size: cover;
    -webkit-transform: translate(0,100%);
    -ms-transform: translate(0,100%); 
    transform: translate(0,100%);
}
/* Slide 3 goes to the bottom right */
#slide-3 {
    background: url('../img/bcg_slide-3.jpg') no-repeat center center;
    background-size: cover;
    -webkit-transform: translate(100%,100%);
    -ms-transform: translate(100%,100%); 
    transform: translate(100%,100%);
}
/* Slide 4 goes to the top right */
#slide-4 {
    background: url('../img/bcg_slide-4.jpg') no-repeat center center;
    background-size: cover;
    -webkit-transform: translate(100%,0%);
    -ms-transform: translate(100%,0%); 
    transform: translate(100%,0%);
}

Now you probably asking yourself why did he set the .slide width and height to 50%, when we want them to be fullscreen?

Stay calm and keep reading.

3. Position an image caption

We’ll include a simple cation with a title and a description for each of the slides.

<div class="caption">
    <h1>Image 1 Title</h1>
    <p>Image description goes here.</p>
</div>

.caption {
    position: absolute;
    bottom: 5%;
    right: 5%;
    text-align: right;
    color: #fff;
}
p, h1 { margin: 0; }
h1 { margin-bottom: 0.2em; }
p { line-height: 1.333em; }

Nothing fancy here, just a simple container positioned to the bottom right corner of the slide with text aligned right.

Slide 3 and 4 will have a slightly different alignment so lets specify that.

#slide-3 .caption {
    left: 5%;
    right: auto;
    color: #47373f;
}

#slide-4 .caption {
    right: auto;
    left: 5%;
    top: 5%;
    bottom: auto;
    color: #47373f;
}

These two captions are positioned left and #slide-4 caption is also moved to the top by top: 5%; bottom: auto.

4. Make the slides fullscreen

To make our slides fullscreen is pretty simple, look at the magic.

This is what David Copperfield tought me.

By simply resizing the #slides to 200% we will turn the slides from a quarter of the screen to a fullscreen size.

#slides {
    width: 200%;
    height: 200%;
}

Now our 50% is actually 100% of the viewport. Sounds confusing? I hope not.

5. A scrolling helper

Remember we have set the width and height of #slides-container to 100% and also set the overflow to hidden, that means that we have nothing that makes the page scroll.

We will need to create a div which will be our magic helper.

David Copperfield is using many helpers for his tricks so why couldn’t we?

He’s always using some nice chicks, but we’ll have to stick with a pretty div with id #helper.

<div id="slides-container">
    ...
</div>

<div id="helper">
    <div class="marker red"></div>
    <div class="marker green"></div>
    <div class="marker blue"></div>
    <div class="marker yellow"></div>
</div>

#helper is placed under #slides-container and makes our page longer, it is a crucial html element on the page.

#helper {
    position:absolute;
    left:0;
    top: 0;
    height:400%;
    width: 20px;
}
.marker {
    height: 25%;
    width: 100%;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.yellow {
    background-color: yellow;
}

#helper is a container 4x taller then the viewport and we are also including 4 markers which will be our visual indication when we scroll 100% of the viewport down the page.

Now we have something to scroll.

6. Adding Skrollr and the data-attributes

Lets get to the exciting part of the tutorial.

Include Skrollr.js and initiate it on page load by including this code just before the closing body tag.

<!-- Include Skrollr.js -->
<script src="js/skrollr.min.js"></script>
<script type="text/javascript">
    var s = skrollr.init();
</script>

We will be adding skrollr data-attributes to animate our #slides container and reveal all 4 slides in a cool sequence.

<div id="slides" 
    data-0="transform:translate(0%,0%);" 
    data-100p="transform:translate(0%,-50%);"
    data-200p="transform:translate(-50%,-50%);" 
    data-300p="transform:translate(-50%,0%);"
>

What we are telling the browser is to move #slides down (transform:translate(0%,-50%)), then left (transform:translate(-50%,-50%)) and up (transform:translate(-50%,0%)) every time we scroll down 100% of the viewport height (100p, 200p, 300p).

Not sure how the Skrollr data-attributes work? You can learn it from scratch here.

Cool effect right, but as David Copperfields of the web development world, we can add one small trick and pause each of the scrolling animations for another 50% of the scroll duration.

This will make it an even bigger mystery to our magic trick.

How do we do that? Watch out.

7. Pausing a scrolling animation

Lets say we want to freeze each of the slides for 50% of the viewport height.

In other words we don’t want the Slide 2 and 3 move for a while and then scroll to the next slide.

We can include empty data attributes to create a keyframe and change the animation offsets.

The updated data-attributes would like this:

<div id="slides" 
    data-0="transform:translate(0%,0%);" 
    data-50p="" 
    data-150p="transform:translate(0%,-50%);"
    data-200p="" 
    data-300p="transform:translate(-50%,-50%);" 
    data-350p="" 
    data-450p="transform:translate(-50%,0%);"
>

Now every slides stays fixed for a while before scrolling to the next one.

If we want to keep our helper in sync we need to increase the size of it.

#helper {
    position:absolute;
    left:0;
    top: 0;
    height:600%;
    width: 20px;
}

The math is pretty simple. One of our slide animations now takes 150% of the viewport height and we have 4 slides, that is 150 * 4 = 600.

8. Fading out the caption

A little details can make a big difference and fading out the captions could make our page even more attractive.

Again we’ll use opacity and transform:translate() CSS3 properties for this magic moves.

<!-- Slide 1 Caption -->
<div class="caption"
    data-40p="opacity: 1; transform:translate(0px,0px);"
    data-70p="opacity: 0; transform:translate(0px,-100%);"
    data-anchor-target="#helper"
>

<!-- Slide 2 Caption -->
<div class="caption"
    data-130p="opacity: 0; transform:translate(0px,-200%);"
    data-180p="opacity: 1; transform:translate(0px,0px);"
    data-250p=""
    data-280p="opacity: 0; transform:translate(-100px,0px);"
    data-anchor-target="#helper"
>

<!-- Slide 3 Caption -->
<div class="caption"
    data-250p="opacity: 0; transform:translate(300px,0px);"
    data-300p="opacity: 1; transform:translate(0px,0px);"
    data-anchor-target="#helper"
>

<!-- Slide 4 Caption -->
<div class="caption"
    data-430p="opacity: 0;"
    data-450p="opacity: 1;"
    data-anchor-target="#helper"
>

As you can see, we are using #helper as our data-anchor-target.

That is the element which controls the timing of our animations instead of the caption elements themselves.

The first caption only animates out and the last one only fades in.

The duration (30p) and amount of pixels (-100px) for the animations out is shorter giving more emphasis on the caption animating in.

9. Final tweaks

We will visually hide our helper by changing the width to 0, but the element still needs to stay in the html markup.

Without it we would loose the chance to scroll down the page.

#helper {
    width: 0;
}

We will also tweak the animation of the first slide, because we don’t need any delay here. It could confuse users.

<div id="slides" 
    data-0="transform:translate(0%,0%);"
    
    data-150p="transform:translate(0%,-50%);"
    data-200p="" 
    data-300p="transform:translate(-50%,-50%);" 
    data-350p="" 
    data-450p="transform:translate(-50%,0%);"
>

By removing the data-50p="" data attribute we are removing this keyframe.

This means that the user scrolls down to a Slide 2 straight away without any delays.

10. Mobile and responsive

This tutorial only demonstrates how to use Skrollr to animate large container inside a smaller div with overflow.

In a nutshell this would be my approach for mobile devices:

1. turn Skrollr off using enquire.js
2. adjust our CSS for mobile and desktop breakpoint accordingly

Turn Skrollr off

We could use enquire.js like we did in my other tutorial.

Adjust CSS

We would remove the overflow: hidden from #slides-container and tweak the rest of our css to lay out our slides under each other.

View Demo →

Conclusion

I hope you’ve enjoyed another Skrollr tutorial and also learned something new about scrolling animations in general.

As you can see the possibilities are endless. Be creative. Be brave and most importantly have fun with scrolling animations.

Disclaimer

Please keep in mind that this tutorial is created only for educational purposes to help you get started with Skrollr.

Unfortunately I am not able to provide one on one support with your own projects.

Thanks for your support and understanding.

Resources: Images used in this tutorial are taken from Raumrot.com