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

スクロールに応じたフェードイン

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページスクロールに応じて、Webページ上の要素をフェードインさせる方法について解説致します。
講師:
04:39

字幕

このレッスンではページスクロールに応じて ウエブページ上の要素をフェードイン させる方法について解説いたします まずはダウンロードしてきたこちらの fadein というフォルダの 中に入っている この js フォルダの中の この script.js ファイルを エディタで開いてください そしてこれが そのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずは現状の index.html ファイルを開いて 今回 実装していく内容の 確認をしていきたいと思います その index.html ファイルは 先ほどダウンロードしてきた ファイルの中に入っています こちらのファイルですね こちらのファイルを ブラウザで開いてみましょう そしてこれがそのファイルを開いた状態です それではこちらのページを下に スクロールさせていってみましょう このようにスクロールさせていって そしてこちらのイベント情報ですね こちらの中に含まれている要素が この様にスクロールに応じて フェードインされてきていますね 今回はこのフェードインの挙動について 実装を行っていってみたいと思います それではエディタに戻ります そして今回注目していただきたい部分は こちらの script.js ファイルの中の こちらの部分となります それではまず前回までのレッスンで設定した こちらの offset 300 ピクセル の中のこの direction down の中にこれらの記述が 行われていることに注目してください そして実際のフェードインの処理ですが このように書いていきます $(section♯box3 そして .find(article:eq の (0) の ) そして fadeIn と 書いて ( ) ; そしてこの fadeIn の中には 変数 fadeSpeed を入れています この変数 fadeSpeed ですが こちらの部分で定義を追加しています 今回はその fadeSpeed を 500 というふうに設定していて これは 0.5 秒を意味する形になります 要するに 0.5 秒かけて フェードインしろといった命令になります そして何をフェードインするのか というのがこのフェードインの前に 書かれているこの要素ですね box3 という ID のついた section の中の article その article ですが eq 0 というものがついてます これはこの section の中に含まれる 一番初めの article という 意味になります それと同時に同じ様な内容を下にも書いて こちらの eq の部分を 1 にセットしています これはどういう意味かというと 同じようにこの section タグの 中に含まれている 2番目の article タグ といった意味になります ここまで書けたら 次はこちらの offset 50 の方にも 設定してあげます 同じ様にこのような記述を行って 変更するポイントを こちらの eq の中の数字ですね 一つ目は 2 そして 二つ目は 3 というふうにしています こうすることで実際には 三つ目の article タグ そして四つ目の article タグを フェードインしろといった形になります このようにすることで一番目と二番目の article タグ そして二番目と三番目の article タグに対して それぞれ異なる offset のタイミングで このフェードインの処理を 発生させることができる訳ですね そして最後に忘れてはいけないのが こちらの部分となります こちらの部分ではページが 表示されたタイミングで 全てのこれらの article タグを 「非表示」にしています そうすることで初めてここで フェードインのアニメーションが 実行されるといった形になります ここまで実装が完了すれば 先ほど確認したような フェードインのアニメーションを 実行させることが可能という訳ですね 以上でレッスンは終了です 今回はページスクロールに応じて ウエブページ上の要素をフェードイン させる方法について解説いたしました 以降のレッスンでは 今回のフェードインとは逆に ウエブページ上の要素をフェードアウト  させる方法について解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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