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

複数のオフセットの指定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スクロールエフェクトを実装したい要素を含むコンテンツボックスに対して、複数のオフセットを設定して、エフェクトが動き出すスクロール位置を、複数設定する方法について解説致します。
講師:
02:33

字幕

このレッスンではスクロールエフェクトを 実装した要素を含む コンテンツボックスに対して 複数の offset を設定して エフェクトが動き出すスクロール位置を 複数設定をする方法について解説いたします まずはダウンロードしてきたこちらの offset_for _each という フォルダの中に入っている この js フォルダの中の この scrip.js ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう 今回注目していただきたい部分は こちらの部分となります 前回までのレッスンでは こちらの部分のみを作成しています そしてこちらの部分では offset:300 を指定して この box3 の id がついた section の 上辺がブラウザの表示領域の 上辺から 300 ピクセル下にある時の状態に このプログラムの発動をさせる といった処理を書いてきました 今回は例えば同じこの box3 という id が ついた section の中に違うタイミングで スクロールエフェクトを 実行したい要素がある場合 その際のプログラムの 実装の方法について見ていきます それがちょうどこちらの部分となるわけです 基本的には上で書いたこちらの処理と 同じ処理を書くのですが こちらの offset の値が上と 整ってる点に注目してください 例えばこちらの offset:300 の時に 実行したい内容であれば こちらの funciton の中に 一緒に処理が書くことができますが このように違うタイミングで 実行したい要素がある場合は このように offset の値を書いて 記述してあげる必要があります このように記述することで この id box3 を持った section には 二つのタイミングで実行される スクロールエフェクトを持った要素が 存在しているといった形になります 以上でレッスンは終了です 今回はスクロールエフェクトを 実装した要素を含む コンテンツボックスに対して 複数の offset を設定して エフェクトが動き出すスクロールの位置を 複数設定する方法について解説いたしました 以降のレッスンでは今回の このコースで制作していく Web ページの上部にあるヘッダーメニューを ページスクロールに追随させる 方法について解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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