背景と紹介

コンピューターまたは携帯電話で現代のWebサイトを閲覧している場合、Webサイトを上下にスクロールすると、画面全体がスクロールの方向に動いているように見えることがあります。これがバックグラウンドでの効果である場合、スクロールするとフォアグラウンドの情報も変化します。この効果は、Parallax Scrollingと簡単に説明できます。

スクロール

スクロールしてその意味を理解しましょう。 Webページを表示しているとき、任意の方向（上、下、左、右）でWebページを閲覧するアクションは、スクロールと呼ばれます。

通常、デスクトップコンピューターのユーザーは、マウスのスクロールホイールを使用してこのアクションを実行します。

スクロールホイール

歴史

「スクロール」という言葉を見てみましょう。昔は、遠くにいる他の人にメッセージを送るために、手書きの巻物が使われていました。これらのスクロールは次のように見えました-

手書きの巻物

巻物を持っている人の行動を想像してください。コンテンツを完全に読むには、その人は「スクロール」してさらにロールする必要があります。これらの巻物の使用は、記録テキストまたは決定を維持するためでもありました。時間が経つにつれて、巻物の使用は、パピルス、羊皮紙、紙などのさまざまな筆記用具から準備されるにつれて増加しました。

コンピューターが進化するにつれて、非常に大きな文書、表、画像の処理と保存が可能になりました。データが多すぎて、画面サイズがユーザーにデータを表示するのに十分でない場合がありました。表示されるデータがウィンドウまたは表示領域のサイズよりも大きい場合、データは非表示のままになります。これには、画面領域を拡大するアプローチが必要でした。

画面の拡大を達成するためのいくつかのオプションを以下に示します-

画面サイズを大きくするには
データサイズを減らすには
スクロールを使用するには

このスクロールメカニズムは、グラフィックデザインと写真編集を行う人々にとってより重要です。

視差スクロールの起源

視差スクロールの歴史を見てみましょう。まず、視差という言葉の意味を理解します。視差という言葉は、ギリシャ語の*παράλλαξις*（視差）に由来します。

オブジェクトを斜めから見ている場合、オブジェクトは特定の方法で表示されます。しかし、同じオブジェクトを異なる位置から移動している場合、オブジェクトの明らかな動きがあります。この現象は視差と呼ばれます。

Webデザインでの視差スクロール-概念

これで視差の起源と背景が理解できたので、Webデザインにおける視差スクロールの歴史と概念を理解しましょう。

定義

ウィキペディアによると、*視差スクロール*は、背景画像が前景画像よりもゆっくりとカメラを通過するコンピューターグラフィックスの手法であり、2Dシーンで奥行きの錯覚を作成し、仮想体験に没入感を加えます。

アニメーションの初期には視差スクロールが採用されていました。多くのアニメーションスタジオ（ディズニーなど）は、マルチプレーンカメラを使用して視差効果を実現しました。

JavaScriptのような最先端のフレームワークとともにコンピューターグラフィックステクノロジーが進化したため、Webデザイナーと開発者は豊かなエクスペリエンスを備えたサイトを構築できます。視差スクロールはいくつかのレイヤーで始まりましたが、コンピューターのスクロールバーで次のレベルに進みました。テクニックは同じままでしたが、スクロールへの応用により、ユニークな体験が生まれました。

例

視差スクロールは、最新のWebサイトで広く使用されています。視差スクロールはモバイルとデスクトップサイトの両方に一度に実装できるため、このようなサイトの人気は近年急上昇しています。

視差スクロールを採用しているウェブサイトのいくつかの例を以下に示します-

ベア・グリルズ

Bear Grylls

アニメーションが進むにつれて、Webサイトのコンテンツがどのようにインタラクティブになるかを確認できます。前方にスクロールすると、より多くの情報が明らかになります。

お金を稼ぐ

Make Your Money Matter

信用組合の利点を読者に紹介するために、このサイトではストーリーを紹介します。前方にスクロールすると、情報が独自の方法で表示されます。

InfoQuestインフォグラフィック

InfoQuest Infographic

従業員が職場で重要な情報を見つけるまでの道のりは、スクロールエクスペリエンスを使用して描かれています。

GitHub 404

これは通常の視差エクスペリエンスとは少し異なります。画面上部のオブジェクトは、マウスポインターを上に置くと移動します。

視差スクロールのアプリケーション

今では、視差スクロールがさまざまなデジタルメディアで役立つことは、定義と背景から明らかになるはずです。アプリケーションのいくつかは、以下の視差スクロールです-

ゲームデザイン

視差スクロールは、ゲームデザインで広く使用されています。キャラクターは背景を基準にして移動する必要があり、プレイヤーはマウスとキーボードを使用してコントロールするため、エクスペリエンス全体を変更する必要があります。ゲームデザインは非常に原始的ですが、視差スクロールを使用するトレンディな方法です。

ウェブサイト

ユーザーをWebサイトに引き付けるには、動的で異なるエクスペリエンスが重要です。前述のWebサイトの例からお気づきかもしれませんが、視差スクロールは、インタラクティブな表現であるため、コンテンツに追加されます。

Webデザインと視差スクロール

この章では、Webデザインの概念と、Webデザインで視差スクロールを使用する利点について説明します。

Webデザインの背景

20世紀初頭以来、紙媒体はデジタルメディアにより激烈な競争に巻き込まれています。デジタルメディアには、インターネット上で見られるものが含まれているため、関連する雑誌も含まれています。

毎週/毎月のサブスクリプションの一部として受け取るニュースレターもデジタルメディアに含まれています。主に、デジタルメディアはモバイルデバイスとデスクトップデバイスに大きく依存しています。モバイル（ハンドヘルド）デバイスとデスクトップデバイスの両方でコンテンツを表示できる場合、違いが生じます。いずれかのデバイスでコンテンツが表示される方法、コンテンツをデザインする特定のスタイルが有効です。

このスタイルの設計は、 Web Designing と呼ばれます。設計またはコーディングの観点から、Webページの設計者がWebページの構築に着手すると、モバイルデバイスも考慮されます。

ウィキペディアによると、* Webデザイン*には、Webサイトの作成と保守に関するさまざまなスキルと専門分野が含まれます。そのようなスキルの1つは、ユーザーにインパクトのあるエクスペリエンスを設計することです。 Webデザインは、このエクスペリエンスに対応し、ページコンテンツを整理するための体系的な方法を提供し、さまざまなスタイルを提供します。

Webデザインには、インターフェイスデザイン、グラフィックデザイン、およびコードを記述するための特定の標準の使用が含まれます。この作業は、1人またはチームで実行できます。

この作業を簡単にするための市場には多くのツールがありますが、ウェブページの外観を作成するのは創造的なスキル次第です。

現代のWebデザイン

技術の進化に伴い、知識が爆発的に増加しています。インターネットはモノになり、私たちの生活の質を飛躍的に高めました。どの時点でも、平均的なインターネットユーザーにより多くの情報が処理されています。この情報は、デスクトップコンピューター上のWebサイトまたはハンドヘルドデバイスの形式にすることができます。タブレットまたは携帯電話。

あまりにも多くの情報がユーザーの注意を引き付けようとしますが、Webエクスペリエンスを設計する人としては、メッセージの受け渡しに3秒しか割り当てられていないことが明らかです。

これにどのように対処しますか。メッセージはすべてのWebデザインのソースにあるため、メッセージを渡すことは非常に重要です。通信するWebサイトを構築すると同時に、ユーザーを引き付けて、コンテンツに執着させる必要があります。それは確かに難しい仕事です。

任意のWebコンテンツの膨大な作業範囲を考慮すると、ますます多くの人々がWebデザインの世界に参入しています。クリエイティブなWebデザイナーは、優れたユーザーエクスペリエンスを作成する彼/彼女の驚くべき才能のおかげで、町の話題です。 Webデザイナーは現在、マーケティング/広告会社に就職するか、自分で始めてWebデザインに飛び込むことができます。

美的魅力はウェブ上の特定のコンテンツの鍵です。これは、Webデザイナーがデザイン、色、間隔などの原則と基盤を認識している必要があることを意味します。より多くのユーザーが毎日高品質のWebコンテンツを見るようになります。現在のWebページまたはWebサイトを、数時間または数分前にアクセスしたWebページと比較することは明らかです。コンテンツの順序と優れたグラフィックスと色の組み合わせにより、多くのスタンドアロンのバナー/ページがインターネット上で人気のあるものになりました。

例

単純なグラフィックの場合を考えてみましょう。ミームと呼ばれる多くのグラフィックがインターネット上にあります。これらは、グラフィック内にテキストが埋め込まれたシンプルな* Graphics Interchange Format（GIF）*画像です。これらのミームは、世界のある地域での最近の出来事に基づいてインターネットを巡回しています。この例を見ると、彼らが持っている唯一の魅力は、グラフィックと関連するテキストまたは無関係のテキストです。

それでも、それは非常に多くの人気を得ており、インターネット上の驚くべき可能性について考えるようになっています。

したがって、Webデザインを効果的にするには、創造性とメッセージを伝える方法の両方が重要な役割を果たします。

成功するWebページはWebデザインとWeb開発の組み合わせであることに注意することが重要です。現在の市場動向に従って、Webデザイナーとともに、Web開発者はチームに不可欠です。 Webデザイナーは常にインスピレーションを求め、彼/彼女の創造性を使用してグラフィックスと関連する配色を作成します。一方、Web開発者はコーディングスキルを使用して、Webサイトでグラフィックと配色を公開します。

Webデザイナーは、コードを記述する知識も持っている必要があります。これにより、Web開発者が目的のグラフィックや配色を使用できるようになります。 Notepadのような単純なアプリケーションの単純なコードは、WebデザイナーがWeb開発の原動力となるのに役立ちます。

視差スクロールの使用

Parallax Scrollingは、WebデザイナーとWeb開発者の両方の仕事の境界になります。 Webデザイナーは、InVision、UXPinなどのツールを使用して視差スクロールの効果を作成し、Web開発者に意図したスクロール動作を伝えることができます。さらに、Web開発者は自分のスキルを活用して、視差スクロール効果を作成します。これは、さまざまなJavaScript、CSS、およびjQueryの手法によって実行できます。これらの各方法の詳細については、次の章で説明します。

前のセクションで指定した定義に従って、視差スクロールは、背景コンテンツがスクロール時の前景コンテンツとは異なる速度で移動するときのテクニックです。

視差スクロール効果を作成する簡単なCSSテクニックは、このWebサイト（http://urban-walks.com/mobile/[The Urban Walks]）に示されています。

アーバンウォーク

上記のスクリーンショットでわかるように、画面の中央にある携帯電話は、2回スクロールした後にコンテンツを変更します。また、最初のスクロールで、携帯電話の背景が変わります。

この移行は、電話がその場所で一定であり、下にスクロールすると背景が変化しているという感覚をあなたに与えています。この効果は、視差スクロール効果と呼ばれます。画面の右端に向かっていくつかのドットの形で画面のインジケータがあるため、下にスクロールしていることがわかります。

Urban Walks Scrolling

視差スクロールの最初の使用は、古いコンピューターゲームでした。キャラクターが背景よりも速く移動するため、固定された背景画像がより遅い速度で移動する場合。これらのゲームの例–ディズニーのアラジンとディズニーのライオンキング。これらのゲームは、それぞれ1993年と1994年に発売されました。

ゲームから始まったのは事実ですが、現在、多くのWebデザイナーは、視聴者に自分のサイトを愛させる効果を強調しています。視差スクロールの利点は、Webサイトからモバイルサイトに拡張されます。

これらのWebサイトは、デスクトップバージョンの視差スクロールを使用して設計されていたため、モバイル画面もサポートするコードが追加されています。

Webおよびモバイルでの視差スクロールの利点

このセクションでは、以下で説明するように、さまざまな視点から視差スクロールを使用する利点について説明します-

視聴者の視点から

視差スクロールに関連する楽しい要素があります。上記の例で見たように、ユーザーがさまざまな画面からスクロールすると、千語の情報の伝達が容易になりました。
初めてのユーザーを検討する場合、各スクロールに関連付けられた好奇心があります。そのため、Webサイトのエクスペリエンスが向上するだけでなく、ユーザーがWebサイト自体への最初のアクセスにより多くの時間を費やす可能性が高くなります。
ユーザーがスクロールに興味を持つにつれて、ユーザーエンゲージメントの割合は劇的に増加します。
情報はより明白な方法で利用できるため、ユーザーは情報を把握するプロセスについて考える必要はありません。
場合によっては、ロゴやメニューアイコンなど、画面上の他のアイテムをアニメーション化することで、提供する製品/サービスに関するストーリーを作成できます。

技術的な観点から

デスクトップバージョンに視差スクロールを実装すると、同じフレームワークをモバイルWebサイトまたは画面に非常に簡単に使用できます。
コードスニペットはシンプルで再利用可能であるため、マーケティング代理店またはウェブサイトサービスプロバイダーの会社であれば、新しいクライアントを収集するときにこれは楽になります。
視差スクロールの知識には、CSS、JavaScriptなどのフロントエンドフレームワークの専門知識が必要です。

CSSテクニック

Web開発者にとって、視差スクロール効果の作成に関しては、さまざまなテクニックが利用可能です。そのような手法の1つは、* Cascaded Styling Sheets（CSS）*を使用することです。

CSSは、画面にHTML要素がどのように表示されるかを説明します。 CSSファイルを作成して、完全なWebサイトに使用できます。各HTML要素にスタイルを追加し、Webページのさまざまな部分でスタイルを管理するよりもCSSファイルを追加する方が簡単です。

注-この章で後述する方法の一部は、モバイルデバイス用ではなく、デスクトップコンピューターに固有のものです。特定の技術がモバイルデバイスに適していない場合の手順で言及されます。

ドキュメントオブジェクトモデル（DOM）へのすべての追加描画へのCSSオフロードを考慮すると、ハードウェアアクセラレーションの利用率が高く、CPUに負担をかけることなくスムーズな効果が得られます。

絶対位置法

この方法は、視差効果を作成するために頻繁に使用されます。これは、利用可能な他のオプションに比べて比較的軽量であるためです。背景画像の位置は、画面上の他のコンテンツに対して固定されています。以下で説明する例では、CSSの魔法を使用してそれを行う方法を説明します。

このセクションでは、絶対位置法の2つの方法を説明します-

単一の背景
複数の背景

シングルバックグラウンドメソッド

この方法では、同じフォルダーに2つのファイルを作成します。同じ目的のために以下に示す手順を守ってください-

ステップ1

同じフォルダーに2つのファイルを作成する必要があります。1つ目はHTMLマークアップ、2つ目はCSSコードです。

同じフォルダーに2つのファイルを作成

ステップ2

次に、HTMLマークアップを定義します。以下のコードを確認してください-

<html>
   <head>
      <link rel = "stylesheet" href = "styles.css">
   </head>
   <body>
      <div class = "BgContainer">
         <div class = "Parallax">
            <h1> Welcome! </h1>
         </div>
         <div class = "FgContainer">
            <div class = "MainContent">
               <p>
                  Here we will go ahead with some content which will really vary
                  according to the content on your site. I am just typing out this
                  content as it is sometimes good to engage user than the usual lorem
                  ipsum text!
                  <br/>
                  <br/>

                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                  aliquip ex ea commodo consequat. Duis aute irure dolor in
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                  culpa qui officia deserunt mollit anim id est laborum.
                  <br/>
                  <br/>

                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                  aliquip ex ea commodo consequat. Duis aute irure dolor in
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                  culpa qui officia deserunt mollit anim id est laborum.
               </p>
            </div>
         </div>
      </div>
   </body>

</html>

ステップ3 *

メモ帳を開きます。上記のコードスニペットをコピーして貼り付けます。

ファイルを保存するときに、[名前を付けて保存]で[すべてのファイル]を選択します。必要に応じてファイルに名前を入力しますが、以下のスクリーンショットに示すように、拡張子- l を付ける必要があります。

ステップ3メモ帳を開く

ステップ4 *

ファイルが保存されたら、メモ帳で別のファイルを作成し、以下のコードを貼り付けます-

html, body {
   font-size: 18px;
   line-height: 28px;
}

h1 {
   letter-spacing: -15px;
   color: white;
   text-align: center;
   font-size: 200px;
   font-weight: 800;
   line-height: 200px;
}

BgContainer {
   perspective: 1px;
   transform-style: preserve-3d;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: scroll;
}

FgContainer {
   position: relative;
   display: block;
   background-color: white;
   z-index: 1;
}

MainContent {
   max-width: 750px;
   margin: 0 auto;
   padding: 75px 0;
}

p {
   margin: 75px 0;
}

.Parallax {
   display: flex;
   flex: 1 0 auto;
   position: relative;
   z-index: -1;
   height: 100vh;
   justify-content: center;
   align-items: center;
   transform: translateZ(-1px) scale(2);
   background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
   background-color: rgb(250,228, 216);
}

前のステップで見たように、ファイルを保存するときに、名前を付けて保存*タイプで*すべてのファイル*を選択します。必要に応じてファイルに名前を入力し、拡張子 *.css を追加します。

コードの分析

コードのどの部分が視差効果の原因であるかを理解しましょう。視差の最も重要な作業は、遠近法と変換規則を使用して行われます。上記のコードスニペットの*行15 を参照してください。パースペクティブは、まず *BgContainer 用に作成されます。これにより、変換ルールのプラットフォームが開始されます。

行40から始まる Parallax コンテナで、行48の transform ルールは、translate（-1px）を使用してBgContainer divをバックグラウンドにプッシュします。

変換パラメータとスケールパラメータの値を変更して、視差の深さを変更できます。

あなたがhtmlファイルを開くと、視差効果は以下のように表示されます-

コードの分析

注-チュートリアルの残りの部分では、読者は上記の方法で提供されるフォルダー構造に従ってHTMLファイルとCSSファイルを作成できると想定されます。

マルチバックグラウンドメソッド

この方法では、ユーザーがページを下にスクロールするときにさまざまな画像が表示されます。この効果を説明するために異なる色の組み合わせで使用される鉛筆の画像があります。

以下に示すように、HTMLページの次のコードを観察します-

<html>
   <head>
      <link rel = "stylesheet" href = "styles.css">
   </head>

   <body>
      <h1>Multiple Background Example</h1>
      <div class = "parallax">
         <div class = "bg__First">First</div>
         <div class = "bg__Second">Second</div>
         <div class = "bg__Third">Third</div>
         <div class = "bg__Fourth">Fourth</div>
      </div>
   </body>

</html>

前の例と同様に、このHTMLファイルと同じ場所に保存されている styles.css を使用します。 First、Second、Third、Fourthという3つの異なるdivがあります。

視差スクロールのためのCSSコードは以下のとおりです-

body, html {
   height : 100%;
   font-family : sans-serif;
}

.parallax [class*="bg__"] {
   position : relative;
   height : 50vh;
   text-indent : -9999px;
   background-attachment : fixed;
   background-position   : top center;
   background-size       : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
   box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
   height : 100vh;
}
.parallax .bg__First {
   background-image : url("parallax0.png");
}
.parallax .bg__Second {
   background-image : url("parallax1.png");
}
.parallax .bg__Third {
   background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
   background-image : url("parallax1.png");
}

ここでは、7行目から視差効果を作成します。ここで重要なプロパティは background-attachment：fixed です。

このプロパティを使用すると、色鉛筆で最初の画像が常に上部に残ります。下にスクロールすると、28行目で説明したさまざまな画像が表示され始めます。

その結果、下のgifに示すように視差効果を見ることができます。次の画像は、複数の背景について検討した例のスクリーンショットです。

色鉛筆

純粋なCSS視差

前の2つの方法の知識を組み合わせて、高度なPure CSS視差効果を作成しましょう。

違いは、 image 要素と z-transform プロパティの配置方法です。プロパティの説明は、CSSコードの後に提供されます。

メモ帳の通常の方法を使用して、次のコードでHTMLファイルを作成します。

<html>
   <head>
      <link rel = "stylesheet" href = "styles.css">
   </head>

   <body>
      <div class = "wrapParallax">
         <div class = "parallax_one">
            <img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
         </div>
         <div class = "parallax_two">
            <h1>Pure CSS Parllax Advanced Level</h1>
         </div>
         <div class = "parallax_three">
            <img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
         </div>
      </div>
   </body>

</html>

CSSファイルの場合、コードは以下のとおりです-

body, html {
   padding: 0;
   margin: 0;
}

h1 {
   color: blue;
   text-align: center;
   padding: 20px;
   text-shadow: 0px 0px 10px #fffff;
}

img {
   width:100vw;
   height:100vh;
}

.wrapParallax {
   perspective: 100px;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
}

.parallax {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
}

.parallax_one {
   transform: translateZ(-100px) scale(2)
}

.parallax_two {
   z-index: 10;
   transform: translateZ(-200px) scale(3)
}

.parallax_three {
   margin-top: 100vh;
}

コードの分析

*position：absolute* プロパティを使用して、 *line* の最初のレイヤーの位置を修正しました。 位置も0にハードコードされています。

見出しのあるレイヤーである parallax_two では、 z-index：10 を適用して、見出しにフローティング効果を与えています。レイヤー parallax_three は、margin-topプロパティを提供することにより下に移動します。

したがって、視差効果の複雑さのレベルを上げることができます。

次の図に示すように、効果を観察します。

ロータス

JavaScriptテクニック

視差効果を作成するための最も一般的な方法は、JavaScriptを使用することです。この章以降では、JavaScriptの概念と、Parallaxスクロールを実現するために使用されるライブラリのいくつかについて説明します。

純粋なJavaScriptを使用すると、Webサイトのパフォーマンスを最適に保つことができます。パフォーマンスの観点からライブラリを使用することには、他にも多くの利点があります。ただし、コード構成をよりよく理解するために、純粋なJavaScript視差の実装から始めます。おもしろいことに、純粋なJavaScriptが vanilla JavaScriptと呼ばれることもあります。

純粋なJavaScriptを使用した視差スクロール

まず、以下に示すコードを使用してメインHTMLファイルを作成します。 HTMLページは、4つの見出しテキストのみで構成されます。

<html>
   <head>
      <link rel = "stylesheet" href = "styles.css">
      <script src = "myscripts.js"></script>
   </head>

   <body>
      <section class = "parallax">
         <h1>The First Scroll</h1>
      </section>

      <section class = "parallax">
         <h1>The Second One</h1>
      </section>

      <section class = "parallax">
         <h1>GoingOn !!</h1>
      </section>

      <section class = "parallax">
         <h1>And we've reached the bottom!!</h1>
      </section>
   </body>

</html>

この例では、行番号4で、 myscripts.js ファイルを使用していることに注意してください。このファイルは、HTMLファイルおよびCSSファイルと同じフォルダーに格納されます。

次に、以下に示すようにCSSファイルを準備しましょう。

header {
   height: 4em;
   background: #845;
}

.parallax {
   background-repeat: no-repeat;
   background-size: cover;
}

.parallax h1 {
   text-align: center;
   margin: 0;
   font-size: 2.5em;
   letter-spacing: .2em;
   color: red;
   padding: 10rem 0;
   mix-blend-mode: exclusion;
}

.parallax:nth-of-type(1) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

.parallax:nth-of-type(1) h1 {
   padding: 15rem 0;
}

.parallax:nth-of-type(2) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

.parallax:nth-of-type(2) h1 {
   padding: 12rem 0;
}

.parallax:nth-of-type(3) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

.parallax:nth-of-type(4) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

JavaScriptパーツが追加されました。メモ帳でファイルを作成し、_myscripts.js_として保存します。

function $$(selector, context) {
   context = context || document;
   var elements = context.querySelectorAll(selector);
   return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
   var scrolledHeight= window.pageYOffset;

   $$(".parallax").forEach(function(el,index,array) {
      var limit = el.offsetTop+ el.offsetHeight;

      if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
         el.style.backgroundPositionY=  (scrolledHeight - el.offsetTop)/1.5+ "px";
      } else {
         el.style.backgroundPositionY=  "0";
      }
   });
});

コードの分析

JavaScriptコードを分析しましょう。

行番号1から4 *のコードは、ヘルパー関数を表します。

6行目では、視差要素を選択し、 scroll イベントをウィンドウに追加します。スクロールされる領域の量を決定するために、 scrolledHeight プロパティを使用しています。画面が下にスクロールすると、視差要素の backgroundPositionY が更新されます。

視差効果を遅くするために、1.5で割って、この数値を任意の数値に変更できます。

これで、下のスクリーンショットに示すように、ページが下にスクロールするのを見ることができます。

ページを下にスクロール

ScrollMagic JavaScriptライブラリの使用

前のセクションで説明したように、純粋なJavaScriptを使用して視差効果を作成できますが、ユーザーエクスペリエンスを向上させる強力なJavaScriptライブラリがいくつかあります。 ScrollMagicは、視差スクロール相互作用を作成するためのこのようなライブラリの1つです。

以下に示す例の助けを借りて、これについてさらに議論しましょう-

注-この例では、簡単にするために、CSSをHTMLファイルに保存します。また、JavaScriptコードは同じドキュメントに存在します。簡単に言うと、HTMLファイルを1つだけ作成し、必要なCSSとともにScrollMagicライブラリを参照します。

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
   </head>

   <body>
      <style type = "text/css">
         .parallaxParent {
            height: 100vh;
            overflow: hidden;
         }
         .parallaxParent > * {
            height: 200%;
            position: relative;
            top: -100%;
         }
      </style>
      <div class = "spacing0"></div>

      <div id = "parallax1" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>

      <div class = "spacing1">
         <div style = "background-color:cyan">
         <p>These are bricks</p>
         </div>
      </div>

      <div class = "spacing0"></div>
      <div id="parallax2" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>

      <div class = "spacing1">
         <div style = "background-color:yellow">
            <p>Some More Bricks</p>
         </div>
      </div>

      <div class = "spacing0"></div>
      <div id = "parallax3" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>
      <div class = "spacing2"></div>

      <script>
        //init controller
         var controller = new ScrollMagic.Controller({
            globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

        //build scenes
         new ScrollMagic.Scene({triggerElement: "#parallax1"})
            .setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
            .addIndicators()
            .addTo(controller);

         new ScrollMagic.Scene({triggerElement: "#parallax2"})
            .setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
            .addIndicators()
            .addTo(controller);

         new ScrollMagic.Scene({triggerElement: "#parallax3"})
            .setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
            .addIndicators()
            .addTo(controller);
      </script>
   </body>

</html>

上記のコードに示すように、 line 3 to 6 のJavaScriptライブラリ参照が必要です。 CSSコードは9行目から19行目で指定されています。

コンテンツ配信ネットワーク

3行目から6行目までのスクリプト参照は、ScrollMagicコンテンツ配信ネットワーク（CDN）URLを指します。 CDNを使用することは、Webサイトの速度を落とすことなく必要なライブラリをロードできるため、現代のWebサイト開発では理にかなっています。

ライブラリでカスタマイズが必要な場合、これらの効果を利用するには、それぞれのサーバーでライブラリをホストする必要があります。ライブラリの基本的な機能を使用している場合は、CDN URLを使用すると効率的です。

上記のHTMLコードは、2つの区分で区切られた画像を示しています。最初の区分は見出し付きで表示されます-これらはレンガ*であり、2番目の区分は表示されます-*いくつかのレンガ。

9行目から19行目のCSSコードでは、それぞれの視差divの位置とスタイルのみを指定していることに注意してください。

このソフトな視差*シーン*を作成する作業は、ScrollMagicライブラリによって行われます。 43行目から62行目のスクリプトコードを参照すると、ScrollMagic controller が呼び出され、 scene が作成されます。

シーンは、画面の80％が占有されているときに視差効果を作成するようにDOMをガイドします。 JavaScriptは、スクロールトリガーを理解するために使用されます。その結果、このページでフローティングエクスペリエンスが得られます。

レンガの壁

注-上記の画像をGIF画像と見なすと、テキスト分割の滑らかな効果を観察できなくなります。

アニメーションをトリガーする

ScrollMagicライブラリを使用すると、さまざまなユーザーエクスペリエンスを作成できる可能性が無限に広がります。スクロール時にアニメーションをトリガーするには、以下のコードスニペットを確認してください。

このためには、2つのファイル *minusが必要です。 1つのHTMLファイルと1つのCSSファイル。

以下に示すコードでHTMLファイルを作成します-

<html>
   <head>
      <link rel = "stylesheet" href = "style.css">

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
   </head>

   <body>
      <div class = "spacing0"></div>
      <div id = "parallax1" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>

      <div style = "height:450px;"></div>
      <div id = "square" class = "square">This is it!</div>
      <div style = "height:450px;"></div>

      <script>
         var controller = new ScrollMagic.Controller();
         var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
            .setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
            .addTo(controller);

         var scene = new ScrollMagic.Scene({triggerElement: '.square'})
            .setClassToggle('.square', 'show')
            .addTo(controller);
      </script>
   </body>

</html>

次に、次のコードを含むCSSファイルを作成します。

.square {
   background: aqua;
   margin: 0 auto;
   display: block;
   padding: 40px 0;
   text-align: center;
   color: #000;
   font-size: 40px;
   font-weight: bold;
   opacity: 0;
   transition: .3s;
   width: 0%;
}
.square.show{
   opacity: 1;
   width: 100%;
}
.parallaxParent {
   height: 100vh;
   overflow: hidden;
}
.parallaxParent >* {
   height: 200%;
   position: relative;
   top: -100%;
}

コードの分析

HTMLコードを参照すると、ScrollMagicコードは line 17 から始まり、 line 25 まで続きます。このセクションでは、2つのScrollMagicシーンを作成しています。最初のシーンはブリックイメージ用で、もう1つのシーンはバナーアニメーション用です。

行20 *の *setTween 関数で指定されているように、スクロールアクションが画面サイズの40％で発生すると、次のシーンが開始され、バナーが表示されます。

id- square のdivの不透明度は、CSSファイルの line 10 および line 15 で制御されます。

その結果、ページ上に以下のアニメーションが表示されます。

アニメーション付きのレンガの壁

水平スクロール

視差スクロールを適用して、水平スクロールを実現することもできます。ライブラリScrollMagicを使用して、スクロールの水平効果を作成できます。以下のコードを見てください。

コードは水平スクロール効果を作成するために単純ですが、画面の水平移動を実現するためにjqueryリファレンスが必要になります。 jQueryの詳細については次の章で説明しますが、現時点では、以下のコードに従ってください。

メインコード用のHTMLファイル、スタイル用のCSSファイル、およびScrollMagic関数呼び出し用のJSファイルの3つの個別のファイルを作成します。

HTMLドキュメントのコードは次のとおりです。

<html>
   <head>
      <link rel = "stylesheet" href = "style.css">
   </head>

   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
   <script src = "animation.js"></script>

   <body>
      <div class = "wrapper" id = "js-wrapper">
         <div class = "sections" id = "js-slideContainer">
            <section class = "section">
               <span class = "section__title" id = "title1">Scroll Once</span>
               <span id = "trigger--title1"></span>
            </section>

            <section class = "section">
               <span class = "section__title" id = "title2">Do It Again</span>
               <span id = "trigger--title2"></span>
            </section>

            <section class = "section">
            <span class = "section__title" id = "title3">Thank You!</span>
            <span id = "trigger--title3"></span>
         </div>
      </div>
   </body>

</html>

スクロール後に表示される3つのセクションがあることに注意してください。 3つのセクションは、それぞれ15行目、19行目、23行目にids title1、title2、title3で示されています。

CSSドキュメントのコードは次のとおりです-

body {
   font-family: serif;
}

body, html {
   height: 100%;
}

.wrapper {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.section {
   height: 100%;
   width: calc( 100%/5 );
   float: left;
   position: relative;
}

.section:nth-child(1) {
   background: green;
}

.section:nth-child(2) {
   background: orange;
}

.section:nth-child(3) {
   background: red;
}

.sections {
   width: 500%;
   height: 100%;
}

.section__title {
   position: absolute;
   top: 50%;
   left: 50%;
   font-size: 30px;
   color: #fff;
}

コードの分析

3つの画面（またはセクション）の背景色は、行10、22 *、および *25 で提供されます。

13行目から始まるコードで各画面の相対的な幅を計算しています。

ScrollMagicのJavaScriptコードは以下のとおりです-

$(function () {
   var controller = new ScrollMagic.Controller();
   var horizontalSlide = new TimelineMax()
      .to("#js-slideContainer", 1,   {x: "-20%"})
      .to("#js-slideContainer", 1,   {x: "-40%"})

   new ScrollMagic.Scene({
      triggerElement: "#js-wrapper",
      triggerHook: "onLeave",
      duration: "400%"
   })
   .setPin("#js-wrapper")
   .setTween(horizontalSlide)
   .addTo(controller);
});

8行目の triggerHook プロパティに注目してください。このプロパティは、ユーザーがスクロールイベントの完了に達するとスクロール効果を提供します。関数 TimelineMax は、画面に水平スクロール効果を提供します。

それぞれのファイルを作成すると、次のように水平スクロールアニメーションを見ることができます。

水平スクロールアニメーション

jQueryテクニック

前の章で、JavaScriptライブラリを使用するとWebサイトに良い効果がどのように追加されるかを理解しました。 JavaScriptをjQueryと組み合わせると、驚異的な柔軟性が得られ、視差スクロールをWebサイトに簡単に追加できます。

この章では、視差スクロール効果を追加する3つのjQueryプラグインを見ていきます。前のJavaScriptの章で参照した方法と同様に、HTMLコードでjQuery参照を使用して、強力なjQuery視差スクロールを作成します。

jQueryプラグインについて注意すべき重要な点は、プラグインが頻繁に更新されないため、視差スクロール用のプラグインの使用を開始する前に調査を行うことです。

Parallax.jsを使用した単純な視差スクロール

Parallax.js jQueryプラグインを使用すると、手間をかけずに視差スクロール効果を作成できます。 jQueryプラグインを検討するには、ブートストラップなどのライブラリをハイエンドで含める必要があります。この章では、コードにHTML5タグがあることに注意してください。

以下に示すHTMLファイルを見てみましょう-

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      <link href = "css/style.css" rel = "stylesheet">

      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
   </head>

   <body>
      <section>
         <div class = "container">
            <h1>Example on Parallax.js</h1>
            <p data-pg-collapsed>
               This is an example of parallax scrolling using Parallax.js jQuery Plugin.
            </p>
            <br/>
         </div>
      </section>

      <div class = "parallax-container" data-parallax = "scroll"
         data-position = "top" data-bleed = "10"
         data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
         data-natural-width = "1600" data-natural-height = "800" >
      </div>
      <section>
         <div class = "container">
            <h2 id = "sampleLorem">Sample Text Here</h2>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
               odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
               quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
               mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
               Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
               litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
               <br/>
               <br/>

               Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
               quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
               tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
               risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
               quis ligula lacinia aliquet. Mauris ipsum.
               <br/>
               <br/>

               Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
               Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
               litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
               ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
               diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
               Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
               Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
               magna luctus suscipit.
               <br/>
               <br/>

               Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
               vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
               eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
               ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
               blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
               Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
               viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
               malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
               Morbi in dui quis est pulvinar ullamcorper.
               <br/>
               <br/>

               Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
               aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
               venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
               sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
               lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
               accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
               blandit orci.
               <br/>
               <br/>

               Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
               convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
               iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
               imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
               et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
               nisi. Nulla quis sem at nibh elementum imperdiet.
               <br/>
               <br/>
            </p>
         </div>
      </section>

      <div class = "parallax-container" data-parallax = "scroll"
         data-bleed = "10" data-speed = "0.2"
         data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
         data-natural-width = "1600" data-natural-height = "801"
         data-pg-name = "PARALLAX IMAGE 002">
      </div>
   </body>
</html>

コードの分析

上記のコードスニペットは、2つの画像とサンプルテキストの間にあるページのコードを示しています。

ご覧のとおり、コードは <！DOCTYPE html> で始まります。これは、コードがHTML5ベースであることをブラウザーに知らせる典型的な方法です。

行4から6 *の *<meta> タグは、機械解釈用のコードを示しています。このコードの影響を確認することはできません。ここで注意すべき重要なことは、 meta タグを使用すると、Web開発者は表示されているデータを高度に制御できることです。

また、8行目と9行目では、Bootstrapに加えてCSSスタイルシートが含まれています。特定のフォントフェイスとタイポグラフィでは、Bootstrapは広く使用されているライブラリです。

行10および11 *はjQueryおよびParallax.jsライブラリを処理します。画像の視差効果を制御するために、Parallax.jsを含めることが重要です。 * line-*の div で data-parallax プロパティを見つけることができます。これは、必要な視差効果のためにparallax.jsライブラリを呼び出すのに十分です。

視差効果は、行21 *および*行40 *のコードで見ることができます。 parallax.jsでこの効果を実現する重要なプロパティは、 *_ data-parallax、data-image-src、data-natural-width、data-natural-height_ です。

CSSファイルでは、提供するプロパティは1つだけです。それは以下に示すとおりです-

.parallax-container {
   height: 500px;
   width: 100%;
}

上記のHTMLコードでは、CSSファイルの特定の構造を作成しました。 css というフォルダーがあり、 bootstrap.min.css および style.css というCSSファイルがあります。

すべてが文書で完了したら、以下に示すように視差効果を見ることができます-

視差効果

Parallaxator jQueryプラグインの使用

Parallaxatorプラグインは、最高のjQuery視差スクロール効果を提供し、使いやすいです。このリンクからParallaxatorプラグイン、そのCSSおよびJSファイルをダウンロードできます-https://github.com/QODIO/parallaxator#example-on-usage[Parallaxator GitHub]。

CSSファイルとJSファイルをダウンロードしたら、以下に示すコードを使用してHTMLコードを作成できます。

<!DOCTYPE html>
<html>
   <head>
      <title>Parallaxator Plugin</title>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
      <link rel = "stylesheet" href = "fm.parallaxator.jquery.css">

      <link rel = "stylesheet" href = "style.css">
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "fm.parallaxator.jquery.js"></script>
   </head>
   <body>
      <div class = "section1 parallaxator">
         <img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
         <h1 class = "mega_text parallax_child">Nature</h1>
      </div>

      <div class = "section2 parallaxator">
         <img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
         <h1 class = "mega_text parallax_child">
            Architecture<br>
         </h1>
      </div>

      <div class = "section3 parallaxator">
         <img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
         <h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
            Architecture again!
         </h1>
      </div>
   </body>

</html>

コードの分析

パララックス効果は、各imgタグで提供されるparallax_childクラスによって提供されます。 parallax_childは、以下で提供されるCSSおよびJSファイルに接続されています。

parallaxatorプラグインが機能するように、fm.parallaxator.jquery.cssとfm.parallaxator.jquery.jsが含まれています。これらのファイルは、HTMLファイルと同じディレクトリで使用できる必要があります。

CSSのコードは以下のとおりです-

body {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
}

.section1,.section2, .section3 {
   border-bottom: 32px solid #fff;
   padding-top: 40%;
}

.section1 {
   background-color: #fdb;
}

.section2 {
   background-color: #bdf;
}

.section3 {
   background-color: #fbd;
}

.mega_text {
   font-weight: bold;
   font-size: 100px;
   margin: 0;
   text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
   padding: 64px;
   display: block;
}

上記のコードの結果として、視差効果を見ることができます。

自然視差効果

視差スクロール用のStellar.js jQueryプラグイン

Stellar.jsは、視差jQueryプラグインのリストへの追加です。もはや維持されていませんが、安定したビルドを使用している開発者は、視差スクロール効果を簡単に使用できます。 jQueryの最新バージョンと互換性があり、実装が簡単です。

Stellar.jsプラグインの公式Webサイトから最新のjquery.stellar.jsをダウンロードする必要があります。ダウンロードしたら、HTMLおよびCSSファイルと同じフォルダーにこのプラグインファイルを作成します。

HTMLコードを見てみましょう。

<!doctype html>
<html>
   <head>
      <title>Stellar.js Demo</title>
      <link href = "style.css" rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "jquery.stellar.js"></script>

      <script>
         $(function(){
            $.stellar({
               horizontalScrolling: false,
               verticalOffset: 40
            });
         });
      </script>
   </head>

   <body>
      <h1>Demo Site</h1>
      <div class = "image architecture" data-stellar-background-ratio = "0.5">
         <span>Architecture</span>
      </div>

      <div class = "image abstract" data-stellar-background-ratio = "0.5">
         <span>Abstract</span>
      </div>

      <div class = "image landscape" data-stellar-background-ratio = "0.5">
         <span>Landscape</span>
      </div>

      <div class = "image window" data-stellar-background-ratio = "0.5">
         <span>Window</span>
      </div>
   </body>

</html>

コードの分析

Stellar.jsが機能するように、jQueryプラグインが line 6 で参照された直後にjquery.stellar.jsライブラリを含めました。

Stellar視差の関数は、スクリプトタグで line 8からline 15 まで呼び出されます。プロパティ data-stellar-background-ratio を使用して、表示される画像のオフセットを設定しています。これは、*行19,20,21および22 *で行われます。

CSSコードは以下のとおりです-

body {
   font-family: helvetica, arial;
   padding-top: 40px;
}

h1 {
   background-color: black;
   color: white;
   height: 40px;
   font-size: 24px;
   font-weight: normal;
   left: 0;
   line-height: 40px;
   position: fixed;
   text-align: center;
   top: 0;
   width: 100%;
   z-index: 1;
}

h1 a {
   border-bottom: 1px solid white;
   color: white;
   display: inline-block;
   line-height: 30px;
   text-decoration: none;
}

.image {
   background-attachment: fixed;
   background-position: 50% 0;
   background-repeat: no-repeat;
   height: 450px;
   position: relative;
}

.image span {
   bottom: 0;
   color: white;
   display: block;
   left: 50%;
   margin-left: -640px;
   font-size: 38px;
   padding: 10px;
   position: absolute;
   text-shadow: 0 2px 0 black, 0 0 10px black;
   width: 1280px;
}

.architecture {
   background-image: url(img/architecture.jpg);
}

.abstract {
   background-image: url(img/ruin.jpg);
}

.landscape {
   background-image: url(img/landscape.jpg);
}

.window {
   background-image: url(img/window.jpg);
}

両方のファイルが作成され、stellar.jsプラグインファイルが同じフォルダに含まれると、以下のスクリーンショットに示すように効果を確認できるはずです-

Stellar Parallaxプラグインを使用した出力

ブートストラップ技術

ブートストラップは、すぐに使用できる多くのコンポーネントから選択できる人気のあるフレームワークです。ブートストラップは、視差スクロールを実装するためのコードを最適化できます。

この章では、Jumbotronコンポーネントを使用して視差スクロールを実装する方法を例を挙げて説明します。

Bootstrap4 Jumbotronを使用した全角視差ページ

ユーザーに大きな「行動を促す」ボックスが表示され、割引やセールに関するコンテンツが含まれているWebサイトを想像してください。通常、ジャンボトロンはそのような場所でアプリケーションを見つけます。ユーザーの注意を引くのに役立つ大きな箱です。

Bootstrapの1つのコンポーネントのみを使用しているため、この例では個別のCSSファイルを作成しません。 HTMLコードに飛び込みましょう。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
         integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
         crossorigin = "anonymous">

      <style>
         .jumbotron{
            margin:15px 30px 0px 30px;
            border-radius:10px;
            background:
            linear-gradient(
               rgba(0, 0, 250, 0.25),
               rgba(125, 250, 250, 0.45)),
               url(img/ruin.jpg);

            background-repeat: no-repeat;
            background-attachment: fixed;
            color:white !important;
            height:440px;
         }
         .page-scroll {
            height:5000px;
         }
         .lead {
            font-family:raleway;
            font-weight:100;
            margin-top:-10px;
         }
      </style>
   </head>

   <body>
      <div class = "jumbotron jumbotron-fluid">
         <div class = "container">
            <h1 class = "display-2">Jumbotron Example</h1>
            <p class = "lead">Example text for parallax using jumbotron</p>
         </div>
      </div>
      <div class = "page-scroll"> </div>
   </body>

</html>

コードの分析

*line 6* はBootstrap 4ライブラリを参照します。 ジャンボトロンのマージンと境界半径を *line 8から11* に指定しています。

33行目で見ることができるように、特定のイメージをロードする大きなボックスを表示するために、jumbotronクラスでdivを作成しています。今回は画像の直接URLがないため、ダウンロードした画像を使用することに注意してください。サンプルの任意の高解像度画像をダウンロードして、 line 16 で指定できます。

上記のコードを実行すると表示される出力を以下に示します-

ジャンボトロンの例

Webデザインでの視差スクロール-結論

このチュートリアルでは、視差スクロールを作成するためのさまざまなライブラリを学習しました。 CSSを使用した基本レベルから、フロントエンド開発にBootstrapを使用した高度なレベルまで、すべての側面をカバーしました。無視できないWebページを作成するために、創造的なスキルを適用することをお勧めします。視差スクロールには、インスピレーションを与えるための膨大な例がオンラインにあります。

視差スクロールの利用

入門の章ですでに説明したように、視差スクロールを使用して、並外れたユーザーエクスペリエンスを実現できます。以下は、視差スクロールを含めることができるWebサイトのアイデアです。

タイムラインWebサイト

これらのタイプのWebサイトには、通常、製品や会社などについて話をするストーリーがあります。視差効果を作成して、訪問者にストーリーを提示し、さまざまなアニメーションに夢中にさせることができます。

タイムラインWebサイトの場合、背景を作成し、テキストコンテンツをフォアグラウンドで表示する価値があります。グラフィックデザイナーと協力して、背景と連動したグラフィックを作成できます。

モバイルアプリのウェブサイト

現在、モバイルアプリは、あらゆる製品/サービスの提供に不可欠です。モバイルアプリができることとできないことの説明を提供するモバイルアプリのWebサイトを作成しようとする多くのスタートアップがあります。

厳格なアプリ作成ガイドラインで知られているApple App Storeは、モバイルアプリにサポートWebサイトを要求しています。このウェブサイトは常に魅力的でユーザーフレンドリーである必要があります。

視差スクロールを使用すると、モバイル画像を使用して、ユーザーがページを下にスクロールするときにさまざまな種類の機能を表示できます。そのような例の1つは、このチュートリアルの第4章で既に説明されています。

マウスオーバー効果

視差スクロールとマウスオーバーの力を使用して、次のレベルのアニメーションを作成できます。マウスオーバーで、スクロールの方向を制御し、視差効果を作成できます。

このように、素晴らしい体験を作成することに関しては多くの可能性があります。必要なのは、アイデアと正しいツールとライブラリのセットだけです。

Web UIの未来

テクノロジーの力と視差スクロールなどの創造的な要素により、驚くべきユーザーエクスペリエンスを作成するためのかつてない競争があります。これはウェブサイトだけに限らず、モバイルサイトにも拡張されています。

現在、Web UIはピークに達していますが、モバイルデバイスと互換性のあるWebページを作成するには時間が必要です。 BootstrapとjQueryの例で見たように、ハンドヘルドデバイスでサポートされていない場合、Webサイトは長生きできません。

既存のライブラリに加えて、ユーザーエクスペリエンスの未来は、人工知能とバーチャルリアリティにも期待しています。 VRギアを使用して表示できるWebページがいくつかあります。このような状況では、最新のプラグインと連絡を取り合い、新しいプラグインを作成することも非常に理にかなっています。

このチュートリアルで得た知識を活用して、最高のユーザーエクスペリエンスを作成し、Web開発の旅に幸運と成功をお祈りします！

Parallax-scrolling-in-web-design-quick-guide

背景と紹介

スクロール

歴史

視差スクロールの起源

Webデザインでの視差スクロール-概念

定義

例

ベア・グリルズ

お金を稼ぐ

InfoQuestインフォグラフィック

GitHub 404

視差スクロールのアプリケーション

ゲームデザイン

ウェブサイト

Webデザインと視差スクロール

Webデザインの背景

現代のWebデザイン

例

視差スクロールの使用

Webおよびモバイルでの視差スクロールの利点

視聴者の視点から

技術的な観点から

CSSテクニック

絶対位置法

シングルバックグラウンドメソッド

コードの分析

マルチバックグラウンドメソッド

純粋なCSS視差

コードの分析

JavaScriptテクニック

純粋なJavaScriptを使用した視差スクロール

コードの分析

ScrollMagic JavaScriptライブラリの使用

コンテンツ配信ネットワーク

アニメーションをトリガーする

コードの分析

水平スクロール

コードの分析

jQueryテクニック

Parallax.jsを使用した単純な視差スクロール

コードの分析

Parallaxator jQueryプラグインの使用

コードの分析

視差スクロール用のStellar.js jQueryプラグイン

コードの分析

ブートストラップ技術

Bootstrap4 Jumbotronを使用した全角視差ページ

コードの分析

Webデザインでの視差スクロール-結論

視差スクロールの利用

タイムラインWebサイト

モバイルアプリのウェブサイト

マウスオーバー効果

Web UIの未来