背景と紹介
コンピュータや携帯電話で現代のWebサイトを閲覧している場合、Webサイトを上下にスクロールすると、画面全体がスクロール方向に移動しているように見えることがあります。これがバックグラウンドでの効果である場合、スクロールするとフォアグラウンドの情報も変化します。この効果は、パララックススクロールとして簡単に説明できます。
スクロール
スクロールしてその意味を理解しましょう。Webページを表示しているときに、Webページを任意の方向（上、下、左、右）に閲覧するアクションは、スクロールと呼ばれます。
通常、デスクトップコンピュータのユーザーの場合、このアクションはマウスのスクロールホイールを使用して実行されます。
歴史
スクロールという言葉を見てみましょう。昔は、遠くにいる人にメッセージを送るために、手書きの巻物が使われていました。これらの巻物は以下のように見えました-
巻物を持っている人の行動を想像してみてください。コンテンツを完全に読むには、その人は「スクロール」してさらにロールする必要があります。これらの巻物の使用は、記録テキストまたは決定を維持するためでもありました。時が経つにつれ、パピルス、羊皮紙、紙などのさまざまな筆記用具から作成された巻物の使用が増加しました。
コンピュータが進化するにつれて、非常に大きなドキュメント、テーブル、画像の処理と保存が可能になりました。データが多すぎて、画面サイズがユーザーにデータを表示するのに十分でない場合がありました。表示するデータがウィンドウまたは表示領域のサイズよりも大きい場合、データは非表示のままになります。これは、画面領域を拡大するアプローチのために必要でした。
画面の拡大を実現するためのいくつかのオプションを以下に示します-
- 画面サイズを大きくするには
- データサイズを減らすには
- スクロールを使用するには
このスクロールメカニズムは、グラフィックデザインや写真編集を行う人々にとってより重要です。
視差スクロールの起源
視差スクロールの歴史を見てみましょう。まず、視差という言葉の意味を理解します。視差という言葉はギリシャ語から来ていますπαράλλαξις （視差）、これは交代を意味します。
オブジェクトを斜めから見ている場合、オブジェクトは特定の方法で表示されます。ただし、同じオブジェクトを異なる位置から移動している場合は、オブジェクトが明らかに移動します。この現象は視差と呼ばれます。
視差の起源と背景を理解したので、Webデザインにおける視差スクロールの歴史と概念を理解しましょう。
定義
ウィキペディアによると– Parallax scrolling は、背景画像が前景画像よりもゆっくりとカメラを通過するコンピュータグラフィックスの手法であり、2Dシーンに奥行きのある錯覚を作り出し、仮想体験への没入感を高めます。
アニメーションの初期には、視差スクロールが採用されていました。アニメーションスタジオの多く（ディズニーなど）は、視差効果を実現するためにマルチプレーンカメラを使用していました。
コンピュータグラフィックステクノロジーがJavaScriptのような最先端のフレームワークとともに進化するにつれて、Webデザイナーと開発者は豊富な経験を持つサイトを構築できるようになりました。視差スクロールはいくつかのレイヤーから始まりましたが、コンピューターのスクロールバーで次のレベルに進みました。テクニックは同じままでしたが、スクロールへの適用により、ユニークな体験が生まれました。
例
視差スクロールは、最新のWebサイトで広く使用されています。視差スクロールは、デスクトップサイトだけでなくモバイルサイトにも一度に実装できるため、このようなサイトの人気は近年急上昇しています。
視差スクロールを採用しているウェブサイトのいくつかの例を以下に示します-
ベアグリルス
アニメーションが進むにつれて、Webサイトのコンテンツがどのようにインタラクティブになっているのかを確認できます。先にスクロールすると、ますます多くの情報が明らかになります。
あなたのお金を重要にする
読者に信用組合の利点を紹介するために、このサイトではストーリーを紹介します。前方にスクロールすると、情報が独自の方法で表示されます。
InfoQuestインフォグラフィック
職場で重要な情報を見つけるための従業員の旅は、スクロール体験を使用して描かれています。
GitHub 404
これは通常の視差体験とは少し異なり、マウスポインタをその上に置くと、画面上部のオブジェクトが移動します。
視差スクロールの応用
これまでのところ、視差スクロールがさまざまなデジタルメディアで役立つことは、定義と背景から明らかです。一部のアプリケーションは視差スクロールが以下です-
ゲームデザイン
視差スクロールは、ゲームデザインで広く使用されています。キャラクターは背景に対して移動する必要があり、マウスとキーボードを使用したプレーヤーのコントロールにより、エクスペリエンス全体を変更する必要があります。ゲームデザインは非常に原始的ですが、視差スクロールを使用する流行の方法です。
ウェブサイト
ユーザーがWebサイトにアクセスできるようにするには、動的で異なるエクスペリエンスが重要です。上記のWebサイトの例からお気づきかもしれませんが、視差スクロールは、インタラクティブな方法で表現されるため、コンテンツに追加されます。
この章では、Webデザインの概念と、Webデザインで視差スクロールを使用する利点について説明します。
Webデザインの背景
20の開始以来番目の世紀、紙媒体が原因のデジタルメディアにカット喉の競争に入っています。デジタルメディアには、インターネットで目にするものが含まれているため、関連する雑誌も含まれています。
毎週/毎月のサブスクリプションの一部として取得するニュースレターもデジタルメディアに含まれています。主に、デジタルメディアはモバイルデバイスとデスクトップデバイスに大きく依存しています。デスクトップデバイスだけでなく、モバイル（ハンドヘルド）でもコンテンツを表示できる場合に違いが生じます。どちらのデバイスでもコンテンツを表示する方法、コンテンツをデザインする特定のスタイルが機能しています。
このスタイルの設計は、 Web Designing。設計またはコーディングの観点から、Webページの設計者がWebページの作成に着手するとき、彼/彼女はモバイルデバイスも考慮に入れます。
ウィキペディアによると、 Web design ウェブサイトの制作と維持における多くの異なるスキルと分野を網羅しています。そのようなスキルの1つは、ユーザーにインパクトのあるエクスペリエンスを設計することです。Webデザインはこの経験に対応し、ページコンテンツを整理するための整理された方法を提供し、さまざまなスタイルを提供します。
Webデザインには、インターフェイスデザイン、グラフィックデザイン、および特定の標準を使用したコードの記述が含まれます。この作業は、1人またはチームで行うことができます。
この作業を簡単にするために市場で入手できるツールはたくさんありますが、Webページの外観を作成するのは創造的なスキル次第です。
現代のウェブデザイン
テクノロジーの進化に伴い、知識が爆発的に増加しています。インターネットは物事になり、私たちの生活の質を急上昇させました。ある時点で、平均的なインターネットユーザーによって処理される情報はますます増えています。この情報は、デスクトップコンピューターまたはハンドヘルドデバイス上のWebサイトの形式にすることができます。タブレットまたは携帯電話。
非常に多くの情報がユーザーの注意を引き付けようとしますが、Webエクスペリエンスを設計する人として、 there are only 3 seconds allocated to pass the message across.
これにどのように対処しますか？メッセージはあらゆるWebデザインのソースであるため、メッセージを渡すことは非常に重要です。コミュニケーションをとるウェブサイトを構築すると同時に、ユーザーを引き付けてコンテンツに固執させる必要があります。それは確かに難しい仕事です。
特定のWebコンテンツの膨大な作業範囲を考慮すると、ますます多くの人々がWebデザインの世界に参入しています。クリエイティブなウェブデザイナーは、優れたユーザーエクスペリエンスを生み出すという彼/彼女の驚くべき才能のおかげで町の話題となっています。ウェブデザイナーは現在、マーケティング/広告会社に就職するか、自分でウェブデザインに飛び込むことができます。
Aesthetic appeal is the key for a given content on web。つまり、Webデザイナーは、デザイン、色、間隔などの原則と基盤を認識している必要があります。毎日、高品質のWebコンテンツを見るユーザーが増えています。現在のWebページまたはWebサイトを、数時間または数分前にアクセスしたものと比較することは明らかです。コンテンツの順序と優れたグラフィックスおよび色が相まって、多くのスタンドアロンのバナー/ページがインターネット上で人気のあるものになっています。
例
単純なグラフィックの場合を考えてみましょう。インターネット上にはミームと呼ばれる多くのグラフィックがあります。彼らは簡単ですGraphics Interchange Format (GIF)グラフィック内にテキストが埋め込まれた画像。これらのミームは、世界のある地域での最近の出来事に基づいてインターネットを巡回しています。この例を見ると、彼らが持っている唯一の魅力は、グラフィックといくつかの関連性のあるまたは関連性のないテキストです。
それでも、それは非常に人気があり、インターネット上の驚くべき可能性について考えさせられます。
したがって、ウェブデザインが効果的であるためには、メッセージを伝達するための創造性と方法の両方が重要な役割を果たします。
It is important point to note that a successful web page is combination of Web Design and Web Development。現在の市場動向によると、Webデザイナーとともに、Web開発者はチームになくてはならないものです。ウェブデザイナーは常にインスピレーションを探し、彼/彼女の創造性を使ってグラフィックや関連する配色を作成します。一方、Web開発者は、コーディングスキルを使用して、グラフィックと配色をWebサイトに公開します。
Webデザイナーは、意図したグラフィックまたは配色をWeb開発者が使用できるようにするために、コードの記述に関する知識も持っている必要があります。Notepadのような単純なアプリケーションの単純なコードは、WebデザイナーがWeb開発の主導権を握るのに役立ちます。
視差スクロールの使用
視差スクロールは、WebデザイナーとWeb開発者の両方の作業境界に該当します。Webデザイナーは、InVision、UXPinなどのツールを使用して視差スクロールの効果を作成し、Web開発者にスクロールでの意図した動作を伝えることができます。さらに、Web開発者は、視差スクロール効果を作成するために自分のスキルを活用します。これは、さまざまなJavaScript、CSS、およびjQueryの手法で実行できます。これらの各方法の詳細については、次の章で説明します。
前のセクションで指定された定義に従って、 parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling。
視差スクロール効果を作成するための簡単なCSSテクニックは、このWebサイト– The UrbanWalksに示されています。
上のスクリーンショットでわかるように、画面の中央にある携帯電話は、2回スクロールするとコンテンツが変更されます。また、最初の巻物で観察すると、携帯電話の背景が変化します。
この遷移により、電話はその場所で一定であり、下にスクロールすると背景が変化しているように感じられます。この効果は視差スクロール効果と呼ばれます。画面の右端にドットの形で画面のインジケーターがあるので、下にスクロールしていることがわかります。
視差スクロールの最初の使用は、古いコンピュータゲームでした。キャラクターが背景よりも速く移動するため、固定された背景画像の移動速度が遅くなる場合。これらのゲームのいくつかの例–ディズニーのアラジンとディズニーのライオンキング。これらのゲームは、それぞれ1993年と1994年に発売されました。
それがゲームから始まったのは事実ですが、現在、多くのWebデザイナーは、視聴者に自分のサイトを愛してもらう効果を強調しています。視差スクロールの利点は、Webサイトからモバイルサイトに拡張されます。
これらのWebサイトは、デスクトップバージョン用に視差スクロールで設計されていましたが、モバイル画面もサポートするコードが追加されています。
Webおよびモバイルでの視差スクロールの利点
このセクションでは、以下で説明するように、さまざまな観点から視差スクロールを使用する利点について説明します。
観客の視点から
視差スクロールに関連する楽しい要素があります。上記の例で見たように、ユーザーがさまざまな画面からスクロールするにつれて、千の単語の情報を伝えることがより簡単になりました。
初めてのユーザーを考えると、各巻物には好奇心があります。したがって、Webサイトのエクスペリエンスを向上させるだけでなく、ユーザーがWebサイト自体への最初のアクセスにより多くの時間を費やす可能性も高まります。
ユーザーがスクロールに興味を持っているため、ユーザーエンゲージメントの割合は劇的に増加します。
情報はより明白な方法で利用できるため、ユーザーは情報を理解するプロセスについて考える必要はありません。
場合によっては、ロゴやメニューアイコンなど、画面上の他のアイテムをアニメーション化することで、提供している製品/サービスについてのストーリーを配置できます。
技術的な観点から
デスクトップバージョンに視差スクロールを実装すると、同じフレームワークをモバイルWebサイトまたは画面に非常に簡単に使用できます。
コードスニペットはシンプルで再利用可能であるため、マーケティングエージェンシーやウェブサイトサービスプロバイダーの会社であれば、新しいクライアントを集めるときにこれは簡単になります。
視差スクロールの知識には、CSS、JavaScriptなどのフロントエンドフレームワークに関する専門知識が含まれています。
Web開発者にとって、視差スクロール効果の作成に関しては、さまざまな手法を利用できます。そのようなテクニックの1つはCascaded Styling Sheets(CSS)。
CSSは、HTML要素が画面にどのように表示されるかを説明します。CSSファイルを作成して、Webサイト全体に使用できます。各HTML要素にスタイルを追加してWebページのさまざまな部分で管理するよりも、CSSファイルを追加する方が簡単です。
Note−この章で以下で説明する方法の一部は、モバイルデバイスではなく、デスクトップコンピューターに固有のものです。特定の技術がモバイルデバイスに適していない場合の手順で説明します。
CSSがドキュメントオブジェクトモデル（DOM）へのすべての追加の描画にオフロードされることを考慮すると、ハードウェアアクセラレーションの利用率が高くなり、CPUに負担をかけずにスムーズな効果が得られます。
絶対位置法
この方法は、利用可能な他のオプションと比較して比較的軽量であるため、視差効果を作成するために頻繁に使用されます。背景画像の位置は、画面上の他のコンテンツに対して固定されたままです。以下で説明する例では、CSSの魔法を使用してそれを行う方法を説明します。
このセクションでは、絶対位置法の2つの方法について説明します。
- 単一の背景
- 複数の背景
シングルバックグラウンド方式
この方法では、同じフォルダーに2つのファイルを作成します。同じ目的で、以下の手順に従ってください。
Step 1
同じフォルダーに2つのファイルを作成する必要があります。1つ目はHTMLマークアップを使用し、2つ目はCSSコードを使用します。
Step 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>Step 3
メモ帳を開きます。上記のコードスニペットをコピーして貼り付けます。
ファイルを保存するときは、 Save as type、 選択する All Files。必要に応じてファイルに名前を入力しますが、その後に拡張子を付ける必要があります-.html 以下のスクリーンショットに示すように。
Step 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);
}前のステップで見たように、ファイルを保存するときは、 Save as タイプ、選択 All Files。必要に応じてファイルに名前を入力し、拡張子を追加します.css それに。
コードの分析
コードのどの部分が視差効果の原因であるかを理解しましょう。視差の最も重要な作業は、遠近法と変換規則を使用して行われます。参照するline 15上記のコードスニペットで。パースペクティブは私たちのために作成されますBgContainer最初。これにより、変換ルールのプラットフォームが開始されます。
の中に Parallax 40行目から始まるコンテナ transform 48行目のルールは、translate（-1px）を使用してBgContainerdivをバックグラウンドにプッシュします。
平行移動およびスケールパラメータの値を変更して、視差の深さを変更できます。
htmlファイルを開くと、視差効果が次のように表示されます-
Note −チュートリアルの残りの部分では、読者が上記の方法で提供されたフォルダー構造に従って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>前の例と同様に、 styles.cssこのHTMLファイルと同じ場所に保存されます。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つの方法の知識を組み合わせて、高度なPureCSS視差効果を作成しましょう。
違いは私たちが配置する方法になります 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;
}コードの分析
で最初のレイヤーの位置を修正しました line 26 を使用して position:absoluteプロパティ。位置も0にハードコードされています。
に parallax_two、見出しのあるレイヤーである、適用しました z-index: 10見出しにフローティング効果を提供します。レイヤーparallax_three margin-topプロパティを提供することにより、下に移動します。
したがって、視差効果の複雑さのレベルを上げることができます。
下の図に示すように、効果を観察します。
視差効果を作成するための最も一般的な方法は、JavaScriptを使用することです。この章以降では、JavaScriptの概念と、視差スクロールを実現するために使用されるいくつかのライブラリについて説明します。
純粋な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コードを分析してみましょう。
からのコード line number 1 to 4 ヘルパー関数を表します。
6行目で、視差要素を選択して追加します scrollウィンドウへのイベント。スクロールされる領域の量を決定するために、scrolledHeightプロパティ。画面が下にスクロールすると、backgroundPositionY 視差要素のが更新されます。
視差効果を遅くするために、1.5で割った値です。この数値は任意の数値に変更できます。
これで、下のスクリーンショットに示すように、ページが下にスクロールするのを見ることができます。
ScrollMagicJavaScriptライブラリの使用
前のセクションで説明したように、純粋なJavaScriptを使用して視差効果を作成できますが、ユーザーエクスペリエンスを向上させる強力なJavaScriptライブラリがいくつかあります。ScrollMagicは、視差スクロールの相互作用を作成するためのそのようなライブラリの1つです。
以下に示す例を使用して、これについて詳しく説明します。
Note−この例では、簡単にするために、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>上記のコードに示されているように、JavaScriptライブラリの参照が必要です。 line 3 to 6。CSSコードは9行目から19行目まで指定されています。
コンテンツ配信ネットワーク
3行目から6行目までのスクリプト参照は、ScrollMagicコンテンツ配信ネットワーク（CDN）のURLを指しています。CDNを使用することは、Webサイトの速度を低下させることなく必要なライブラリをロードできるため、最新のWebサイト開発では理にかなっています。
ライブラリにカスタマイズが必要な場合、これらの効果を利用するには、それぞれのサーバーでライブラリをホストする必要があります。ライブラリの基本的な機能を使用している場合は、CDNURLを使用すると効率的です。
上記のHTMLコードは、2つの区分で区切られた画像を示しています。最初の部門は見出しで表示されます–These are bricks そして2番目の部門は–で表示されます Some More Bricks。
9行目から19行目のCSSコードでは、それぞれの視差divの位置とスタイルのみを指定していることに注意してください。
この柔らかい視差を作成する作業 sceneScrollMagicライブラリによって行われます。43行目から62行目までのスクリプトコードを参照する場合、ScrollMagiccontroller が呼び出され、 scene 創造された。
シーンは、画面の80％が占有されているときに、視差効果を作成するようにDOMをガイドします。JavaScriptは、スクロールトリガーを理解するために使用されます。結果として、あなたが得るものはこのページの浮遊体験です。
Note −上記の画像をGIF画像と見なすと、テキスト分割のスムーズな効果を観察することはできません。
トリガーアニメーション
ScrollMagic Libraryを使用すると、さまざまなユーザーエクスペリエンスを作成できる可能性が無限に広がります。スクロール時にアニメーションをトリガーするには、以下のコードスニペットを確認してください。
このためには、2つのファイル*マイナスが必要であることに注意してください。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つのシーンはバナーアニメーション用です。
で指定されているように setTween 上の機能 line 20、画面サイズの40％でスクロールアクションが発生すると、次のシーンが始まり、バナーが表示されます。これで完了です。
idのdivの不透明度- square の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行目にID 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つの画面（またはセクション）の背景色は、 lines 10, 22 そして 25。
で始まるコードの各画面の相対的な幅を計算しています line 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);
});に注意してください triggerHook8行目のプロパティ。このプロパティは、ユーザーがスクロールイベントの完了に達したときに、スクロール効果を提供する役割を果たします。関数TimelineMax 画面に水平スクロール効果を提供する責任があります。
それぞれのファイルを作成すると、以下に示すような水平スクロールアニメーションが表示されます。
前の章では、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ベースであることをブラウザに知らせる一般的な方法です。
ザ・ <meta> からのタグ line 4 to 6は、機械解釈用のコードを示しています。このコードの影響を確認することはできません。ここで注意すべき重要なことは–meta タグを付けると、Web開発者は表示されるデータの制御を強化できます。
また、 line 8 and 9、BootstrapとともにCSSスタイルシートが含まれています。特定のフォントフェースとタイポグラフィの場合、Bootstrapは広く使用されているライブラリです。
Lines 10 and 11jQueryおよびParallax.jsライブラリを処理します。画像の視差効果を制御するには、Parallax.jsを含めることが重要です。あなたは見つけることができるでしょうdata-parallax とプロパティ div オン line 21、これは、必要な視差効果のためにparallax.jsライブラリを呼び出すのに十分です。
視差効果は上のコードで見ることができます lines 21 そして line 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, CSSファイルが含まれます– bootstrap.min.css そして style.css。
ドキュメントがすべて完了すると、以下に示すように視差効果を確認できます。
ParallaxatorjQueryプラグインの使用
Parallaxatorプラグインは、最高のjQuery視差スクロール効果を提供し、使いやすいです。Parallaxatorプラグイン、そのCSSおよびJSファイルは、このリンクからダウンロードできます-ParallaxatorGitHub。
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.jsjQueryプラグイン
Stellar.jsは、視差jQueryプラグインのリストへのもう1つの追加です。メンテナンスは終了しましたが、安定したビルドを使用した開発者は、視差スクロール効果を簡単に使用できます。最新バージョンのjQueryと互換性があり、実装が簡単です。
Stellar.jsプラグインの公式ウェブサイトから最新の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プラグインが参照された直後にjquery.stellar.jsライブラリを含めました。 line 6。
年周視差の関数は、スクリプトタグで呼び出されます。 line 8 to line 15。プロパティでdata-stellar-background-ratio、表示されている画像のオフセットを設定しています。これはに行われますlines 19,20,21 and 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プラグインファイルが同じフォルダーに含まれると、以下のスクリーンショットに示すように効果を確認できるはずです-
Bootstrapは、すぐに使用できる多くのコンポーネントから選択できる人気のあるフレームワークです。ブートストラップは、視差スクロールを実装するためのコードを最適化できます。
この章では、ジャンボトロンコンポーネントを使用して視差スクロールを実装する方法を例を挙げて説明します。
Bootstrap4ジャンボトロンを備えた全幅視差ページ
割引やセールに関するコンテンツが記載された大きな「行動を促すフレーズ」ボックスがユーザーに表示されるウェブサイトを想像してみてください。通常、ジャンボトロンはそのような場所でそのアプリケーションを見つけます。ユーザーの注目を集めるのに便利な大きな箱です。
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 6Bootstrap4ライブラリを参照します。ジャンボトロンのマージンと境界半径をから指定していますline 8 to 11。
私たちが見ることができるように line 33、特定の画像をロードする大きなボックスを表示するために、ジャンボトロンクラスでdivを作成しています。今回は画像の直接URLはありませんので、ダウンロードした画像を使用しますのでご注意ください。サンプルの高解像度画像をダウンロードして、で指定できます。line 16。
上記のコードを実行したときに表示される出力を以下に示します-
このチュートリアルでは、視差スクロールを作成するためのさまざまなライブラリについて学習しました。CSSを使用した基本レベルから、フロントエンド開発にBootstrapを使用した上級レベルまでのすべての側面をカバーしました。無視しがたいウェブページを思いつくためにあなたの創造的なスキルを適用することをお勧めします。視差スクロールについては、インスピレーションを与えるための膨大な例がオンラインにあることを忘れないでください。
視差スクロールの利用
導入の章ですでに説明したように、視差スクロールを使用して、並外れたユーザーエクスペリエンスを実現できます。視差スクロールを含めることができるウェブサイトのアイデアをいくつか紹介します。
タイムラインウェブサイト
これらのタイプのWebサイトには通常、製品や会社、またはその他のことについて伝えるストーリーがあります。視差効果を作成して、訪問者にストーリーを伝え、さまざまなアニメーションに従事させ続けることができます。
タイムラインWebサイトの場合、背景を作成し、テキストコンテンツを前景に表示することは価値があります。グラフィックデザイナーと協力して、背景と調和するグラフィックを作成できます。
モバイルアプリのウェブサイト
今日、モバイルアプリはあらゆる製品/サービスの提供に欠かせないものです。モバイルアプリができることとできないことの説明を提供するモバイルアプリのウェブサイトを作成しようとしている多くのスタートアップがあります。
厳格なアプリ作成ガイドラインで知られるAppleApp Storeは、モバイルアプリにサポートWebサイトを用意することを要求しています。このウェブサイトは常に魅力的でユーザーフレンドリーである必要があります。
視差スクロールを使用すると、モバイル画像を使用して、ユーザーがページを下にスクロールするときにさまざまなタイプの機能を表示できます。そのような例の1つは、このチュートリアルの第4章ですでに説明されています。
マウスオーバー効果
視差スクロールとマウスオーバーの力を利用して、次のレベルのアニメーションを作成できます。マウスオーバーすると、スクロールの方向を制御し、視差効果を作成できます。
このように、素晴らしい体験を生み出すことになると、多くの可能性があります。必要なのは、アイデアと適切なツールとライブラリのセットだけです。
WebUIの未来
テクノロジーの力と視差スクロールのような創造的な要素により、驚くべきユーザーエクスペリエンスを生み出すためのこれまでにない競争があります。これはウェブサイトだけでなく、モバイルサイトにも拡張されています。
Web UIは現在ピークに達していますが、モバイルデバイスと互換性のあるWebページを用意するには時間が必要です。BootstrapとjQueryの例で見たように、ハンドヘルドデバイスでサポートされていない場合、Webサイトは長生きできません。
既存のライブラリに加えて、ユーザーエクスペリエンスの将来も、人工知能とバーチャルリアリティを心待ちにしています。VRギアを使用して表示できるWebページがいくつかあります。このような状況では、最新のプラグインと連絡を取り合い、新しいプラグインを作成することも非常に理にかなっています。
このチュートリアルで得た知識を適用して、最高のユーザーエクスペリエンスを作成し、Web開発の旅に多くの幸運と成功をお祈りします。