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?

Primavera

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. – Dougald

@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? – Primavera

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: plugins.jquery.com/parallax-imageScroll – Dougald

Take a look and if you need help post what you have and I'm sure we can help you – Dougald

@PatrickAllen Thanks! I'm working on it now and will update you if it works out alright. – Primavera

Answer 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/

Sellma

+1 This is a great solution. Perfect for what OP is trying to do... no need for a plugin. – Dougald

Yess, this explains so much! Thank you. – Primavera

Answer 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.

Gunnar

Answer 3

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

Steamboat

Answer 4

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

Glidden