Website Effect - Vertical Scroll Animation

Question

I have been trying to find an example of a website style and I can't figure what the effect is called. If you look at The Red Bulletin's website you will see that there are a number of images that animate into place as you scroll down the page. Does anyone know what this effect is called or know of a good tutorial that shows how this is done?

http://www.redbulletin.com/us/us

Take care,

Jon

score 1 · Answer 1 · answered Aug 17 '15 at 16:59

These kinds of effects are very rarely named, unless they represent some sort of design archetype which becomes ubiquitous, so I understand the difficulty in locating an answer.

I would recommend trying to emulate the effect yourself first; try to get some sort of working prototype, and then post your code here. Try breaking the problem down into it's fundamental technical challenges, for instance:

How do I detect when the user has scrolled to a certain point in the page?
How could I achieve the fade and slide animation effect on the example website?
How do I link these two things together, and make them reversible (on scroll up)?

Looking for specific tutorials will almost certainly be futile, unless the effect is some carbon copied typical example used to teach inexperienced coders - the equivalent of "Hello World!" in Web Design. Prototype as much as possible and, once you've hit a wall, post your code here and I'm sure that will provide better results.

Good luck!

score 1 · Accepted Answer · answered Aug 17 '15 at 17:04

1

Part of the effect is called "Parallax scrolling" and it has become fairly common. A quick search reveals a number of tutorials.

answered Aug 17 '15 at 17:04

BCDeWitt

4,540
2
21
34

Not saying it's the best one, but here's just one tutorial I found when searching: https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/ – BCDeWitt Aug 17 '15 at 17:06

score 0 · Answer 3 · edited May 23 '17 at 12:15

As BDawg mentioned it's called Parallax Scrolling. The idea is that you have 'pages' say that are 100% height and using javascript can 'animate' (easier with jQuery) to the next page by increasing window.scrollTop by window.height(). You'll need to do CSS and it can get a little tricky depending on what you want to do. The basic idea would be to do this:

CSS

html,body{margin:0px;padding:0px;height:100%;}
h1{margin:0px;padding:2em;}
.page{height:100%;font-size:3em;text-align:center;}
.p1{background:#3399FF;color:#FFFFFF;}
.p2{background:#FFFFFF;color:#3399FF;}

HTML

<html>
    <head>
    </head>
    <body>
        <div class="page p1">
            <h1>Page 1</h1>
        </div>
        <div class="page p2">
            <h1>Page 2</h1>
        </div>
    </body>
</html>

Javascript (with jQuery)

$('document').ready(function(){
    var height=$(window).height();
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           next=$(window).scrollTop()+height;
       } else {
           next=$(window).scrollTop()-height;
       }
       $(window).animate({'scrollTop':next},500);
       lastScrollTop = st;
    });
});

Cheated a bit I used another question again ;)

What I've provided you isn't exactly great but with that you should get the basic idea of how everything works. Good luck coding!!

Website Effect - Vertical Scroll Animation

3 Answers3