14の見事な視差スクロールウェブサイト
視差スクロールはしばらく前から存在していましたが、それは今も続いているウェブデザインのトレンドの1つです。視差スクロールとは、Webサイトのレイアウトで、Webページの背景がゆっくりと前景に移動し、スクロールすると3D効果が生じることを意味します。控えめに使用すると、独特で印象的なWebサイトになる、深みのある微妙な要素を提供できます。
それがどのように行われるべきかを示すために、ここに素晴らしい効果をもたらす技術を採用しているいくつかのサイトがあります。場合によっては、視差スクロールがショーの主役です。他の場合は、前景が少し飛び出しているように見える深みを加えるだけです。
ボートを本当に押し出したい場合は、これらの印象的なCSSアニメーションの例は、Webサイトを立たせるもう1つの優れた方法を示しています。群衆から出て。また、「デザインの取り組みに役立つ最高のWebデザインツールをチェックすることもできます。ただし、とりあえず、パララックススクロールを非常に正しい方法で使用しているいくつかのサイトを見てみましょう。
Webデザインの美術史
アートとウェブデザインの歴史は、必ずしもまとめる主題ではありませんが、美しくあります。このウェブデザイン美術史サイトに統合され、アートを時系列で見てウェブデザインの未来をたどります。
ここではさまざまなパララックススクロールテクニックが使用されており、ユーザーは常に驚きと喜びを感じています。ページを下にスクロールします。これは、少し時間をかけて調べる価値があります。
Qodeインタラクティブカタログ
Qode Interactive Catalogには、表示するための定型化された下部テキストナビゲーションシステムがあります各アイテムの画像。カタログをクリックすると、WordPressのさまざまなテーマを紹介するために使用される水平視差スクロールが表示されます。これは、このリストで最も画期的な視差スクロールの使用法ではありませんが、その目的を十分に果たします。アニメーションの飛び散りも効果的に使用されます。
運河
マーカスブラウンによって設計され、アリスティドベノイストによって開発された運河は、アムステルダムの17世紀の運河の歴史を400年にわたって旅します。このサイトは編集スタイルの体験を提供するように設計されています。 、緑豊かなコーヒーテーブルのボリュームをめくるように、視差をうまく利用して、ストーリーの新しいセクションに注意を引き、サイトに微妙な深みのある効果を与えます。
TheGooniesのストーリー
特定の年齢の誰もが愛を保証されています “80s teアドベンチャーフリック、グーニーズ、そしてそれがあなたなら、このサイトはあなたの懐かしさの腺をドキドキさせること間違いなしです。ジョセフベリーがWebFlowを使用して作成したTheStory of the Gooniesは、視差スクロールを使用してストーリーに引き込み、登場人物を紹介し、映画のモードを明らかにするレトロクラシックへのオオカミです。
Dogstudio
Dogstudioのサイトの直接の焦点は、ページの中央にある美しいアニメーションの3D犬、またはオオカミですか？スクロールすると拡大縮小および回転します。視差ページを下る途中です。Dogstudioの最近のプロジェクトのタイトルにカーソルを合わせると、照明の色が変わります。おそらく私たちのお気に入りのビットは、ページコピーの一部の前で回転し、テキストの一部を覆い隠すことです。
ToyFight
ToyFightは受賞歴のあるクリエイティブエージェンシーであり、そのウェブサイトはとても楽しいです。創設者のジョニーランダーとリーウィップデイは、サイト全体のさまざまなシーンに表示される3Dフィギュアに変身しました（この生意気なサグマイスター&ウォルシュリファレンスを含む）。視差を巧みに使用すると、3D効果が増幅され、大胆で明るく無地の背景と組み合わせて、圧倒されたりイライラしたりすることはありません。
ディーゼル：悪いガイド
84。パリは、ディーゼルのBADフレグランスの発売に伴い、この印象的な視差Webサイト（および関連するソーシャルメディアキャンペーン）を作成しました。1ページのサイトには、「BADガイド」を構成する一連のルールが表示されます。
ユーザーは、画像のピンボードのように配置された視差ページをマウスでドラッグして探索できます。Tinderからすべてのアドバイスがあります（「右、右、右、右にスワイプ-並べ替えます」後で」）Instagram（「木曜日の元に連絡することを忘れないでください#TBT」）、モノクロのイラストを添えて。
Firewatch
私たちが見た視差スクロールの最も美しい例は、ゲームFirewatchのこのWebサイトです。これは、6つの移動レイヤーを使用して奥行き感を生み出します。スクロールハイジャック（視差効果を伴うことが多いもの）がなく、ページの上部でのみ使用されるため、すばらしいです。サイトの残りの部分は、船酔いすることなく情報を読むことができるようになっています。それがどのように行われるかを知りたい場合は、CodePenの素晴らしいデモをご覧ください。
GitHub 404
GitHubの404ページは、スクロールではなくマウスの小刻みに効果が発生するため、厳密には視差スクロールではありません。レイヤーを使用して奥行きを加えるのは本当に楽しいページです。 「適切な」視差とは異なり、背景は前景よりも速く移動し、方向感覚を失った異世界的な雰囲気を作り出します。
ジェス&ラス
デザインパワーカップルのラスマッシュマイヤーとジェシカヒッシェの結婚式のウェブサイトが見事な美しさであることは当然のことです。このサイトは、イラストに深みを加えるために視差スクロールを使用して、彼らのロマンチックな物語を表しています。彼らは2012年に結婚しましたが、ウェブサイトは一見の価値があります。
お金を稼ぐ
金融とお金はほとんど主題の中で最も興味深いものではありません。しかし、ニューヨークを拠点とするデジタルエージェンシーFirstbornは、このダイナミックな視差スクロールWebサイトMake Your Money Matter for the Public Service CreditUnionに夢中です。
信用組合に参加するメリットを一般の人々に教えることを目的として、この素晴らしいサイトには、銀行を使用するのではなく、信用組合の仕組みから、信用組合の場所と申し込み方法まで、すべての銀行が顧客の預金からどれだけの利益を得ているかを示す計算機が含まれています。
マッドウェル
ニューヨークを拠点とする設計開発代理店のMadwellは、さまざまな視差スクロール効果でポートフォリオを披露し、巨大な3Dスタイルを作成します。深さの量。
ニューヨークタイムズ：トマト缶ブルース
注目度が低く、一口サイズのメディアが存在する今日の時代に、どのようにして人々を長編ジャーナリズムに引き付けますか？ Tomato Can Bluesは、ニューヨークタイムズからのその問題への優れた対応であり、いくつかの巧妙なWebデザイン手法と、AtillaFutakiによって作成されたストーリーテリングやコミック風のイラストを組み合わせています。
視差スクロールの最良の例の1つ「これまで見てきたように、この記事では、メアリーピロンが書いたケージファイターのストーリーを紹介しています。コンテンツをスクロールすると、イラストが巧妙なアニメーションと変更で生き生きとし、コンテンツに完全に没頭することができます。
二木さんのイラストは、警察の記録、目撃証言、写真、記者のメモに基づいており、細部へのこだわりが輝いています。全体として、素晴らしい読書体験です。これがオンラインジャーナリズムの未来です。 ？
雪の秋
最初のサイトの1つNew York Timesの「SnowFall」の記事では、視差スクロールやWebビデオなど、さまざまな要素を組み合わせて、オンラインで長編の編集コンテンツでできることの限界を実際に押し広げています。
トンネルクリークでの雪崩の恐ろしさに関する記事は、2012年12月にオンラインで公開されましたが、視差スクロールでできることの例として依然として強力です。 新聞は、世界中のデザインコミュニティの注目を集めた革新的な方法で、ピューリッツァー賞を受賞した記事を発表しました。 Webデザインチュートリアル