How can I achieve horizontal parallax scrolling?

Question

I'd like my website's background to feature a horizontal (rather than vertical) parallax effect when scrolling horizontally. The following jQuery code was used by me for making a vertically scrolled website; I've tried to make some changes to make it work horizontally, but unfortunately had no luck.

$(document).ready(function(){
    var $window = $(window);
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this);
        $(window).scroll(function() {
            var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));
            var coords = '50% '+ yPos + 'px';
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

Where's your HTML? What are you trying to do? What have you tried? — APAD1, Aug 19 '14 at 15:40
@APAD1 Just want to point out that it's pretty clear what he wants to do — TylerH, Aug 19 '14 at 15:42
@Lochakocha Have you tried simply changing `yPos` to `xPos` and `scrollTop()` to `scrollLeft()` and `.top` to `.left`? — TylerH, Aug 19 '14 at 15:43
@TylerH On the contrary, "I'd like to make my parallax scroll horizontally" is quite unclear. — APAD1, Aug 19 '14 at 15:45
@APAD1 It is actually pretty clear. He wants a [parallax scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling) effect when scrolling horizontally (that's left-to-right). — TylerH, Aug 19 '14 at 15:46
@APAD1 to be mor clear I want my website to scroll to right or left, no from the top to the bottom — Lochakocha, Aug 19 '14 at 15:46
@Locakocha that is still unclear. You can have a horizontally scrolling website without any parallax whatsoever. If you shared your HTML it might help us understand what you're trying to do. — APAD1, Aug 19 '14 at 15:47
@APAD1 please, you are not helping. Do you know what the parallax effect is? No? Then read the link I posted. Yes? Then you know he wants a parallax effect in his background when he scrolls left to right. It's very simple to understand. — TylerH, Aug 19 '14 at 15:50
@TylerH, if it's so easy to understand, why are you arguing with me instead of answering their question? Oh that's right, because it's not clear what they're trying to do. There are many different implementations of parallax, you can have parallaxing backgrounds, parallaxing elements, etc. If their question is clear, then answer it and stop whining. — APAD1, Aug 19 '14 at 15:52
@APAD1 I haven't answered because I don't know jQuery. You are the one whining about not understanding what he means when it only requires the most basic ability to intuit meaning to understand the question. I have edited the question to be more clear just for you. — TylerH, Aug 19 '14 at 15:53

score 0 · Answer 1 · edited May 23 '17 at 12:20

You'll need to replace the yPos, scrollTop() and .topwith horizontal measurements of position instead. You can use scrollLeft() instead for example.

See this previous question

To implement parallax, you need to scroll different "layers" of elements at different speeds. Foreground elements move faster (more pixels in the same amount of time), and background moves only a little.

You could achieve this several ways - with hard-coded pixel values by element type, multiplying by some speed factor, etc.

The code above only works with the "window" as a whole. You'll need to capture the elements you want to scroll separately & apply a horizontal scroll value to them separately as well.

score 0 · Answer 2 · answered Aug 19 '14 at 16:12

Something along the lines of this:

var parallaxDiv = '';
$(document).ready(function(){
  parallaxDiv = $('#parallaxDiv');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  parallaxDiv.css({'background-position-x': 0 + (st*.57 )+"px"});
});

It depends on if you want the background position to change or the left/right position, but this should work.

How can I achieve horizontal parallax scrolling?

2 Answers2