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

字幕

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