画像と動画を混合させて表示VEGAS
投稿日:2017年11月8日 更新日:
動画も一緒に表示させる方法
動かしてみた方法は以下の通りです。
1.先に動画を表示して、次に画像を表示する方法
jQuery(document).ready(function(){ jQuery('.top-img').vegas({ overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png', transition: 'fade', transitionDuration: 4000, delay: 10000, animation: 'random', animationDuration: 20000, timer: false, slides: [ { video: { src: [ 'https://○○○.com/wp-content/themes/△△△/images/☆☆1.mp4', ], loop: true, mute: true } }, { src: 'https://○○○.com/wp-content/themes/△△△/images/□□1.jpg'} ] }); });
2.先に画像を表示して、次に動画を表示する方法
jQuery(document).ready(function(){ jQuery('.top-img2').vegas({ overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png', transition: 'fade', transitionDuration: 4000, delay: 10000, animation: 'random', animationDuration: 20000, timer: false, slides: [ { src: 'https://○○○.com/wp-content/themes/△△△/images/□□1.jpg'}, { video: { src: [ 'https://○○○.com/wp-content/themes/△△△/images/☆☆1.mp4', ], loop: true, mute: true } } ] }); }); 上記2通りを簡単に説明します。 わかりやすくするため、ほとんど同じような設定にしていますが、 指定しているクラス名を間違えないように、.top-imgと.top-img2に分けています。 前回の記事でも書きましたが、このクラス名は自分の好きな覚えやすい名前でOKです。 overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png',
については、うっすらと黒がかかったようにしていますので、お好みでpngファイルを変更するか、外してください。
あとは、動きの好みによって、fadeにするのかslideにするのかを決めてください。
気をつけなければいけないのが、jQuery系などのプラグインは、ブラウザによってやバージョンによって動かないこともあります。
また、PCでは動くが、スマホでは動かないこともよくあります。
逆にいえば、プラグインなどの利用、または容量の大きい動画や画像でスマホの表示速度が遅くなるよりは、スマホの場合は画像だけ見せる方法も良いかも。
そういった切り替えのための記述を加えることによってきれいなサイトが作れるかも。
ここまできたら条件分岐までやってみよう!
スマホとPCの条件分岐でVEGASを切り替える方法
次は、スマホとPCの条件分岐でVEGASを切り替える方法をやります。
前回の記事はこちら→VEGAS BACKGROUND SLIDESHOWの使い方
関連記事
-
-
WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示
【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …
-
-
SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …
-
-
Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力
いろいろ試してみた結果、やっとできたので覚書として記事にしました。 カスタムフィールドのカテゴリー画像作成 Advanced Custom Fieldsのプラ …