jQueryプラグイン活用講座

YouTube動画の追加とアニメーション時間の設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
並べる要素にYouTube動画を加え、アニメーションの時間を調整します。
講師:
04:45

字幕

このレッスンではプラグイン stalactite でアニメーションをさせながら並べる要素の中に 動画を加えたいと思いますその上でアニメーションの速さも調整してみましょう今既に基本的な stalactite の呼び出しはできていますこのプラグインを使うにはimg 要素を並べてそれを div 要素の子供に収めるid で containerというふうに設定してありますそうしたら selector でそのcontainer というid を指定した上で命令はライブラリと全く同じstalactite() の中に何も入れなくてもデフォルトでアニメーションが行われます今のアニメーションを確認しておきましょう「ファイル」から「ブラウザーでプレビュー」しますこれがデフォルトのアニメーションですねこの中にもう1つ要素としてYouTube の動画を加えたいと思います加える動画なんですがlynda.jp には YouTube の公式チャンネルがありますこの1番下なんですけれどもクリックするとYouTube の公式チャンネルのページが開きますその中で私が担当したものでflash があるんですけれどもflash の画像ですこれをページに埋め込みたいと思いますとりあえず 画像は映像は後で見るとしてこの「共有」ですねそして「埋め込みコード」でiframe の埋め込みができますこれをコピーしておきますそして HTML ドキュメントsample.html ですねその id div 要素id が container ですねそこに img と並べて今のコピーしたものをペーストしますサイズが幅 560ちょっと大きいですね他のものは全部幅が 320 になっているので揃えたほうが綺麗でしょう320 にしますそうすると高さは 180 ということで保存をして確認してみましょうブラウザウィンドウをリロードしましょう要素が1つ増えていますので並ぶものが増えますねリロードです出てきましたやっぱりちょっと映像ですと読み込みに時間がかかるようです再生してみますこのレッスンではインスタンスのマウスクリックでそのインスタンスのアニメーションを開始してみますこれぐらいでいいでしょうちゃんと幅を揃えた上で綺麗に並びましたこのように stalactite では映像も含めてタイル状に並べてくれるわけです幅を揃えるなど 少しデザインには工夫したほうが良いと思います今度はstalactite のオプションでアニメーションの時間を少し延ばしてみましょうオプションはこのstalactite の呼び出しの() の中にオブジェクトを渡しますオブジェクトを入れる変数をsettings というふうに定義をしてみましてオブジェクトですから{}; ということでオプションを並べたときに見やすいように改行しておきましょうそして忘れないうちにこの settings をstalactite の呼び出しの引数にコピーして加えますアニメーションの時間ですdurationそして単位はミリ秒ですから1000 で1秒ですね1秒 先ほどより少し長くなるはずですので1秒としてみましょうそして保存をします確認しましょうブラウザウィンドウをリロードします少しアニメーションがゆっくりになったはずですアニメーションしながら α が変わっているということも これで気付きますねゆっくりと上に上がってくるというアニメーションになりましたこのレッスンでは stalactite で並べる要素の中にYouTube の動画を含めてみましたYouTube 動画のiframe を含めてもちゃんと並べ替えの中に入れてくれるということですねそしてもう1つ アニメーションの時間オブジェクトの中にduration というプロパティで数字をミリ秒で指定しstalactite の呼び出しの引数に加えればいいということでした

jQueryプラグイン活用講座

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

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

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

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

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