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

jQueryとその他ライブラリの読み込み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLファイルから、jQueryとその他のパララックス効果やスクロールエフェクト用のプラグインの読み込み方法について解説致します。
講師:
03:03

字幕

このレッスンでは html ファイルから jQuery と その他のパララックス効果や スクロールエフェクト用の プラグインの読み込み方法について 解説いたします まずはダウンロードしてきたこちらの load_js というフォルダの中に 入っているこの index.htmlファイルを エデッタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたい部分は この index.html ファイルの 一番下の部分 こちらの部分となります こちらの部分では script タグを使って jQuery そしてスクロールエフェクトを 実装するための waypoints そしてパララックス効果を 実装するための stellar そしてその処理を 実際に自分で書いていく この script.js を読み込んでいます script.js だけが自分で作成したものですね 現在は中身が空っぽの ファイルとなっています そしてその上の3つは それぞれのウエブサイトから ダウンロードしてきたものになります 念のため それぞれのウエブサイトを 確認してみましょう まずは jQuery がこちらの ウエブサイトから ダウンロードしてくることができます こちらの Download jQuery から取得してください そして次に Stellar ですが Stellar.js はこちらのページ この Download ボタンから 取得することができます この Download ボタンを クリックすると このように GitHub のページに 移動してきますので こちらの Download ZIP を クリックしてファイルを PC 上に保存することができます その中から先ほどのこの jquerystellarmin.js を この js フォルダの中に 移してきてください そして最後にこの Waypoints ですが こちらもこの Download や GitHub から取得することができます 同様にここから取得したファイルから こちらの jquarywaypointsmin.js ファイルをこちらの js フォルダの中に移してきてください そしてこちらの script タグを 使って読み込みます 読み込む順番ですが まず一番始めに まず一番初めに jquary を 読み込むようにして そして一番最後に自分で作成するー この script.js ファイルを 読み込むようにしてください これでパララックス効果や スクロールエフェクトを 使ったウエブページを制作するための javascript の読み込みは 完了となります 以上でレッスンは終了です 今回は html ファイルから jQuery とその他のパララックス効果や スクロールエフェクト用の プラグインの読み込み方法について 解説いたしました 以降のレッスンからは 実際にパララックス効果を ウエブページに実装する方法について 解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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