Question

我想创建一个具有简单视差滚动效果的网站，其中元素以不同的速度滚动。我尝试使用Skrollr库，但我无法按照自己的意愿去做。我可以使用哪种Javascript库或技术，可以轻松定义元素的相对滚动速度？

示例：

<div data-speed="50%"></div>

我尝试使用本教程：http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/，但我无法很好地遵循它。我需要一些非常简单的东西，因为我是Javascript的新手。

Answer 1

我很高兴你发现了stellar.js

如果您（或阅读此帖的任何其他人）正在寻找更多的视差工具，我公司和我在https://potentpages.com/web-design/parallax/tutorials

发布了一系列视差教程

以下是一些目前使用的创建视差网站的方法：

jQuery和基于jQuery的库（包括stellar.js）
skrollr.js
jarallax
Javascript（没有任何库）
CSS（不含javascript）

我们在上面的链接中链接到这些方法的一些教程。

Answer 2

我刚刚回答了这个问题。我不想使用任何库，因为我只需要一个简单的效果，我觉得解决方案应该很简单，只要我想要一个简单的结果。首先是scss mixin（你可以用vanilla css做到这一点）：

@mixin background-fixed($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100vh;
}

你可以玩大小和位置。但在我的拙见中，我给出了最常用的例子。接下来，我们将mixin用于具有视差效果的样式块：

#block-id {
  @include background-fixed('/images/your_img.jpg');
}

接下来我们需要一些jquery脚本。首先，让我们创建一些函数，让我们的编码器生活更轻松：

function inVisibleRange(block) {
  return ($(window).scrollTop() <= $(block).offset().top + $(block).outerHeight() && $(window).scrollTop() >= $(block).offset().top - $(window).height())
}

function parallaxScroll(block) {
  if (inVisibleRange(block)) {
    $(block).css('background-position-y', $(window).scrollTop() - $(block).offset().top + 'px');
  }
}

最后我们在窗口滚动事件处理程序中使用此函数：

$(window).scroll(function() {
  parallaxScroll('#block-id');
}

在这里，我们拥有所需的视差背景效果。但正如你所看到的，视差效果的速度等于滚动速度。如果我们想要自定义视差效果的速度（这里有一些街头魔术），我们只使用简单的除法运算并将其应用于background-position-y的计算：

($(window).scrollTop() - $(block).offset().top) / 1.3

是的，我们在顶部和底部放松了一些小部分图像。但是我发现这个作为一个好的黑客并没有以一种糟糕的方式影响外观。简单如用斧头切割。但我们需要超级激光切割一棵小树吗？嗯，我认为对我来说，我当然更喜欢用很酷的激光切割它。但是，让我们不要考虑这一点，并假装我的比喻在正确的地方。

Answer 3

我通过使用Stellar.js库来解决这个问题 - 更适合这个。

简单的视差以相对速度滚动

3 个答案: