jQueryプラグイン活用講座

簡単なコードでスクロールする画像をクロスフェードする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なコードで、スクロールする画像をクロスフェードします。
講師:
06:25

字幕

このレッスンでは ウィンドウのスクロールに応じて画像をクロスフェードするcrossfade.js の簡単な使い方についてご説明します最小限のコードで crossfade.jsを動作させてみますまず 今Dreamweaver で開いているのは練習用の HTML ドキュメントsample.html ですそこには jquery のライブラリはもちろんcrossfade.js のライブラリもcrossfade.jquery.js読み込んでありますけれどもまだコードは書いていませんそれから レイアウトなどの簡単なスタイルがスタイルシートに定義されていて後は 画像が2点あってテキストがありますこの1点目の画像についてクロスフェードの設定をしたいと思いますまず今 画像が2点入ってテキストも入っていますのでどんな状況なのか 現在の状態をブラウザで見てみましょう「ファイル」で「ブラウザーでプレビュー」です画像があってテキストがあってこの下にも画像があってテキストがあるとまぁ ごく普通のレイアウトですねこの1枚目の画像ですこれを スクロールするとウィンドウをスクロールしたときにクロスフェードするようにcrossfade.js のコードを書き加えていきたいと思いますHTML ドキュメントに戻りましたJavaScript コードを書く前にbody 要素の中の要素に少し変更が必要です画像は通常img の要素で表示するんですがcrossfade.js を使うためにはこれを div に書き換えますということは div を閉じなければいけないということでこの h1 要素の後で div を閉じますそして class は image と後using-data という2つのクラスが設定されているんですがこの using-data を後でcrossfade.js で使いますそして src これはimg 要素ではなくなりましたので違う要素の記述に書き換えますdata- で始まりますそして crossfade-start とstart とあるということは endこれ両サイドですから 2つ必要ですよねということなので これコピーしましょうコピーをして そしてスペース込みでコピーしましたのでペーストしますdata-crossfade-当然ここは end ですねend としますファイル変えないとクロスフェードになりませんのでファイルは photo_04ていうのがありますので04 に変更しますこれでまず body タグの方の修正は終わりました今度は JavaScript コードを書きますjquery のコードですjquery で初期化のコードですねdocument 読み込み終わった後これはもうお約束です$(function() {} とそして ) を閉じて ;ここはお約束ですねこの中で crossfade.js を呼び出しますまず セレクタを設定するんですがこれは先ほど言いました通りusing-js これをセレクタに指定したいと思います". で using-js") を閉じてそして読み込みですねこれは crossfade というこの プラグインの名前そのまま使いますタイプミスすると嫌なのでコピーしちゃいますそして () で () の中にはデフォルトでよければ特に指定する必要はありませんセレクタが違っていますねusing-js ではなくてそれはこっちなのでusing-data の方ですコピーして念のため ペーストしましょうこれで保存します保存して ブラウザで確かめましょうブラウザをリロードします写真のサイズが変わりますのでご注目くださいリロードボタンを押します横に広がりましたねそしてスクロールをすると写真が変わります下の方の写真はこれは設定はしていないので変わりませんけれども上の写真はこの電車ですね路面電車この写真から これは橋なんですけれども橋の写真に変わりますあともう1つこのcrossfade.jsこれは div 要素の中に入っていたテキストですそれが css の設定でposition を absolute にしてありますのでそうすると 画像の上に重ねた形で表示することができます今 画像の上に重なっていたcrossfade.js というのはこのテキストですh1 要素になっていますねそしてこれを div タグで囲んでありますcss の方はこちらなんですけれどもh1 の position がabsolute になっているということですこのレッスンでは 画面のスクロールに応じて画像をクロスフェードする プラグインのcrossfade.js の簡単なコードで動作させるということについてご説明しましたまず タグの方なんですけれどもdiv 要素で設定をするとimg から div に書き換えてclass を設定しておきますそして src に相当するんですけれどもdata-crossfade-startそこに クロスフェードの初めの画像のパスを指定し同様にdata-crossfade-end にクロスフェード後の画像を指定しますそして スクリプトの方は jquery の初期化の関数の中でclass をセレクタに指定してcrossfade()デフォルトであればこれで動作するということです

jQueryプラグイン活用講座

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

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

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

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

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