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

コンテンツボックスに対するオフセットの設定

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

ぜひご覧ください。

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

字幕

このレッスンでは スクロールエフェクトを 実装したい要素を含む コンテンツボックスに対しての offset を設定して エフェクトが動き出すスクロール位置を 細かく指定する方法について 解説いたします まずはダウンロードしてきた こちらの offset という フォルダの中に入っている この js フォルダの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを 開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず 現状の index.html を ブラウザで開いて 今回 実装する内容の 確認をしてみたいと思います index.html ファイルは 先ほどダウンロードしてきた ファイルの中に入っています こちらのファイルですね これをブラウザで開いてみましょう これがその index.html ファイルを 開いた状態です そしてこのページの中の このイベント情報のところを 見てください 前回までのレッスンでは Waypoints を使って このイベント情報の この枠の上辺が こちらのブラウザの表示領域の 上辺にさしかかった時に プログラムを実行する といった 処理を行ってきました 今回はそれに「offset」という 新たな項目を設定して このボックスの上辺位置と そしてこのブラウザの表示領域 ここの間の距離を指定することによって 例えば このボックスの上辺が ブラウザの表示領域のボックスに さしかかった時に 実行させるではなくて 例えば このような形で少し間を 空けた状態の位置で プログラムを実行するといったような 処理をやっていってみたいと思います それではエディタに戻ります そして今回 注目していただきたい部分は こちらの部分となります こちらの部分で offset の 値を設定しています この waypoint の function の { } の後に , を追加して さらに { } で囲ってあげて その中に offset と書いて : そしてその後に ピクセル単位で 数値を指定します 今回は 300 ピクセルという形にしています これは何を意味するかというと ブラウザの表示領域の上辺から 下に 300 ピクセル離れた場所に この IDbox3 がついた セクションの上辺が到達した時に こちらの中の処理を 実行するといった形になります このようにすることで 開発者の意図したタイミングで プログラムの実行を 行わせることができるようなるため 大変便利です 以上でレッスンは終了です 今回はスクロールエフェクトを 実装したい要素を含む コンテンツボックスに対しての offset を設定して エフェクトが動き出すスクロール位置を 細かく指定する方法について 解説いたしました 以降のレッスンでは同じく このコンテンツボックスに対して 複数の offset を設定して エフェクトが動き出すスクロール位置を 複数設定する方法について 解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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