El 視差効果 これは、今日最もよく耳にするWebコンポーネントです。 少なくとも5年はトレンドになっていると言っても過言ではありません。 HTML3、CSSXNUMX、jQuery、およびXNUMXページのサイト(XNUMXページで構成)のブームの後、この光学効果は、私たちを驚かせる最先端のWebサイトに到達しました。
ネットサーフィンをすると、ほとんどのページで、その使用は実験的なものであることがわかります。 特にオンラインポートフォリオのカテゴリーでは、デザイナーは想像力を自由に発揮します。 あなたのスキルを示す 隣のパートナーが取ったよりも一歩進んでみてください。 ここでは、視差を使用して6つのWebサイトをまとめ、表示およびコメントできるようにします。
視差とは何ですか?
最初から始めましょう、視差についてこれは何ですか? これは、ページを垂直方向に移動する(つまり、スクロールする)と、背景が他の要素よりもはるかに遅い速度で移動することを引き起こすだけです。 これは、WebサイトをXNUMXつ以上のPhotoshopレイヤーに分割したかのようです。 そして、視差効果が達成することは、私たちに 奥行き感、多くの人が3D効果とも呼びます。
これらすべての「ニュース」があるので、Webページの本当の目的を忘れるほどトレンドに夢中になってはいけません。 伝えます、何か教えてください。 そして私は見た 多数のサイト画面上を魔法のように動く画像や要素の創造性が圧倒的で、そこに書かれていることを読むのを止めないようにしています。
6視差効果のあるウェブサイトの例
- サイクレモン:機能し、利益をもたらす視差効果。 非常に簡潔なテキストはほとんどなく、 実例 それは彼と共に変化しています。 この場合、効果は私を悩ませません:それは私が別の方法でナレーションされた、少なくとも私を引き付けなかったであろうコンテンツに興味を持つようになるのを助けます。
- L'unità:品質に惹かれます 画像 それはウェブを冠します。 しかし、画像の豊富さと各セクションに与えられた低い高さは私を誤解させます。 視差効果は気になりませんが、セクションが高いほど得られると思います。 ちなみに、ウェブを閉じて再度開くと、メイン画像が変わります。
- タイタニック:単にクールで素晴らしい。 初めてログインしたときは、最後までスクロールせずにはいられませんでした。 それで、私はコンテンツを読むためにウェブの最初に戻り、視差効果を再び楽しんでいます。 あなたの考えを教えてください。
- Sony:インターネットで視差の例を検索したことがある場合は、このページを見たことがあるでしょう。 結果は驚くべきものなので、それは論理的です。 私がこれまでに見た効果の最高のアプリケーションで、ためらうことはありません。
- ソレイユノワール:多くのサイクレモンを思い出させます。 小さなテキストを組み合わせたイラストでもあります。 色で分類されたサイドバーが本当に気に入っています。サイドバーを使用すると、任意のセクションに戻るか進むかを選択できます。
- 魚:申し訳ありませんが、確信が持てません。 めまいがするウェブサイトです。要素が多すぎて、すべてが動いているような気がします...あまり好きではありません。 どう思いますか?
- ギルグル:背景のgifが気に入りました。 ウェブ上で何を言っているのかわかりませんが、気に入っています。
パララックスの奇妙な効果は、それを実践し、私のウェブデザインのいくつかに含めるために、それがどのように達成されるかを学びたいと思います。
これらのデザインを入手するにはどうすればよいですか?