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

スクロールに応じたフェードアウト

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

ぜひご覧ください。

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

字幕

このレッスンではページスクロールに応じて Web ページ上の要素をフェードアウトさせる 方法について解説いたします まずはダウンロードしてきたこちらの fadeout というフォルダに入っている この js フォルダの中の script.js ファイルを エディタで開いてください そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは 現状の index.html ファイルを まずはブラウザで開いて 今回実装していく内容を 確認していきたいと思います 現状の index.html ファイルは 先程ダウンロードしてきた こちらのファイルの中のこの部分にあります このファイルをブラウザで開いてみましょう そして これがそのファイルを開いた状態です それではまずこの Web ページを 下までスクロールさせていってみましょう このようにスクロールさせていくと このイベント情報のところで まずは フェードインして要素が表示されてきますね そして今回はこの逆です 今度は逆に上の方にスクロールさせていくと このように順番に フェードアウトされていくのが分かりますね 今回はこのフェードアウト部分についての 実装の方法について見ていきたいと思います それではエディタに戻ります 今回注目して頂きたい部分は こちらの script.js ファイルの 中のこちらの部分となります まずはこれらの記述が 前回までのレッスンで作成した offset 300 pixel の中の direction が up の中に 記述されていることに注目して下さい それでは実際の フェードアウトの処理を見ていきます まずは fadeIn と同じように fadeOut させたい要素を指定します それがこちらの部分ですね こちらの down の時の fadeIn の要素と同じ様に eq 0 の article 要するに1番目の article タグ そしてこの下の部分で 2番目の article タグを指定して そして こちらの方に fadeOut と記入します そして この fadeOut の括弧の中の引数には 変数 fadeSpeed を入れていますね これは前回と同様の こちらの部分で定義したものとなります このように書くことで offset が 300 pixel の時かつ スクロールの向きが上向きの時に この fadeOut の処理が実行されます ここまで記述できたら 次は― こちらの offset:50 の direction up この中にも同様の処理を記述してあげます 但しこちらの部分には eq 2 そして eq 3 の article を指定します こちらの down の時と同じ要素ですね 要するに3番目の article タグと 4番目の article タグをフェードアウトしろ という意味になります このように実装することで スクロールが上向きの時 かつ offset が 300 pixel そして 50 pixel この二つのタイミングでこれらの要素に対して fadeOut の処理を行うことができます 以上でレッスンは終了です 今回はページスクロールに応じて Web ページ上の要素を フェードアウトする方法について 解説をいたしました 以降のレッスンではページスクロールに応じて ヘッダーメニューを表示させる方法について 解説いたしますので そちらもあわせてご覧ください

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

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

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

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

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

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