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

要素に対するパララックス効果実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLソース上で、要素に対してパララックス効果を実装する方法について解説致します。
講師:
04:27

字幕

このレッスンでは html ソース上で要素に対して パララックス効果を実装する方法について 解説していきます まずはダウンロードしてきた こちらの element_ parallax というフォルダの中に入っている この index.html ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずはウエブページの方を 確認してみたいと思います 今回はこちらのウエブページの この 3 つの要素に対して パララックス効果をつけてみたいと思います この「テニスコート」というまとまりと この「遊歩道」というまとまりと この「ドッグラン」というまとまりですね それではエディタに戻ります そして今回 注目していただきたい部分は こちらの部分となります まずこちらの部分ですが id box2 がついた section タグの中の要素 となっていますね そしてこの section タグに対しては 前回のレッスンで行ったー 背景画像に対するパララックス効果の実装 data stellar background ratio 0.5 というのが入っていますね 今回はその中に入っているー こちらの「テニスコート」「遊歩道」 そしてこの下にある「ドッグラン」に対して それぞれの要素にパララックス効果を つけていきたいと思います その要素に対して パララックス効果を つける方法がこちらの記述 となる訳です このように data-stellar-ratio と書いて 0.8 と書いていますね そしてこの遊歩道に対しても こちら data-stellar-ratio 1.2 と書いています そしてこちらのドッグランに対しても data-stellar-ratio 0.9 と書いています それぞれのこの data-stellar-ratio ですが それぞれの「ドッグラン」「遊歩道」 「テニスコート」を囲っている この dl タグに対して設定しています こうすることでこの dl タグ全体が パララックス効果をもつ形になる訳ですね さてこの data-stellar-ratio の後に 書いてあるこちらの数値ですが これは背景画像の パララックス効果の時と同じ様に スクロールのスピードを表しています こちらに関しても 1 を設定すれば ブラウザのスクロールと同じスピードで 動くようになるため パララックス効果のかかっていない 通常の要素となるのですが このように 1 を基準として 例えば このように 0.8 という形で 1 より小さくすると ブラウザのスクロールスピードよりも 遅くスクロールする そしてこちらのように 1 以上の値を記入すると ブラウザスクロールよりも早く この指定した要素がスクロールする という形になります 今回はこの 3 つの要素に対して それぞれ別々の数値を当てはめています こうすることによって それぞれの要素の スクロールスピードが変わってくるため 見た目的にも面白い動きを するようになる訳です それではこの要素に対する パララックス効果を実装した状態で この index.html ファイルを ブラウザで開いて その動きを確認してみましょう これがその index.html ファイルを ブラウザで開いた状態です それではこのブラウザを少しずつ下に スクロールさせてみたいと思います この様に施設案内が表示されてくると テニスコートそしてドッグランそして遊歩道が それぞれ異なるスピードで スクロールしているのがわかりますね この様な形でスクロールしていきます この様に このテニスコート 遊歩道そしてドッグラン それぞれの要素に対して パララックス効果をつけることで ウエブ上で面白い表現を行うことが可能です 以上でレッスンは終了です 今回は html ソース上で要素に対して パララックス効果を実装する方法について 解説いたしました 以降のレッスンからはウエブページ上の要素に対して スクロールエフェクトを実装していく為の 準備の方法について解説いたしますので そちらも合わせてご覧ください

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

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

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

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

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

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