Question

最近，我一直在努力实现视差效果，并使其在移动版本中也能正常工作。我的代码结构如下所示

<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>

剩下的就是这个小提琴：https://jsfiddle.net/ksna2hae/1/

与此同时，我遇到了一个网站，他整齐地实现了它，它在移动设备上也非常好用。该网站的链接是： http://www.elespacio.net然而，由于我不具备jQuery或Javascript的高级知识而无法想象如何构建所需的接口，因此一直存在许多困难。以下是我在剧本中的表现。

  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;
  }

我愿意做的是当我滚动可见transform3d Y得到的div.section-inner值减少我们滚动的数量时，同时将值添加到其兄弟{{} 1}}

基本上，在滚动时，我们逐渐隐藏屏幕上的div，并通过增加div.section-inner的值来揭示下一个.section-inner。

我尝试了不同的视差插件，例如parallax-js，stellar-js和scrollorama，但没有一个工作。尽管如此，当我在开始时分析上述链接的代码时，我意识到有一种方法可以欺骗在移动设备上发生的故障，并且它有点模仿视差效应。同时它将解决移动平台上视差滚动的许多未来问题。

提前致谢！

Answer 1

我有点难以理解你要做的事情......你留给http://www.elespacio.net的链接似乎没有任何视差元素......

一般来说，如果我想做一些Parallax。（使用JQuery）我将获取滚动顶部值，然后通过某种因素移动元素。

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

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

  });

在用户滚动时，对象.moveable将以该速度的50％垂直移动。 translate(x-axis, y-axis)。

正如我所说，我不是100％肯定你想做什么！但这是一种简单的视差方式！但我确信这也适用于移动设备。

模仿视差效应

1 个答案: