在屏幕上交叉淡入淡出固定背景圖像

我正在重新創建FitBit網站上的功能部分，用戶向下滾動主頁面，然後進入固定圖像部分，在滾動時交叉淡入淡出並保留導航滾動內容位置點：在屏幕上交叉淡入淡出固定背景圖像

https://www.fitbit.com/uk/flex

我一直在看這一段現在已經找到了多個插件，但他們都不是完全正確的。特別是我想知道是否有人看過我可以使用的任何相關插件組合，或者想了解如何在滾動時使用導航進行交叉淡入淡出？

謝謝！

來源

2016-01-05 Danielle Vautier

簡答：有沒有需要任何特殊的插件，它都可以用合理簡單的jQuery

詳細完成：

我懷疑有什麼嚴重的複雜回事。我最近看到的一個問題是Here，它處理滾動上的觸發更改 - 也就是說，當滾動高度達到某個級別（下一個「頁面」時，您希望不同的背景出現），您可以觸發更改，如更改背景圖像。

爲了使背景交叉淡入淡出，只需使用JQuery即可。 fadeIn()和.fadeOut()在您的兩個圖像上。我假設你知道如何通過某種方法在背景中顯示圖像（例如z-index）。

其他零碎件顯然有自己的要求來設置。 fitbit網站一般來說要複雜得多 - 它在頁面的不同階段表現不同，如果用不同的窗口大小查看，則又會有所不同（所有這些都可以使用CSS @media標記和JQuery來控制）。鑑於您的問題具體詢問了淡入淡出部分，我沒有提到該頁面的任何其他方面。我假設你已經知道如何做他們或不想複製他們:)

來源

2016-01-05 15:28:38

Ÿ，我想我有其他位覆蓋謝謝！主要是交叉淡入淡出和通過多種淡入淡出的雙向導航，我想我可能會過度複雜:)我會看看其他問題謝謝！ –

如果您需要代碼片段。這裏是jsfiddle https://jsfiddle.net/onwwLqmx/9/ –

在屏幕上交叉淡入淡出固定背景圖像

回答

相關問題