jQueryとHTML5を使用した18の視差スクロールチュートリアル– 2022
公開: 2022-03-17視差は1940年代後半から使用されており、最近ではゲームなどの業界で使用され、すべての人にユニークなゲーム体験を提供しています。 真剣に、視差はデザイナーにとって新しいもののように聞こえるかもしれません。 それでも、この概念は長い間私たちと一緒になってきたので、デザイナーは今や追いついてきており、このスクロール効果の周りにトレンドを確立しています。 視差の説明を最も適切に絞り込むために、これはWebデザインの独自の手法であり、個々のWebページコンポーネントをさまざまな時間間隔でユーザーと一緒にスクロールできるため、コンテナ/グリッド/コンテキストの背後で背景が移動する効果を作成できます。
Colorlibでは、各記事で独自のアプローチの一貫性を維持しながら、可能な限り視差に最大限の注意を払うように最善を尽くしています。
ここで、jQuery、JavaScript、HTML5、CSS3などのテクノロジーの使用を含む最高の視差スクロールチュートリアルを紹介します。 視差の基礎とその仕組みを説明するために、Webデザインの初心者にわかりやすいチュートリアルといくつかの中間部分に焦点を当てました。
チュートリアルなどに入る前に、よく見るべき2つの側面があります。それは、検索エンジン最適化に対する視差スクロールの影響です。 確かに動的なデザイン機能を使用すると、検索エンジンがWebサイトを処理する方法に影響があり、オーガニックトラフィックに悪影響を与える可能性のある機能に妥協したくありません。 MozのCarlaDawsonが、このトピックを詳細に取り上げました。 彼女の投稿からの主なポイントは、視差設計をよりSEOに適したものにするために適用できる3つのユニークなテクニックをリストすることです。 それはすべて、デザインに機能的な視差効果を加えようとする前から始まり、最初にSEO手法を実装し、次にコンテンツの作成に集中します。これにより、検索エンジンがWebサイトの動作を理解する余地を残し、ロボットも許可します。コンテンツを処理します。
2番目の側面は、視差設計のユーザーエクスペリエンス、それがすべての設計に適しているかどうか、およびそれが引き起こす可能性のある問題の種類です。 これは、視差設計がユーザーエクスペリエンスに与える影響に関する詳細な調査研究であるため、このペーパーを完全に処理して理解するには時間がかかります。 この調査では、視差と標準スクロールの2つのグループの人々が調査対象のサンプルWebサイトを提供しました。 最終結果は驚くべきことではありませんでした。ユーザーは視差スクロールをより楽しんでいますが、これには混乱が伴い、注意を払う限り一般的なユーザビリティの懸念が生じます。 あなたは常にあなたのウェブサイトのデザインへの派手な追加よりもユーザーを優先するべきです、これがあなたを分析するためにプロの専門家デザイナーを雇うことを意味するなら、あなたはその考えを進めるべきです、特にあなたが大規模な事業運営をしているなら。 私たち自身の経験では、小規模なWebサイトは通常、視差スクロールを使用できますが、ユーザーエクスペリエンスや一般的なユーザビリティにそれほど大きな影響はありません。
これらの2つのトピックについて説明したので、視差スクロールを実装して視差スクロール効果を作成する方法に関するいくつかのテクニックと方法を学び始めることができます。 最初のチュートリアルは、長年フロントエンドの作業を行っており、この分野で定評のある専門家であるPetrTichyからのものです。 視差の初期設定フェーズ、視差も統合されているアニメーションエフェクトを追加する方法、および各アニメーションに適切なタイミングを割り当てる方法を学習します。 チュートリアルはいくつかの点で少し複雑なので、JavaScriptの知識がある中級の開発者を対象としています。 同じチュートリアルで、視差に関するPetrの以前のチュートリアルの1つへのリンクがあります。これは、はるかに初心者向けです。
Ian Yatesは、今年の初めにこのチュートリアルを作成しました。これは、この視差チュートリアルのコレクションで取り上げる、このトピックに関する最も新しいチュートリアルの1つである可能性があります。 イアンは、素晴らしい視差効果の組み合わせを使用する別のWebサイトからインスピレーションを得るというアプローチを取り、それを自分で再現しようとします。 唯一のことは、彼は主に視差機能を備えた注目のデザインについて話し、JSとCSSを使用して独自の背景効果を作成する方法に関する1つの小さな断片に言及しています。
クライアントはデザイン標準についてそれほど多くの知識を持っていません。クライアントはトレンドや、Webサイトを信じられないほどクールに見せたり、競争と呼ぶことができるものに完全に固有のものにするなどのことだけを気にする傾向があります。 このようなクライアントを使用している場合は、デザインに独自のスクロール効果を作成する方法についての簡潔なチュートリアルが不可欠です。このように、仕事を遂行するためのチュートリアルがここにあると思います。 CSS3でスタイル設定され、jQueryを使用して視差効果に組み込まれるHTML5コードの構造化について学習します。
Script Tutorialsのチュートリアルは、すでに17,000人を超えるデザイナーと開発者に届いています。この数は、チュートリアルが実際に機能し、スムーズな視差モーションエクスペリエンスを提供する必要があることを意味するため、私たちの興味をそそりました。 いくつかのローカルテストの後、それは確かに事実であるように見えます。 HTMLとCSSの通常の視差アプローチであり、実際に行う必要があるのは、両方のコードをコピーしてデザインに貼り付けることだけです。 ただし、カスタムデザインに実装する必要がある状況では、これが少し難しいと想像できるので、これに役立つ全体的なチュートリアルを探し続ける必要があるかもしれません。
アンディショラはその点で私たちを助けることができるかもしれません。 彼の主な目標は、Webサイトのパフォーマンスを損なうことのない視差効果を作成することです。これは、スクロールイベントのDOMインタラクションの量を最小限に抑え、ハードウェアアクセラレーションを使用してモバイルデバイスのパフォーマンスを向上させることで実現されます。 実際、これは、モバイルデバイスが視差と相互作用する方法と、品質やデザインの魅力を失わずに最大のパフォーマンスを実現するために何ができるかを実際に学ぶためのもう1つのガイドです。 Webサイトのデザインでパフォーマンスに最適な視差効果を作成するために使用されるjQueryの2つの異なるスニペットを探索します。
視差は非常に新しい技術であるため（まあ、数年前ですが、それでも）、古いWebブラウザーに視差を実装したい開発者にとっては、多くの課題があります。そのプロセスはそれほど簡単ではなく、古いブラウザが新しいWeb機能でどのように機能するかについて少し理解しました。 チュートリアルでは、視差Webサイト間の良い例と悪い例、および分析の過程で何を学ぶことができるかを示します。 さらに、垂直方向や水平方向など、視差のさまざまな角度についても説明します。最新のWebデザインの可能性は、実際に新しいレベルに進化しています。 視差に関連する最も便利なJavaScriptライブラリについて学習します。各ライブラリには、オンラインで利用できるドキュメントと個別のチュートリアルがあります。これらのライブラリを自分たちで共有したかったのですが、量が多すぎなかったので、このチュートリアルではそれらすべて。 これは、視差のすべて、特に動的なスクロール効果を実現するための相互作用とさまざまな方法にとって、本当に素晴らしいリソースです。
簡単な視差効果を作成する方法
Sara Vieiraは優れた開発者ですが、視差などのトピックに関しては、複雑なコードや用語をいじりません。 彼女は、目的の結果を達成するための簡単な手法を作成することを好み、自分のペースで共有したコードを試すことができます。 JS、HTML、CSSの3つを試してみます。 実験する最良の方法は、ローカルWebサーバー、またはライブサーバーの別のフォルダーで、この方法でどのような結果を達成できるかを確認することです。
jQueryによる視差効果
このチュートリアルの良いところは、表示しているページにすでに実装されていることです。したがって、実際には、テキストで説明する必要はあまりなく、ライブコードの形式で例を示します。 HTML / CSSスニペットを取得し、それをjQueryスニペットと組み合わせて、表示しているページと同じ視差効果を実現できます。 各コードスニペットの右側に、簡単な説明（コメント）スニペットがあります。
最終的には、可能な限りCSSに依存する必要があります。 CSSは、パフォーマンスが大幅に向上し、jQueryなどの動的言語を扱う手間が軽減されることを意味します。 ここにあるのは、コンテンツコンテナを視差し、優れたパフォーマンスベンチマークを使用して、コンテンツエクスペリエンスをはるかに豊かにする単純なCSSスニペットです。
Stellar.jsは、ウェブサイトに視差効果をすばやく追加するのに役立つ、かなり人気のあるJavaScriptライブラリです。 ライブラリは昨年はあまり開発されていませんが、コミュニティ全体の開発者や設計者によって引き続き積極的に利用されています。 特定の要素に視差効果が付与されるように、Stellarをデザインに組み込む方法を検討します。 ライブラリは、必要に応じてメインの開発ワークフローから簡単に切り離すことができるため、このような動的機能をプラグインする際には間違いなく安全な選択です。
視差を使用してWordPressサイトをポップにする
視差は非常に多くの異なるコンテキストで使用されます。ユーザーがこのエキサイティングな機能に戻ってきた理由を疑問に思う必要があります。その理由は、スムーズなスクロールアニメーションを使用して、より良いストーリーを伝えることができるためです。その素晴らしい流れるような動きで、物語のある部分から別の部分への読者。 また、WordPressブログについてはどうでしょうか。この機能をサポートする独自のテーマを使用せずに、WordPressに視差を追加するにはどうすればよいでしょうか。 それがあなたの本当に燃える質問であるなら、あなたは次のチュートリアルですべての答えを見つけるでしょう。 これはWordPressブログの視差の最も包括的なチュートリアルであると考えており、これらの優れた効果を自分のブログにすぐに追加できることを願っています。 視差が何をするかをすでに知っている場合は、紹介をスキップしてください。ガイドのかなりの部分が視差を詳細に説明することに専念しているので、視差についてすでに知っていると感じるものは避けてください。
Wixとは何ですか？ それはウェブ上で有数の無料のウェブサイト構築プラットフォームであり、これらの人々は永遠にビジネスを続けています！ これはチュートリアルではなく、クライアントと連携する開発者や、Wixなどのプラットフォームを使用してWebサイトをホストおよび構築することを好む種類のクライアント向けのヘッドアップです。 Wixユーザーも視差効果を楽しむことができ、魅力的なデモをたくさん用意しています。もちろん、Wixを使用すると、ユニークなデザインを作成するための時間を大幅に節約できます。驚くべきことに、ウェブサイトの需要は減少していませんが、ウェブサイトをホストするために使用するプラットフォームについて学ぶために少し余分な時間を費やすだけで、クライアント自身がこれらの優れたデザインを実現できます。 新しいクライアントにWixやその他のウェブサイト構築プラットフォームでウェブサイトをホストする機会を提供することを恐れないでください。 これは、Webサイトのメンテナンスに関する限り、場合によっては正しい方向への一歩です。 パフォーマンスも。
CSSを使用したランドスケープ視差
視差の設計には多くの選択肢があります。デザイナーおよびフロントエンド開発者として何をしているのかを知っている限り、CSSとjQueryを少しだけ使用して、視差効果に何でも作成できます。マジック！ Dave Chenellが、視差でランドスケープデザイン効果を作成するために必要な手順を説明します。
CSSとJavascriptを使用して多層視差イラストを作成する方法
層状視差効果は、特定の視覚的シナリオを展開するために2つの画像を重ねて使用することで構成されます。 これにより、ユーザーがデザイン/ウェブサイトで体験する視覚体験がさらに向上します。また、ほとんどの場合、何かを使用したいので、手描きアートの可能性とウェブサイトデザインへの組み込みを探求する絶好の機会でもあります。デモプレビューでわかるように、これは互いに重なり合って完全に意味をなすことができます。
純粋なCSS視差ウェブサイト
ネイティブCSSのみを使用して、視差を使用して確実なスクロール効果を作成するための優れたイントロチュートリアル。
Firewatch視差効果を再現する
視差は多くの名前で呼ばれ、視差の傾向を絶対に嫌うデザイナー/開発者の忠実なグループが間違いなくありますが、何ができるか、それは非常に多くの人のために働いているようです、なぜチュートリアルやコンテンツの作成をやめるのですか？この効果をリアルタイムで可能にする方法。 ここにあるチュートリアルでは、Firewatch Webサイトから特定の効果を再現し、コンテンツの追加の展開を可能にする落下要素と組み合わせた一種の風景効果を作成します。 最初はトリッキーに聞こえますが、Hamish（チュートリアルの作成者）はすべてを段階的に説明するように細心の注意を払っています。
あなたの要件が何であれ、私たちがリストしたチュートリアルは、この新しいウェブデザインのトレンドに来るすべての側面を完全にカバーすると思います。 単純な効果から、パフォーマンスを最適化した効果、数分以上記憶されるコンテンツ体験を提供するための独自のアプローチまで。 Webデザインで行われていることの多くは、インスピレーションと、デザインの習熟度によって達成された独自のひねりを加えてユーザーや読者にインスピレーションを与える方法に帰着します。