jQueryプラグイン活用講座

簡単なコードでスクロールする画像にパララックス効果を与える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なコードで、スクロールする画像にパララックス効果を与えます。
講師:
06:01

字幕

このレッスンではスクロールする画像にParallax の効果を与えるプラグインParallax-ImageScrollを使って簡単なコードでその Parallax の効果を与えてみたいと思います今 Dreamweaver で開いているHTML ドキュメント練習用のsample.html なんですが効果を確認するためのテキストとか画像が入っていますそして jquery のプラグインですからjquery を読み込む必要がありますscript 要素で cdn でjquery のライブラリを読み込んでいますそれから Parallax-ImageScroll のライブラリはの前に読み込みますjquery.imageScroll.min.jsということで読み込んでいますただスクリプトはまだ書いていませんJavaScript コード このscript 要素の中に書く予定なんですがまだコードは書いていない状態ですテキストと画像が配置されています現在の状況を確認しましょう「ファイル」から「ブラウザーでプレビュー」します画像が配置されていて当たり用のテキストなんですけれどもテキストがあって 画像があってということになっていますこれに Parallax の効果を加えようということなんですねでは HTML ドキュメントの方に戻りましょうParallax-ImageScrollを使うにはJavaScript コードを書くだけではなくてbody 要素の中の要素にも少し変更を加える必要があります画像は通常 img の要素で読み込むんですけれどもこれを div 要素に書き換えますdiv ですね全部で画像は3つありますdiv 要素は閉じる必要がありますので順番に閉じておきましょう2つ目そして3つ目ですそして div 要素になりますとsrc のタグというのはおかしいですねここも Parallax-ImageScroll 向けに書き換えます特別な要素になるんですけれども属性名は data- で始まるんですがその後に image と付け加えますこれをコピーしましょうコピーをして 2つ目ペーストですそして3つ目これもペーストしますあと width と height ですねこちらも先頭にdata- を付けることになりますdata- という特別な接頭辞なんですけれどもこれを height の方にも付けていきますあと4カ所ですね1カ所 2カ所コピーをみんな付けていきますwidth と heightこれで body 要素の書き換えは済みましたそしたら JavaScript コードを書き加えていきますjquery ですからドキュメントが読み込まれたら実行するというのが お約束の書き方です$( の後に function() {}そして ) を閉じて ; です見やすいよう に} を改行しておきましょうそしてこの中でParallax-ImageScrollの読み込みを行いますさて すべての今 div 要素に換えましたけれども画像が配置される要素ですねそこには class としてimg-holder というclass が共通に指定してありますこれを使いますこれを selector で指定しますので$(". の後に classimg-holder“).そして それに対して呼び出しはimageScroll ですデフォルト設定で行きますので() の中には何も指定しなくて構いませんこれを保存してブラウザで確かめましょうブラウザウィンドウをリロードしますそうすると写真は全体に広がるんですけれどもスクロールしていきましょうスクロールするとそのスクロールの大きさよりも画像は少し遅れてスクロールするような感じですねこれが Parallax の効果ですまた上がっていきますけれども示唆効果ともいわれますけれどもウィンドウのスクロールと画像のスクロールの少し食い違いがあるという面白い効果ですこのレッスンではプラグインParallax-ImageScrollを使って簡単なコードで示唆効果Parallax の効果を与えてみましたそのやり方としてはまず HTML ドキュメントのbody 要素の方ですね画像は div にして共通の class を設定しますそして src でなくてdata-imageそれから width はdata-widthdata-height ということで書き換えることになりますそれからプラグインの読み込みscript ですねscript 要素は必ずの前に置きましょうその上でJavaScript コードの方はscript 要素の中にjquery の初期化のfunction の中にclass(img-holder)を指定した上で selectorに対してimageScroll というメソッドを() の中には何も行わなくて結構ですので呼び出します

jQueryプラグイン活用講座

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

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

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

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

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