視差スクロール効果を作成するための 10 個の CSS と JavaScript スニペット
公開: 2022-03-22パララックスのデザインと、それが Web でどのように機能するかについては、多くの混乱があります。 一般的に言えば、視差デザインはモーションを使用して、ページに奥行きの錯覚を生み出します。
これは、背景の変化や、ユーザーのスクロールに沿って移動する半固定位置の項目に関連している可能性があります。 Web サイトから多くの例を取り上げましたが、関連する手法については詳しく説明しませんでした。
このコレクションでは、パララックス レイアウトを作成するためのお気に入りの CSS と JavaScript のスニペットを選びました。 すべての例で無料のソース コードが提供されているため、スニペットをいじったり、独自のプロジェクトで使用したりすることもできます。
1. CJギャモンのザ・グレート・フォール
この視差の例は、私がこれまでに見つけた中で最もユニークなインターフェイスの 1 つです。 カスタム スクリプトを使用して、ページを無限に流れるように見えるウォーターフォール スプライトを作成します。 これは、JavaScript によって制御されるキャンバス要素上に構築されているため、かなり技術的なセットアップです。
ほとんどの場合、これは最新の Web 開発で可能なことの証です。 キャンバス要素を学ぶと、デザインを細かく制御できるようになります。
CJ Gammon の The Pen The Great Fall を参照してください。
2. Sebastian Schepis によるCSS スクロール視差
これは、背景を固定し、上部に大きなページを表示する、より実用的な視差効果です。 スクロールすると、各ページ セクションが背景の上に表示されます。 これは奥行きの錯覚を生み出し、優れた視差デザインの重要な要素の 1 つです。
開発者の Sebastian Schepis は、このページに CSS のみを使用しました。これは非常に単純な概念です。 背景デザインを大幅に強化できることは言うまでもなく、誰でも簡単に複製できると思います。
Sebastian Schepis による Pen CSS Scrolling Parallax Effect を参照してください。
3. Renan Breno によるシンプルな画像タグの視差
大きなフルスクリーンの背景画像と組み合わされた視差デザインがよく見られます。 これらはすべて、企業のサイトやスタートアップでは非常に一般的であり、通常、背景に特定の視差「スクロール速度」を備えています.
ここでの違いは、ページを下にスクロールする速度や画像の配置の大きさに大きな違いはありません。 代わりに、スクロール中に画像がページの背景をどれだけ速く移動するかがわかります。 これは微妙な視差効果ですが、このレイアウトはさまざまなアニメーション速度の動作を確認するための優れたテンプレートです。
Renan Breno による Pen Simple Image Tag Parallax を参照してください。
4. 視差と固定画像の背景
固定画像の背景は、ページを分割し、コンテンツ セクションを均等に分割するのに適しています。 スクロールすると、個々のページ セクションが背景画像よりも高く感じることがあります。 これはすべて、スクロール中の視差効果に命を吹き込むための設計です。
コンテンツ領域が少し薄いように見えるので、この正確なレイアウトは使用しません。 ただし、このスタイルが気に入った場合は、各ページ セクションを Web サイトに関連する別の画像で区切ることをお勧めします。
chaobu による Pen #Maincode Hackdays を参照してください。
5. Paulo Cunha によるCSS パララックス
この視差の例は、視差効果がどのように機能するかを示すユニークな例です。 すべてのページ コンテンツは、スクロールするとコンテンツの下に消える大きなヒーロー イメージの下にあります。 これはまた、固定された画像位置を使用して、画像が固定されたままではなく、ページが画像上を移動しているかのように見せます。
これと同じ効果を長いスクロール レイアウトで使用でき、同様のデザイン スタイルになります。 これは、注目を集める大きな画像を含む 1 つのブログ投稿や、注目を集めるために大きなヒーローを使用するランディング ページに最適です。
Paulo Cunha による Pen CSS Parallax を参照してください。
6.ケイティ・ロジャースによる視差デザイン
これは、サンプルのウェディング ページの興味深いパララックス デザインです。 画像が視差固定スクロールで多くの異なるコンテンツ領域を分離する分割ページデザインを備えています. すべてが CSS で実行されますが、これはいい感じです。ページを下に移動している間、すべての背景画像は固定されたままです。
この効果が機能するのは、コンテンツ領域の背景に大きなボックスの影が落ちるからです。 当然のことながら、これはページに理論的な光源と階層を与えることで奥行きの錯覚を生み出します。これは単一ページ レイアウトの非常に優れたアイデアです。
ケイティ・ロジャースによるペンの視差デザインをご覧ください
7. Rich Howell による背景画像の視差のスクロール
先ほど、背景位置の変化率に基づいてスクロール速度がどのように変化するかについて説明しました。 この例は、これが実際にどのように機能するかを確認するのに最適な比較です。
この例の効果を確認するには、スクロールバーを使用する必要があることに注意してください。 マウス ホイールで試してみましたが、違いはわかりませんでしたが、スクロールバーを動かすと、列全体で速度が変化することに気付くでしょう。
これらの速度はいずれも、視差設計の間違った描写や不正確な描写ではありません。 これらは、ページ上で動きを作成するためのさまざまな方法にすぎません。この小さな例は、多くのオプションを視覚化する優れた方法です。
Rich Howell による Pen Scrolling Background-Image Paralax を参照してください。
8. Saransh Sinhaによる星空の視差の背景
この効果はスクロールとは関係ありませんが、視差の設計に直接関係しています。 純粋な CSS を使用して、ページの背景に視差星のアニメーションを作成します。 ページ上にテキストやコンテンツ領域を追加することもできますが、星は一見するとすぐに深みを生み出します.
アニメーションは CSS で実行されますが、このスニペットは Sass と Compass を使用しているため、編集を行う前に理解しておくと役立ちます。
Saransh Sinha による CSS の Pen Parallax Star 背景を参照してください。
9. キャンバス パララックス スカイラインby Jack Rugile
視差デザインは、スクロール機能とともにマウスの動きをターゲットにする場合もあります。 このキャンバス デザインは、ページ上でのマウスの動きに反応する無限のスカイライン効果を生み出します。 マウスの位置を変えると、視野角が変わります。 しかし、アニメーションは同じままで、このスカイラインが明確な視覚的階層で動いているのを見ることができます。
当然ながら、これは非常に複雑なアイデアであるため、アニメーションには JavaScript が必要です。 しかし、多くの Web サイトで見られるものでもないため、自分のサイトにコピーするものでもありません。 でも、パララックスのコンセプトとしては、これは本当に面白いです。
Jack Rugile の Pen Canvas Parallax Skyline を見る
10. Bajjy Xiloによる壊れたガラスフィルター
以前、ウェブサイトでこの効果が見られ、非常に独特なデザインが作成されました。 割れたガラス フィルターは、背景画像が多くの異なる部分に分割されているような錯覚を与えます。 画像がガラス板の上にあったように見え、粉々になり、画像が砕け、画像がゆがんでいます。
この効果は純粋な CSS で複製できます。これは、実行するのがクールな優れた効果の 1 つですが、派手なデザインを超えた実用的な実際の使用法がない場合があります。 それでも、これはスクロール中の視差の深さと動きの印象的な例です。
Bajjy Xilo による Pen BrokenGlass CSS フィルターを参照してください。