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

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/

Answer 2

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

you can use multiple divs to do this

<div style=" size:cover; background-size:cover;background-image:url('2.jpg'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('3.jpg'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('4.jpg'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>

In my code (Code snippet given) you can simply change the image url and enter your own urls for your images.

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

Answer 3

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

Answer 4

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