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

JavaScript側でのパララックス効果実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScript側で、Stellar.jsを使ってパララックス効果を実装する方法について解説致します。
講師:
03:26

字幕

このレッスンでは JavaScript 側で Steller. js を使って パララックス効果を実装する 方法について解説いたします まずはダウンロードしてきたこちらの js parallax という フォルダの中に入ってる この js フォルダの中の この script.js ファイルを エディタで開いてください そして これがそのファイルを 開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたい部分は こちらの部分となります こちらの部分で JavaScript 側で パララックスの設定を行っています それでは順番に見ていきましょう まずこちらの部分 $.steller と書いて ( ) ; そしてその ( ) の中には { } と書いています このように記述することで Stellar js と この script.js ファイルを 読み込んでいるウエブページ上で パララックス効果を 有効にすることができます そして次に この { } の中ですが こちらの部分ではそのパララックス効果に 対しての設定を行っています 今回は 1 つの設定のみ行っています その設定項目は この horizontalScrolling: false というものです このhorizontalScrolling という設定項目は ウエブページ上を横に スクロールさせることによって発動させる 横に動くパララックス効果 という形になります 今回このコースで制作していく ウエブページですが 縦に長い  縦にパララックス効果を動かしていく ウエブページとなっていますので この horizontalScrolling の値は false として 横に動くパララックス効果を 無効にしています 例えばこの逆に 横に動くパララックス効果を 実装していきたいという形であれば この horizontalScrolling の 値を true と変更して これとは逆に縦のパララックス効果を 無効にする verticalScrolling という 設定項目をここに追加して そしてその値を false とします そうすることによって縦のパララックス効果を 無効にすることが できるわけですね ちなみに今回 縦に動かしていく パララックス効果の実装をしていく訳ですが ここに verticalScrolling true とは書いていませんね ここに verticalScrolling true と書いていないということは つまりはデフォルトの状態で verticalScrolling が true となっている状態ということを 表しています 要するにデフォルトの状態で 縦のパララックス効果は有効になっている といった状態になります 以上で JavaScript 側での パララックス効果の設定は完了となります 思いのほか簡単でしたね 但し これだけでは まだパララックス効果は動作しません 実際にパララックス効果を動かす為には html ソース上でも 作業をしていく必要があります 以降のレッスンでは その html ソース上で 背景画像にパララックス効果を 実装する方法について解説していきますので そちらも合わせてご覧ください 以上でレッスンは終了です 今回は JavaScript 側で Stellar.js を使って パララックス効果を実装する 方法について解説いたしました

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

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

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

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

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

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