jQueryプラグイン活用講座

crossfade.jsをJavaScriptで設定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
crossfade.jsの設定をJavaScriptコードで行います。
講師:
06:56

字幕

このレッスンでは ウィンドウのスクロールに応じて画像をクロスフェードするプラグインcrossfade.js の設定をJavaScript コードで行ってみます今 crossfade.js はプラグインとして読み込まれていてそれから div 要素の設定がされていますclass が定められていてdata-crossfade-startでクロスフェードの初めの画像ですねそれから end で終わりの画像が指定してあってそれから簡単なJavaScript のコードですけれどもjquery の初期化の時に先ほどの class をセレクタにしてcrossfade()これで デフォルト状態でクロスフェードを起動することができますこの2つの写真をクロスフェードで切り替えるとスクロールに応じてですねここまでの設定はできていますまず現在の状態を確認しましょう「メニュー」ファイルから「ブラウザーでプレビュー」しますこの 上の画像が先ほどクロスフェードの設定がしてあったものでスクロールをすると今 橋の画像なんですが路面電車に切り替わります下の画像には設定をしていませんので切り替わりはしませんこの画像についてのクロスフェードをJavaScript コードで設定したいと思いますHTML ドキュメントに戻りました2つ目の画像はこの img 要素ですcrossfade.js でコントロールするにはimg ではだめなのでdiv 要素にしますそして属性で書く場合にはこのように指定をするんですが今回は JavaScript コードですべて設定しますのでこの src もろとも消してしまいますそして div タグは閉じる必要がありますのでここで閉じますh1 要素で文字image が入っていますこれは 画像の上に表示するようにcss の設定がしてありますでは、この classusing-jsこれに対してクロスフェードの呼び出しをしましょう設定もする必要があるので設定はオブジェクトで行いますオブジェクトは settings という変数に入れることにして{} の中に設定を書き込んでいきます改行した方が見やすいので改行しましてまずこの start と end に相当する指定をしなければいけませんちょっとコピーしちゃいましょうその方が失敗が少なそうですコピーして持っていきますもちろんオブジェクトですから= ではないですね: ですstart というプロパティで初めの画像のパスを入れますそして 同様に今度は end ですこれもコピーしちゃいましょうコピーをしてペーストしますプロパティは end ですそしファイルは こちらが1から4になって-いるんですが 2から3にしましょう後 オブジェクトはプロパティは , 区切りですそして これもコピーしてしまいましょうかコピーをしてペーストしますusing-data でなくてusing-js ですねまぁ ここはコピーをしなくても打ち間違いないでしょうjs として この settingsという オブジェクトを引数として渡せばこの設定が活かされてクロスフェードが行われますでは保存しましょうブラウザのウィンドウをリロードします1枚目の画像は これは元から設定はできていましたね路面電車に変わりますそして この時計台の画像なんですが上の方にスクロールしていくとちょっとずつ変わって何か建物になりましたねこの下には画像はないので また戻しますでも切り替わった画像が何なのかと時計台は分かるんですけど時計台から何か建物っぽいんですがこの辺まで来ないとイメージがはっきりしませんねこの切り替わるスピードを やはりクロスフェードの呼び出しに渡すオブジェクトの中にプロパティとして指定することができますのでそれを加えましょうクロスフェードのメソッドの呼び出しに渡しているこの settings ですねこのオブジェクトに追加しますオブジェクトはプロパティを, 区切りですからそして threshold とこれ しきい値というふうに日本語で訳されてちょっと分かりにくいんですけどどれぐらい速く切り替わるかという設定になりますどれぐらい速くというかどれぐらい動かしたらどんどん切り替わっていくかということなんで数字が小さいほど速いですデフォルトは 0.5 なんですが0.2 にしましょうそうすると ちょっと動かしただけでもどんどん変わっていくということになりますではこの設定でファイルを保存してブラウザで確かめましょうブラウザウィンドウをリロードしますもちろん1枚目は変わりませんけれどもこの時計台ですねこの辺から変わってきますのでちょっと動かしただけでも随分変わりますねですからこの状態であぁ もうこんな感じのアーチの柱がある建物なんだなということが分かるでしょうまた戻しますさっ、と変わっちゃいますねこのレッスンでは ウィンドウのスクロールに応じて画像をクロスフェードするプラグインのcrossfade.js をJavaScript コードで設定しましたこの場合には まず要素は div 要素で設定しておく必要があるんですけれどもそして class を定めておけば後は指定はいりませんすべて JavaScript コードの方で指定をするということですねその class のセレクタに対してクロスフェードのメソッドを呼び出すんですがその時にオブジェクトを渡します渡すオブジェクトの中でstart と end の画像のパスこれは必須ですけれどももう1つオプションとしてどれくらい速く切り替わるかというthreshold という指定をして練習をしてみました

jQueryプラグイン活用講座

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

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

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

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

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