今日たまたま見つけた e コマース Web サイト、Harrods.com。彼らが使用しているスクロール効果 (非モバイル サイト) は本当にクールだと思いました。コンテンツと背景は異なる速度でスクロールするようです。スクロールすると、ナビゲーション セレクターも適切なカテゴリの下に移動します。
彼らのソースを調べて、彼らがどのようにそれを行っているかを調べてみましたが、運がありませんでした. 背景画像がhomeImages変数に読み込まれているのを見ましたが、スクリプトで使用されていることはありませんでした。これは CSS だけで実現できるものですか? 検索できるこの効果の名前はありますか?
彼らが使用している効果は視差と呼ばれます。
これは、ページ上の個々の要素にスクロール レートを適用できるようにする JS 駆動の特殊効果です。
ニーズに応じて、人気のある Parallax ライブラリがいくつかあります。
Stellar.jsこのライブラリは jQuery ベースで、水平および垂直スクロールをサポートしています。また、iOS モバイル デバイスを実験的にサポートしています。
Parallax-JSこのライブラリも jQuery に依存していますが、おそらく機能が最小限で、実装が少し簡単です。
jparallaxまた、Parallax-JS に似た jQuery 駆動型ですが、効果を微調整するためのオプションがいくつかあります。
Super Scroll Oramaまた、jQuery プラグイン (まだテーマを認識していますか?) このスクロール効果ライブラリは、特にアニメーションに焦点を当てており、それを念頭に置いてクールなオプションを提供します。
さらに詳しい情報が必要な場合は、このチュートリアル/ライブラリのリストをチェックしてください。
視差スクロールが役立つ場合があります。Google で検索すると、このテーマに関するさまざまなチュートリアルが見つかります。
@RobertHarvey が提供する役立つリンクhttp://prinzhorn.github.io/skrollr/