模仿视差效果 [英] 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>

其余内容都在这个小提琴上: https://jsfiddle.net/ksna2hae/1/

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

与此同时，我遇到了一个网站，该网站巧妙地实施了该网站，并且在移动设备上也非常有效.该站点的链接是: http://www.elespacio.net 但是，自从我没有管教以来，一直有很多挣扎精通jQuery或Javascript，无法弄清楚如何构建所需的界面.下面是我带脚本走的距离.

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

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

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

基本上，在滚动时，我们逐渐隐藏屏幕上的div，并通过增加Y-value of transform3D的值来显示下一个.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.

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

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.

提前谢谢！

推荐答案

我有点难以理解您要执行的操作...您为

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

通常，如果我想做一些视差操作. (使用JQuery)我将获取滚动的上限值，然后将某个元素移动此值.

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 +'%)'
    });

  });

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

Here as the user scrolls, object .moveable will move vertically at 50% of that speed. translate(x-axis, y-axis).

正如我所说，我不确定您要做什么100％！但这是视差的简单方法！但我敢肯定，这也将在移动设备上起作用.

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.

这篇关于模仿视差效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！