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

要素を含むコンテンツボックスの設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スクロールエフェクトを実装するにあたり、エフェクトを実装したい要素を含むコンテンツボックスに対しての設定方法について解説致します。
講師:
03:58

字幕

このレッスンでは スクロールエフェクトを実装するにあたり エフェクトを実装したい要素を含む コンテンツボックスに対しての 設定方法について解説いたします まずはダウンロードしてきたこちらの contents box というフォルダの中の こちらの js フォルダの中の この script.js ファイルを エディタで開いてください そして これがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずは現状の index.html ファイルをブラウザで開いて 今回の実装内容の 確認をしていきたいと思います index.html ファイルは 先ほどダウンロードしてきたファイル の中に入っています こちらのファイルですね こちらのファイルをブラウザで開きます そしてこれが そのファイルを ブラウザで開いた状態です 今回はこちらのウエブページの中の この「イベント情報」と書かれた部分ですね この 4つの要素に対して スクロールエフェクトを かけていってみたいと思います 今回はその準備として このエフェクトをかけたい要素を含むー このイベント情報の この大きなボックスですね このコンテンツボックスに対して まずは設定をしていってみたいと思います それではエディタに戻ります そして今回 注目していただきたい部分は こちらの部分となります それではどのような実装をしているか 見ていきたいと思います まず $ の ( sectionIDbox3 と書いて ) そして waypoint と書いて その中に function (direction) の { } ) ; という形で処理を終えています こうすることで どのようなことが起こるかというと この IDbox3 という属性をもった この section の要素が ブラウザの表示領域の 一番上の位置に来た際に この { } の間に記述した 内容が実行される といった内容のプログラムとなります それでは実際に試しに この { } の間に 簡単なプログラムを書いてみましょう alert と書いて ; そしてこの中に test と打ってみましょうか そしてこの状態で保存します 保存のためのショートカットは Mac でしたら command と S Windowsでしたら Ctrl と S を使って行うことができましたね ではこの状態で index.html を ブラウザで開いてみましょう そしてこれがブラウザで開いた状態です ではこのブラウザを下に スクロールさせていってみたいと思います そうするとこのように イベント情報が表示されてきましたね そしてこのイベント情報の ボックスのこの上辺部分が このブラウザの表示領域の 上辺部分にさしかかった時に 先ほどのプログラムが実行されます それでは引き続きスクロールダウンしていくと このようにアラートで test と 表示されてきましたね それではエディタに戻ります こうすることによってスクロールエフェクトを 実行したいタイミングを 指定することができるわけですね 以上でレッスンは終了です 今回はスクロールエフェクトを 実装するにあたり エフェクトを実装したい要素を含む コンテンツボックスに対しての 設定方法について解説いたしました 以降のレッスンでは 下向きのスクロールを 検出する方法について解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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