jQueryプラグイン活用講座

簡単なスクリプトで画像をアニメーションさせながら並べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なスクリプトで、読み込んだ画像をアニメーションさせながらタイル状に並べます。
講師:
03:41

字幕

このレッスンでは 読み込んだ画像をアニメーションさせながらタイル状に並べてくれるプラグインstalactite を簡単なスクリプトで実行してみたいと思いますまず jquery の読み込みこれはネットワークからcdn で読み込んでいますそして stalactite のライブラリのファイルjquery.stal-actite.min.jsこれも script 要素で読み込んでありますがコードはまだ何も書いていませんJavaScript コードはこれから書きます画像を並べてくれるという機能ですから画像はすでに7つほどimg で設定してありますそれを div 要素で囲んであってid に container とありますこの id を stalactite のJavaScript コードを記述するときに使いますでは 今現在何も設定をJavaScript で行っていない状態ですけれどもどういうふうになっているか確認しておきましょう「ファイル」から「ブラウザーでプレビュー」します画像が並んでいるだけですね何かこの辺余白ありますが丈が短いと後 この5つはサイズが揃っていますけれども最初の図と最後だけちょっと短めなんですねこれを stalactite を使うとどういうふうに並べてくれるか後で確認してみましょうjquery のJavaScript コードをこの script 要素の中に書き込んでいきますまずは jqueryお約束事ですね読み込んだら実行したいドキュメントの準備が整ったら実行したいという場合には$(function() {}); とこの({})中に書いていけばいいということですねここに stalactite の実行コードを書きますまずは selector です先ほど言いました通りこの container というid を使いたいと思いますですから “ の# 2桁とも一体しますけれどもcontainer ですねこれで selector ができましたそして実行はメソッド stalactite という名前そのまま使えばいいんですが鍾乳石という意味らしいですねあまり普通使う単語じゃないですよね日本語でも打ち間違うといけないのでこっからコピーしちゃいましょうちょっとズルをしてしまいますそして (); ということでこれでも動いてしまいます保存しましょうブラウザウィンドウをリロードするとこの画像の並べ方をstalactite が変えてくれますデフォルトでは普通この下端が揃った形になりますねではこれがどう変わるか リロードしましょうアニメーションも付きますちゃんと詰めてくれるんですねきれいに並びました先ほど下にはみ出ていたものがちゃんとこのウィンドウの中に納まっていますこのレッスンでは読み込んだ画像にアニメーションを付けながらタイル状に並べてくれるjquery のプラグインstalactite の簡単な使い方についてご説明をしましたまず img 要素をdiv 要素で囲んでおいてそこに付けた idこれを selector としてstalactite というこのライブラリの名前を読んで ()これでおしまいということです非常に簡単ですね

jQueryプラグイン活用講座

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

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

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

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

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