相對速度的簡單視差滾動

Question

我想創建一個具有簡單視差滾動效果的網站，其中元素以不同的速度滾動。 我嘗試使用Skrollr庫，但無法使其按我的意願進行。 我可以使用哪種Java庫或技術來輕松定義元素的相對滾動速度？

例：

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

我嘗試使用此教程： http : //coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/ ，但我不能很好地遵循它。 我需要非常簡單的東西，因為我是Java語言的新手。

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（無論如何，您都可以使用香草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庫解決了這個問題，它更適合於此。