Similar to this unresolved question (jQuery - parallax - update background position correctly)

I am animating the transform property of an element on page scroll to achieve a parallax-like effect. I want this element to only begin animating up when it is in view. The problem now is that if the element appears further down the page, it has already moved up a lot and loses the effect.

Here is my code currently

function parallax() {
  var scrolled = $(window).scrollTop();
  $('[data-scroll]').css('transform', 'translateY('+-(scrolled*0.02)+'px)');
}

$(window).scroll(function(e){
  parallax();
});

Similar to this unresolved question (jQuery - parallax - update background position correctly)

I am animating the transform property of an element on page scroll to achieve a parallax-like effect. I want this element to only begin animating up when it is in view. The problem now is that if the element appears further down the page, it has already moved up a lot and loses the effect.

Here is my code currently

function parallax() {
  var scrolled = $(window).scrollTop();
  $('[data-scroll]').css('transform', 'translateY('+-(scrolled*0.02)+'px)');
}

$(window).scroll(function(e){
  parallax();
});

• javascript
• jquery
• parallax

• thats way too little code.. make a fiddle – Rachel Gallen Commented May 30, 2016 at 14:07
• in fact, forget the fiddle, check out this site ihatetomatoes/demos/parallax-scroll-effect – Rachel Gallen Commented May 30, 2016 at 14:10
• stackoverflow./questions/20791374/… – GL.awog Commented May 30, 2016 at 14:11
• @Rachel Gallen It's not way too little code, since it's all the code that is being used for the effect. I guess if you'd like to see the HTML it's literally just a div with [data-scroll] on it... Thanks for the link though, I will check it out – hidanielle Commented May 30, 2016 at 14:29
• @GL.awog I know how to check if the element is visible, and I've been experimenting with that. I guess I'm just not sure how to then figure out what the transform position should be based off the of the scroll position and speed. – hidanielle Commented May 30, 2016 at 14:30

1 Answer 1

In answer to your question how to separate "parallax'ed" divs, so they shift their position independently from each other upon scrolling, one should rely on their unique coordinates - each one has it's own $(elem).offset().top - a general vertical offset from the top of the page (it's stays the same all the time unless you meddle with the TOP property manually).

so all calculation could be based against this property.

$('.parallax').each(function(){ 
    
    if ($(this).is_on_screen()) {
      var firstTop = $(this).offset().top;
      var winScrollTop = $(window).scrollTop();
      var shiftDistance = (firstTop - winScrollTop)*0.02;

      $(this).css("transform":"translateY("+shiftDistance+"px)");
    }
});

plus you check if the element is in the viewport. Thus, you assure it moves the same delta distance in its own time no matter where it's on the page - further down or up.

Another thing is that how to put "borders" of visibility of the element on the screen. If you are moving an element when it's in viewport, i would suggest making a wrapping div within which the movement occurs (like a bg moving within a div wrapper).

<div class="parallax-section slide1">
 <span class="moving-block"></span>
</div>

div has a bigger height and we check when this div is on the screen, not the moving element.

demo

Also other modifications can be applied if one needs different speed, offset for each element. I found this plugin a good beginner stuff to learn parallax.

P.S. btw, all initial properties should be cached in variables instead of retrieving them each time in a callback, like firstTop for instance