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

完成版のプレビューと学習のポイント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このコースで制作するパララックス効果&スクロールエフェクトを使ったWebページの完成形を見ながら、学習のポイントについてご紹介致します。
講師:
03:24

字幕

このレッスンでは このコースで制作していく パララックス効果と スクロールエフェクトを使ったー ウエブページの完成形を見ながら 学習のポイントについてご紹介していきます 今こちらの画面に表示されているのが 今回制作していくパララックス効果と スクロールエフェクトを持った ウエブページとなります それではこのサイトの動きを 実際に確認しながら 今回のこのコースの学習のポイントに ついて見ていきたいと思います まずはこのページ自体の動きを 確認していきたいと思います こちらをこのように スクロールダウンしていくと まずは上の減ったメニューが 表示されてきて そして背景の画像はこのように パララックスが効いていますね そして次の項目になった時に ここも背景はパララックスになっていて しかも上に載っている3つの要素 に対してもパララックス効果がついています そしてこちらのイベント情報の枠では この様に スクロールに応じて フェイドインしていきますね このような形です そして最後にこちらの部分で 背景がパララックスになっていますね そしてこのボタンをクリックすると ページの上部に戻ります そしてさらにこちらのメニューですね こちらのメニューをクリックすると 該当する箇所にスクロールします このような形ですね また この背景画像ですが ブラウザの横幅に合わせて 拡大縮小するようにしています 例えばこのブラウザの幅を このように小さくしていくと 背景も合わせて小さくなっていってますね そしてこのように大きくすると 同じように拡大していきます この背景画像の拡大縮小に関しても パララックスを実装するにあったて 必要不可欠な要素となりますので この点にも注目しながら 学習を進めていきましょう 今度は逆にこの縦幅のほうをみてみましょう この縦幅の方はこのように この縦のブラウザ幅に ぴったり当てはまるように設定しています ですので少しスクロールをすると すぐに次のコンテンツがでてきて そしてこのコンテンツ自体も そのブラウザの縦幅に一致させているので このようにスクロールしてくると 次の項目がでてきますね このように各コンテンツの縦幅を ブラウザー幅に合わせるような 実装も行っていきます 以上ここまでご紹介してきた このウエブページ上の動きを 学習のポイントとして HTML CSS のコーディングから始まり そして Javascript での パララックス効果の実装や スクロールエフェクトの実装を 順を追ってコースで解説していきます 以上でレッスンは終了です 今回はこのコースで制作するパララックス効果 及びスクロールエフェクトを使った ウエブページの完成形を見ながら 学習のポイントについて 解説いたしました 以降のレッスンからは パララックス効果やスクロールエフェクトを 持ったウエブページを 制作するにあたっての HTML や CSS コーディングの 方法について解説いたしますので そちらも合わせてご覧ください

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

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

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

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

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

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