1

我想创建一个具有简单视差滚动效果的网站，其中元素以不同的速度滚动。我尝试使用 Skrollr 库，但我无法让它做我想做的事。我可以使用什么 Javascript 库或技术来轻松定义元素的相对滚动速度？

例子：

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

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

4

3 回答 3

1

我很高兴你发现了 stellar.js

如果您（或阅读这篇文章的其他人）正在寻找更多视差工具，我和我的公司在https://potentpages.com/web-design/parallax/tutorials上发布了视差教程列表

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

  • jQuery 和基于 jQuery 的库（包括 stellar.js）
  • skrollr.js
  • 贾拉拉克斯
  • Javascript（没有任何库）
  • CSS（没有 javascript）

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

于 2013-12-14T00:58:40.563 回答
1

我刚刚对自己回答了这个问题。我不想使用任何库，因为我只需要一个简单的效果，而且我觉得解决方案应该很简单，只要我想要一个简单的结果。所以首先是 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

是的，我们在顶部和底部丢失了一些图像的小部分。但我发现这是一个很好的 hack，不会以不好的方式影响外观。就像用斧头切割一样简单。但是我们需要超级激光来切割一棵小树吗？好吧，我认为就我而言，我当然更喜欢用很酷的激光切割它。但是让我们不要考虑到这一点，假装我的比喻是在正确的地方。

于 2017-11-07T19:34:09.817 回答
-1

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

于 2013-10-11T02:54:31.440 回答