jQueryプラグイン活用講座

crossfade.jsのダウンロードと設定

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

ぜひご覧ください。

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

字幕

このレッスンでは ウィンドウのスクロールに応じて画像をクロスフェードするプラグインのcrossfade.js の設定とダウンロードについてご説明をします今見ているのが crossfade.jsのサイトなんですけれどもここには実際クロスフェードの設定がしてありますスクロールしてみましょうスクロールをすると こう ぼけてきますねこれは くっきりとした画像とぼけた画像を2枚をクロスフェードすることによってこういった効果を実現していますまずこのサイトなんですがcrossfade.js でGoogle 検索するのが良いでしょうまず jquery というキーワードを入れてそれから crossfade.jsということで検索をするとトップに このサイトが表示されますそして GitHub からダウンロードするんですがGithub に行くボタンがここにありますのでGitHub を表示しますそして右下の方に「Download ZIP」のボタンがありますからこれでダウンロードしましょうダウンロードして zip ファイルを展開したのが このcrossfade.js-masterというフォルダですライブラリは SRCソースのフォルダの中にあります通常ライブラリは .min という圧縮版が付いてくることが多いんですがこちらは .min のファイルはないようですこれを 実際に作業するフォルダのライブラリ用のフォルダに入れときましょう今回はこの sample.htmlこれが作業ファイルでlib というフォルダに入れることにしますここに コピーを持っていきますこれで ライブラリのコピーがlib フォルダに入りました練習用の HTML ドキュメントsample.html をDreamweaver で開きましたjquery のプラグインですからまず jquery は読み込んでおく必要がありますscript 要素 http からスタートしていますので cdn ですねネットワークからライブラリを読み込んできますこの後に やはり script 要素で先ほどコピーしたライブラリをプラグインを src の属性に指定しますこちらですねcrossfade.jquery.jsということで開きますタグを閉じましょうこれで準備は整いましたファイルは保存しますこのレッスンでは スクロールに応じて画像をクロスフェードするプラグインcrossfade.js のダウンロードと設定についてご説明しましたダウンロードはcrossfade.js のページの「View on Github」からZIP をダウンロードしますそして ライブラリ用のフォルダにcrossfade.js のcrossfade.jquery.jsこのライブラリを script 要素で読み込めば準備は完了です

jQueryプラグイン活用講座

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

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

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

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

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