jQueryプラグイン活用講座

stalactiteのダウンロードと設定

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

ぜひご覧ください。

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

字幕

このレッスンでは読み込んだ画像をタイル状にアニメーションを付けながら並べてくれるプラグインstalactite のダウンロードと設定についてご説明しますまずこのページなんですけれどもGoogle で検索するときはjquery ですねキーワードの1つプラグインですからそしてこの名前鍾乳石という意味らしいんですがstalactite ということで検索するとトップにこのページが表示されますちょっと今動きが見えましたねどんなふうに画像をアニメーションさせてくれるかというともう少し真ん中あたり見たほうが良いと思うんですがこの辺でリロードします下からこうジャンプするように画像が表示されてしかもタイル状にきれいに並べられていますねこれをやってくれるのがstalactite ですダウンロードはページトップに戻ってこのボタンですねこれでダウンロードができるんですが環境によってはファイルを開いてしまうことがありますJavaScript のファイルは結局 txt ファイルですからブラウザで開くことはできるんですけれどもこれではちょっと具合が悪いですね最もこのまま保存をすれば大丈夫ですファイルを保存ということで名前がちゃんと正しいことを確認した上でしかるべき場所に保存しますあるいはちょっと気になる方は戻りまして右クリックで「リンク先を別名で保存」というふうにすると目的の場所にダイレクトに保存ができます通常ダウンロードした後 展開してそれを作業用のフォルダのライブラリ用のフォルダに入れるということが必要なんですがこうしてしまえば 保存先を普通はこの「ダウンロード」の場所に保存されるんですが自分の目的の作業用のフォルダを見つけてこの lib というフォルダの中にライブラリを入れるとsample.html これが作業用の練習用のファイルなんですがlib というフォルダにJavaScript ファイルは入れたいと思いますので「保存」とすればこれでもうダウンロードとそれからライブラリのフォルダへの保存もできてしまったということになりますDreamweaver で練習用のsample.htmlHTML ドキュメントを開きましたjquery のプラグインですからまず jquery を cdnネットワークから読み込んでいますそしてここに先ほどダウンロードしてかつlib フォルダにコピーしたプラグインのファイルを読み込みますsrc ソースですねそして「参照」を押してlib に保存したjquery.stala-ctite.min.js とこれを選んで開きますそしてタグを閉じると保存をしましょう実際では body に画像ファイル img 要素をどんどん入れていかなければいけないんですがこれで stalactite を使う準備が整ったということですね後は body に画像ファイルやテキストを書き込んでいってそしてこの script 要素の中にjquery のJavaScript コードを書いていくということになりますが準備はこれで整ったということですこのレッスンでは画像を読み込みながらアニメーションさせて並べてくれるプラグインstalactite のダウンロードとそれから script 要素の読み込みについてご説明しましたダウンロードはこのボタン右クリックが都合が良さそうですねそしてプラグインのライブラリのファイルをしかるべき場所に保存したらscript 要素でそのライブラリのファイルjquery.stalactite.min.jsを読み込むとこれで準備ができるということです

jQueryプラグイン活用講座

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

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

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

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

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