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

Simple Parallax scrolling at relative speeds

本文关键字：视差 滚动 简单 相对 速度      更新时间：2023-09-26

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

例：

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

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

我很高兴你发现了恒星.js

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

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

  • jQuery和基于jQuery的库(包括stellar.js(
  • 斯克罗尔.js
  • 贾拉拉克斯
  • Javascript(没有任何库(
  • CSS(没有javascript(

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

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

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

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

相关文章：