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?

I've never used stellar, but I do know that it is possible with it. As for the fixed background make sure you have `background-attachment: fixed` set. — Patrick Allen, Apr 20 '14 at 05:36
@PatrickAllen I tried that but it doesn't seem to fix the background. It seems like you're familiar with parallax though. Are there any other good libraries you'd recommend? — Colin Michael Flaherty, Apr 20 '14 at 05:48
Stellar is one of the top ones and should definitely work. Never heard of this one, but the demo looks simple and like what you need: https://plugins.jquery.com/parallax-imageScroll/ — Patrick Allen, Apr 20 '14 at 05:52
Take a look and if you need help post what you have and I'm sure we can help you — Patrick Allen, Apr 20 '14 at 05:53
@PatrickAllen Thanks! I'm working on it now and will update you if it works out alright. — Colin Michael Flaherty, Apr 21 '14 at 04:03

score 17 · Accepted Answer · answered Apr 20 '14 at 06:04

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/

+1 This is a great solution. Perfect for what OP is trying to do... no need for a plugin. — Patrick Allen, Apr 20 '14 at 06:15

score 1 · Answer 2 · edited Jun 01 '21 at 18:51

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.

score 0 · Answer 3 · answered Apr 20 '14 at 06:05

Apart from background-attachment: fixed

there is also a technique revolves around controlling the speed of background image along with the required attributes: "data-type" and "data-speed"

A simple DEMO HERE

For data-* attributes

A nice example here from tutorial

score 0 · Answer 4 · edited May 29 '18 at 17:37

You can do this:

.wraper
  width: 100%
  height: auto

.box
  overflow: hidden
  position: relative
  width: 100%
  padding-bottom: 40%

.object1
  position: absolute
  right: 15%
  top: 8%
  width: 13%
  height: 60%
  background:
    size: contain
    repeat: no-repeat
    image: url(https://openclipart.org/image/2400px/svg_to_png/213897/black-android-phone.png)

You can add more objects if you like.

Then in JS:

$(window).scroll(function(){
  var curentPosition = Math.round($(this).scrollTop());
  console.log(curentPosition);
  $('.object1').css({
    'transform': 'translate(0px, -' + (curentPosition / 5) + '%)'
  });
});

Codepen: http://codepen.io/GlupiJas/pen/yOxRxG

CSS only: http://codepen.io/GlupiJas/pen/BKqxyE

Background Parallax: http://codepen.io/GlupiJas/pen/YqJdJg?editors=1010

JS/JQUERY CLASS: http://codepen.io/GlupiJas/debug/YqJdJg