CODEWITHSUNDEEP
htmlcssparallaxstellar.js
Colin Michael Flaherty
Colin Michael Flaherty

Reputation: 796

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?

Upvotes: 5

Views: 12539

Answers (4)

Hritik rai
Hritik rai

Reputation: 39

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.

Upvotes: 1

DevWL
DevWL

Reputation: 18850

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

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11496

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

Upvotes: 0

Christian
Christian

Reputation: 19750

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/

Upvotes: 17

Related Questions