Skip to content Skip to sidebar Skip to footer

Imitate Parallax Effect

Recently I've been struggling to implement the parallax effect and make it work in the mobile version as well. The structure of my code is as seen below
http://www.elespacio.net doesn't seem to have any parallax element at all...

Generally if i want to do something Parallax. (Using JQuery) I will take the scroll top value, then move an element by some factor of this.

   $(window).scroll(function() {
    wScroll = $(this).scrollTop();

    $('.moveable').css({
      'transform' : 'translate(0px, '+ wScroll /50 +'%)'
    });

  });

Here as the user scrolls, object .moveable will move vertically at 50% of that speed. translate(x-axis, y-axis).

As i say I’m not 100% sure on what you want to do! But this is a easy way to parallax! But i am certain this will also work on mobile.

Post a Comment for "Imitate Parallax Effect"