模仿视差效果答案

【问题标题】：Imitate Parallax Effect模仿视差效果
【发布时间】：2023-03-28 14:10:01
【问题描述】：

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

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

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

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

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

提前致谢！

【问题讨论】：

标签： javascript jquery parallax

【解决方案1】：

我有点难以理解您要做什么...您为http://www.elespacio.net 留下的链接似乎根本没有任何视差元素...

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

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

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

  });

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

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

【讨论】：