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

上向きスクロールの検出

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

ぜひご覧ください。

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

字幕

このレッスンでは Waypoints を使って 上向きのスクロールを検出する方法について 解説いたします まずはダウンロードしてきた こちらの scroll up という フォルダの中に入っている この js フォルダーの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います 今回 注目していただきたい部分は こちらの部分となります 前回のレッスンでは こちらの部分を追加して 下向きのスクロールを 検出してきましたが 今回はこちらの部分で 上向きのコントロールを検知しています 記述の仕方ですが 下向きの場合は この direction の値が 「down」だったのに対して 上向きの場合は この direction の値が 「up」となります それ以外の書き方は 下向きのスクロールの場合と同じように if 文を使って書いていきます if と書いて その中に direction = = = そして 文字列で up と書いて { } このように書くことで 上向きのスクロールの際にのみ この if の後の { } の間の処理が 実行されるといった形になります このように上向きのスクロールの時と 下向きのスクロールの時で 処理を分岐させるような書き方が これで完了いたしました 以上でレッスンは終了です 今回は Waypoints を使って 上向きのスクロールを検出する方法について 解説いたしました 以降のレッスンでは スクロールエフェクトを 実装したい要素を含んだ コンテンツボックスに対しての offset を設定して エフェクトが動き出すスクロール位置を 細かく指定する方法について 解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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