How to create parallax effect like this?

Question

I've been trying to get build a website with a parallax effect like the one on this website: http://www.sparksandhoney.com/the-open-agency-index/ or http://www.sparksandhoney.com/press-index/

I've been trying to use stellar.js, but I can't seem to make the nav bar and web page scroll in sync over the image like this website. So far I've just been trying to make the nav bar and text layer be one div that scrolls over a fixed background but that is not working at all?

By the way, I've gone through this websites source code, and they use Squarespace, but I'm trying to do the effect without it.

Does anyone have any ideas?

Solution 1

It's actually super simple. The nav and content containers are in the flow. The content has a margin-top to separate it from the nav. Then the background image is set to position: fixed, and on scroll is offset by a percentage of the scroll position (eg, 30%).

You don't need any libraries, but jQuery makes it easier. Considering stellar.js requires jQuery, I assume you don't have a problem using it. In which case, the following code is enough to get it working for you:

$(window).on('scroll', function() {
    $('#background').css('margin-top', $(window).scrollTop() * -.3);
});

Here is a jsFiddle of the entire thing in action: http://jsfiddle.net/9gK9z/1/

Solution 2

Easy / Quick / Solution

Parallax effect is an outstanding effect to leave on a user's eye.

Well I have found a very easy way to do parallax effect using multiple divs:

<div style="background-size:cover;background-image:url('https://picsum.photos/400/300?random=1'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('https://picsum.photos/400/300?random=2'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('https://picsum.photos/400/300?random=3'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>

How it works

The background-attachment does the real magic in the code actually. Although a simple padding will be visible of BODY.