jQueryプラグイン活用講座

Parallax ImageScrollのダウンロードと設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインParallax ImageScrollをダウンロードして、HTMLドキュメントに設定を加えます。
講師:
04:39

字幕

このレッスンではウィンドウをスクロールしたときにその中の画像のスクロールのスピードをウィンドウのスクロールの速さとずらすParallax という効果を与えるプラグインParallax-ImageScrollのダウンロードと設定についてご説明しますちょっと口で言っても説明しにくいので今開いているのはParallax-ImageScrollのデモ画面ですここで このウィンドウをスクロールしてみますちょっとずつスクロールしますので画像をよくご覧くださいウィンドウはスクロールしているのに画像の動きが遅いですよねですから窓の中から外を見ているような感じがしますねこれが Parallax といわれる効果ですこうした効果をこのプラグインを使えば簡単に設定することができますまずこのページなんですけれどもGoogle で検索するときにはjquery プラグインですからjquery というキーワードに加えてparallax imageScrollこのまま多分入れてしまったほうが良いでしょうねそうするとまず 1番最初にGitHub とくるのがこれがダウンロードするためのページです今 ご覧に入れたデモページこれはこの2つ目にありますここを開くと今のページが表示されますただここにはダウンロードのリンクが無いのでダウンロードをしたいときにはGitHub の方に行きますそして GitHub の右下の「Download ZIP」のボタンでライブラリをダウンロードしますダウンロードしたのがこのParallax-ImageScroll-masterというフォルダですその中に JavaScript のファイルが2つありましてjquery.imageScroll.jsこちらでも結構ですがjquery.imageScroll.min.jsの方が圧縮がかけてありますですからサーバーにアップロードするにしてもサイズが小さくて済みますこの min の付かない方は中を開けてその JavaScript コードを見ることができるという点の利点がありますのでもし中を見たい場合にはこちらそうでない場合特にサーバーにアップロードする場合にはこの min.js の方を選んでくださいこれを作業用のフォルダの中のプラグインやライブラリを入れるためのフォルダに入れておきますこちらがその作業用のフォルダなんですがsample.htmlこれが練習用の HTML ドキュメントですそしてライブラリは lib というフォルダに入れておくことに決めましたので そこにjquery.imageScroll.min.jsが入っています練習用の HTML ドキュメントsample.html を開きましたjquery のプラグインですから当然 jquery を読み込んでおく必要がありますscript 要素で http からスタートしていますのでネットワークからライブラリを呼んでくるということでcdn を使っていますそして今度はプラグインの読み込みということで通常はこの後に読み込むんですが このParallax ImageScrollの場合にはbody タグの の直前に読み込んでくださいここに script 要素でsrc ソースですねそして「参照」で先ほどダウンロードしておいたjquery.imageScroll.min.jsこれを開きますそしてタグを閉じます保存をしましょうもちろん画像の img 要素あるいはテキストが必要であればそれをこの body 要素の中にどんどん追加していく必要がありますそれは この script 要素の上に追加してくださいこの script 要素プラグインを読み込んだscript 要素は必ずbody タグの の上に置いておくというふうに気を付けてくださいここに img 要素など画像を読み込んでコントロールすることで先ほどのような Parallax の効果ができるんですけれどもこれで準備が整ったということですこのレッスンではParallax ImageScrollのプラグインウィンドウをスクロールしたときに画像のスクロールの速度をそれとずらすとParallax という効果なんですがそれがあたるプラグインのダウンロードとそれから script 要素に対する読み込みのご説明をしましたbody 要素の の直前ということにぜひ気を付けてください

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

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

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

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

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