How to create parallax effect like this?

问题

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?

回答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/

回答2:

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

回答3:

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.

回答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

来源：https://stackoverflow.com/questions/23178762/how-to-create-parallax-effect-like-this

标签

html