JavaScript 実践講座:パララックスアニメーション

背景画像に対するパララックス効果実装

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLソース上で、背景画像にパララックス効果を実装する方法について解説致します。
講師:
03:58

字幕

このレッスンでは html ソース上で背景画像に パララックス効果を実装する方法について 解説いたします まずはダウンロードしてきたこちらの background image parallax という フォルダの中に入っている index.html ファイルを エディタで開いてください そしてこれがそのファイルを 開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたいのは こちらのファイルの中の この部分となります まずこちらの部分は 大きな背景画像を設定した コンテンツボックスでしたね それを構成している section タグとなっています その section タグに対してこのように data-stellar-background-ratio と書いて その中に 0.5 と書いてあげます このように書くことで stellar. js が こちらの section タグに設定している 背景画像に対して パララックス効果をつけてくれます こちらの「 0.5 」 という数字ですが その背景画像のスクロールスピードを 表しています この中を例えば「 1 」と設定すると ブラウザのスクロールと 同じスピードでこちらの背景画像も スクロールすることになるので 実質パララックス効果が効いていない 通常の背景画像という形になるのですが このように例えば「 0.5 」 といった形で 1 より小さい値にすると ブラウザのスクロールスピードよりも こちらの背景画像のスピードの方が 遅くスクロールしていくといった形になるので パララックス効果が生まれる といった形になります 逆にここの値を 1 よりも大きい値にすると 今度はブラウザのスクロールスピードよりも 速くこちらの背景画像がスクロールしていく といった形になります こちらのパララックス効果の スピードに対しては ご自身で実際にブラウザでの動きを 確認しながら微調整していくと良いでしょう そしてここまでできたら この data-stellar-background-ratio の この属性を他の box に対しても 付けていってあげます 例えばここの box に関しても 同じように付けていますね そして box3 に関しては背景画像が 設定されていないので ここは設定していません そして最後に box4 のところにも このように data-stellar-background-ratio を 設定してあげています それではこの状態で 一度この index.html ファイルを ブラウザで開いて その動作を確認してみましょう そしてこれが index.html ファイルを ブラウザで開いた状態です それではこちらのブラウザスクロールを 行ってみたいと思います このように徐々にブラウザを下に スクロールさせていくと このように背景画像が ブラウザスのクロールよりも 遅くスクロールしていってるのがわかりますね このようにすることで パララックス効果が生まれている といった形になります そして 2 つ目の box も 同じような形で動いていますね そして 3 つ目は 背景画像が設定されていないので このままの状態で進みます そして 4 つ目の box に関しても このようにパララックス効果が 生まれていますね このように動作すれば きちんと背景画像に対して パララックス効果の設定ができている といった形となります 以上でレッスンは終了です 今回は html ソース上で 背景画像に対して パララックス効果を実装する方法について 解説いたしました 以降のレッスンでは同じく html ソース上で要素に対して パララックス効果を実装する方法について 解説していきますので そちらも合わせてご覧ください

JavaScript 実践講座:パララックスアニメーション

このコースではページに奥行き感が出せるパララックス効果と、ページをスクロールしてゆくと少しずつ表示内容が変わってゆくスクロールエフェクトを使って、動きのあるWebページを作成する方法について解説します。jQueryプラグインstellar.jsとWaypointsについてや実装のためのHTMLやCSSのコーディング方法などについても解説します。

1時間30分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年04月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。