0

I'm creating a parallax effect and I've made it so that (almost) every element has a different scroll speed.
I've also made it so that elements down the page don't trigger their scroll speed until they've reached the viewport.

Here's the JS for trigger commands on reveal:

function isElementInViewport (el) {

  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }

  var rect = el.getBoundingClientRect();

  return (
    rect.bottom >= 0 &&
    rect.left >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

My scroll speed code is:

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

  if (isElementInViewport($('#computer'))) {
    $('#computer').css({
      transform' : 'translate(0px, '+ wScroll /12 +'%)'
    });
  }

OR for elements already at the top of page:

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

  $('#shape-2').css({
    'transform' : 'translate(0px, -'+ wScroll /8 +'%)'
  });

The issue here is that when I add function isElementInViewport to the scroll speed.
It makes the element jump out of view when revealed, THEN it scrolls how I want it.
So, then it's out of place with the layout of the page.

I've tried compensating it by changing the position of the element so that when it's revealed it jumps to its original spot then starts scrolling, but this didn't prove helpful since the position varied from different screen sizes and resolutions.

Any way I can make it so it doesn't jump when revealed?

curveball
  • 4,320
  • 15
  • 39
  • 49
  • Have you tried with something like `if($(document).scrollTop() > $('#computer').offset().top - $('#computer').height() {` ? – DimNC Mar 29 '17 at 02:53
  • I tried putting this code in place of the 'if (isElementInViewport)' line. It turned out invalid. –  Mar 29 '17 at 04:05
  • I forgot a parenthesis. `if($(document).scrollTop() > $('#computer').offset().top - $('#computer').height()) {` – DimNC Mar 29 '17 at 04:12
  • Code worked this time, but still same jumping problem. –  Mar 29 '17 at 04:16

1 Answers1

0

Make sure your base CSS declares a translation transform of zero, or add it from script before the element is in view; adding the attribute later may be causing the jump.

Phil N.
  • 650
  • 4
  • 11
  • I made sure of that just now. In the main CSS I put in 'transform: translate(0px, 0px);'. Still doesn't work. –  Mar 29 '17 at 04:01