What are the techniques for making scroll-based animations?

Question

I’m interested in creating websites with scroll-driven animation (ex.: Kano), where content is animated and replaced as the page is scrolled.

What are the techniques to facilitate such programming?

Answer 1

The technique

The effect that can be visualized in the link placed in the question is commonly known as "Parallax Scrolling".

Parallax

The term "Parallax" refers to the apparent motion of objects when viewed from different positions. The technique was originally used in 2D video games in background images with slower moves than foreground images, creating an illusion of depth.

Although it is something that is in "fashion" with regard to the development of web-sites, in reality it is something that remote 30 years ago as is the case of the game Moon Patrol.

How it works

Web-sites with the Parallax effect make use of CSS3 and script to create multiplane animations, introduce new elements and create movement beyond the Y axis as you scroll through the page.

The basic principle is to create the illusion of three-dimensional depth by moving elements on the page at different speeds.

Things in the foreground move faster than things in the background, giving visitors the impression that the site contains a depth between its elements.

Formula

Everything revolves around the manipulation of the position of the elements, the scroll of the page and the speed at which things happen. Essentially, the existing scripts to facilitate the creation of pages with "Parallax" effects are based on a simple formula:

• Tier 1

  Nearest object layer (faster scrolling):

  v₁ = c;

  It is defined that the velocity of layer 1, or closer, has the velocity equal to c.

• Layer 2

  Furthest object layer (slower scrolling)_

  v₂ = c/2;

  For layer 2 or further, we define that its velocity is half the velocity of layer 1.

• More layers

  As we add more layers, we manipulate the speed of the layers as a function of the speed of the nearest layer, thus obtaining different speeds for each layer:

  v₃ = c/3;
  v₄ = c/4;
  ...
  v₉₉ = c/99;

We can then with a formula equal to the above, animate the speed of each layer with different displacements transforming a static scenario into a scenario with multiplane animations giving the illusion of depth.

For this layering scheme:

^{Image source.}

We got the following animation:

^{Image source.}

---

Practical application

Transposing the explanation given above into the web scene, the animations are based on a formula equal or similar to the one presented, but depending on the technique applied, the animation can be "Parallax" or something more elaborate.

Technique 01 - Base Effect

A site with "Parallax Scrolling" has the foreground elements moving naturally with the page scroll. The effect is applied to background elements (usually background images), where they are moved at a lower speed to give the feeling of depth.

Example in codePen

HTML

<div class="bg"></div>
<section>
    <h1>Home page</h1>
    <p>We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.</p>
    <p>We offer the following services:</p>
    <ul>
        <li>Branding</li>
        <li>Logos</li>
        <li>Websites</li>
        <li>Web applications</li>
        <li>Web development – HTML5, CSS, jQuery</li>
        <li>Content Management Systems</li>
        <li>Responsive Web Design</li>
        <li>Illustration</li>
        <li>Business cards</li>
        <li>Letterheads and compliment slips</li>
        <li>Flyers</li>
        <li>Mailers</li>
        <li>Appointment cards</li>
    </ul>
    <h1>Sub page</h1>
    <p>Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:</p>
    <img src="http://lorempixum.com/500/600"/>
    <p>Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.</p>
    <p>Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.</p>
    <p>Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.</p>
    <img src="http://lorempixum.com/500/600/sports"/>
    <p>Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.</p>
</section>

CSS

.bg {
  background: url('http://i.imgur.com/USFbNpC.jpg') repeat;
  position: fixed;
  width: 100%;
  height: 300%;
  top:0;
  left:0;
  z-index: -1;
}
section {
  color: #fff;
  font-family: arial;
  width: 500px;
  margin: auto;
  line-height: 20px;
  font-size: 16px;
}

jQuery

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  $('.bg').css('top',-(scrolled*0.2)+'px');
}

^{This example was created by Sara Vieira and published in webdesignerdepot.}

As can be seen by the example code, the trick is done by placing the background image with a fixed position position:fixed and by performing a function whenever the page scroll bar is moved. This function handles the value of top of the image, moving it in 1/5 of the scroll, thus obtaining a displacement at different speeds between the foreground elements and the background element.

Technique 02 - Advanced Handling

The more advanced techniques of Parallax Scrolling follow the original concept, but take animations further, controlling not only the displacement of the elements, but also their position on the screen and/or their state of visibility.

Example in NASA Prospect

In this animation we can see that not only the foreground has a different speed from the background, but as we scroll, there are elements that are inserted into the page and others removed and/or manipulated in relation to the screen.

This is all controlled with the basic principle presented in the simple example that is based on the formula presented in the introduction to Parallax in this answer.

Technique 01 - Reverse Manipulation

Finally, the inverted Parallax Scrolling is also popular, whose principle is the same basic technique, but in this case, when scrolling on the page, the elements in the X axis are moved instead of the Y axis.

The objects are thus manipulated using Javascript, so that their position changes according to the X axis creating a horizontal animation.

Example in Pixxelfactory

---

^{Notes:
The answer was drafted in order to explain in detail what Parallax Scrolling is, where the concept came from, what its most common practical applications are in the world of web-sites and how everything works behind the scenes.
A single code example has been placed to display the simplicity with which the effect can be generated.}

Answer 2

I’ve used the superscrollorama to do this. It’s very simple to use.. their own example is very intuitive. It uses the library greensock to work with the animation that by the way is fantastic.

The html would look like this:

<html>
<head>
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>SUPERSCROLLORAMA</title>

    <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">    
</head>
<body class="simple-demo">
    <div id="content-wrapper">

        <div id="examples-1">
            <h2 id="fade-it">Fade It</h2>
            <h2 id="fly-it">Fly It</h2>
            <h2 id="spin-it">Spin It</h2>
            <h2 id="scale-it">Scale It</h2>
            <h2 id="smush-it">Smush It</h2>
        </div>

    </div>
    <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/jquery.superscrollorama.js"></script>

</body>
</html>

And javascript like this:

$(document).ready(function() {
    var controller = $.superscrollorama();
    // Anima os elementos individualmente utilizando greensock
    controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
    controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}));
    controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
    controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
    controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
});

you can see the official website or clone by git

Answer 3

You can use an animation of several frames and images, this would not be very efficient in terms of internet usage, but could determine which frame should be the current with the current scroll relation of the page document.body.scrollTop with the full size document.body.scrollHeight.

Calculating the current percentage, animations could be created using pure javascript only.

a = (document.body.scrollTop/document.body.scrollHeight)*100

If you want a div to move 500px for example, calculates the current page percentage and calculates the 500 percentage,.