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

下向きスクロールの検出

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「waypoints.js」を使って、下向きのスクロールを検出する方法について解説致します。
講師:
02:19

字幕

このレッスンでは Waypoints を使って 下向きのスクロールを検出する方法 について解説いたします まずはダウンロードしてきた こちらの scroll down という フォルダの中の この js フォルダの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたい部分は こちらの部分となります まずこちらの部分ですが 前回のレッスンで実装した内容ですね この部分は IDbox3 という属性を もった section タグの上辺が ブラウザの表示領域の一番上に さしかかった時に こちらの { } の間を 実行するという処理でした 今回はその中に こういった処理をつけ加えています まず if 文を作って そして ( ) そしてその中に direction = = = の down と書いています そして { } と書いて 処理を閉じていますね まずこちらの direction ですが こちらは この function の後にある この direction と値が イコールとなります この direction という引数ですが ブラウザスクロールの「向きの値」が 格納されてくる形となっています ですので今回こちらの部分の処理においては direction が「down」の時に 要するに 下向きのスクロールの時にのみ こちらの { } の中の処理を実行する といったプログラムとなります このように書くことで 上向きのスクロールの 際には実行させないけれど 下向きのスクロールの時にだけ実行させる といった処理の使い分けを 行うことが できるようになります 以上でレッスンは終了です 今回は Waypoints を使って 下向きのスクロールを検出する方法に ついて解説いたしました 以降のレッスンでは 今回のレッスンとは逆に 上向きのスクロールを検出する方法について 解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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