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

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