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

<section class="parallax fullscreen-js">
  <div class="section-inner">
    <div class="section-background" id="background-four"></div>
    <div class="section-content">
      <h1 class="head-title">Web & Mobile Solutions</h1>
    </div>
  </div>
</section>
<section class="parallax fullscreen-js">
  <div class="section-inner">
    <div class="section-background" id="background-five"></div>
    <div class="section-content">
      <h1 class="head-title">Web & Mobile Solutions</h1>
    </div>
  </div>
</section>

The rest of it is on this fiddle: https://jsfiddle.net/ksna2hae/1/

Meanwhile, I came across a website who neatly implemented it and it works really good on mobile as well. The link of the site is: http://www.elespacio.net However, there have been many struggles along the way since I'm dont posses advance knowledge in jQuery or Javascript and couldn't figure how to build the interface desired. Below is how far I came with the script.

  var windowHeight = $(document).height();
  var windowWidth = $(document).width();
  var didScroll;
  var lastScrollTop = 0;
  $(".page-index .fullscreen-js").css({
    'height': windowHeight,
    'width': windowWidth
  });
  $(".page-index > div").each(function(i) {
    $(this).css({
      'z-index': (i + 1)
    });
  });
  $(".parallax:nth-child(2) .section-inner").css({
    "transform": "translate3d(0, " + windowHeight + "px, 0)"
  })


  var inner = $('section .section-inner');
  inner.not('section .section-inner:first, section:nth-child(2) .section-inner').css({
    'visibility': 'hidden',
    "transform": "translate3d(0, 0, 0)"
  }); 
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  // var navbarHeight = $('header').outerHeight();

  $(window).scroll(function(event) {
    didScroll = true;
  });
  setInterval(function() {
    if (didScroll) {
      hasScrolled();
      didScroll = false;
    }
  }, 250);

  function hasScrolled() {
    var st = $(this).scrollTop();
    // Make sure they scroll more than delta
    if (Math.abs(lastScrollTop - st) <= delta)
      return;
    if (st > lastScrollTop) {
      // Scroll Down
      $(".parallax:nth-child(2) .section-inner").css({
        "transform": "translate3d(0, " + -windowHeight + "px, 0)"
      })
      console.log('Window has Scrolled Down');
    } else {
      // Scroll Up
      if (st + $(window).height() < $(document).height()) {
        console.log('Window has Scrolled Up');
      }
    }
    lastScrollTop = st;
  }

What I'm willing to do is when I scroll the transform3d Y value of the visible div.section-inner get's decreased by the amount we scrolled, and at the same time value is added to its sibling div.section-inner

Basically, while scrolling we gradually hide the div which is on screen and unveil the next .section-inner by increasing it's value of Y-value of transform3D.

I've tried different parallax plugins such as parallax-js, stellar-js and scrollorama but none of the worked. Still, when analyzing the code of the aforementioned link in the beginning I realized that there is a way to cheat the glitches that happen on mobile, and it kind of imitates the parallax effect. And in the same time it would solve many future problems for parallax scrolling on mobile platforms.

Thanks in advance!

回答1:

I’m kinda struggling to understand what you're trying to do... The link you left for 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.

来源：https://stackoverflow.com/questions/32393734/imitate-parallax-effect

标签

javascript

jquery

parallax