<!--▼▼▼▼▼ここから「動画スライドショー」--> <div id="mainimg"> <video muted playsinline></video> <video muted playsinline></video> <video muted playsinline></video> </div> <!--▲▲▲▲▲ここまで「動画スライドショー」-->
フォルダ名の末尾が「_movie3」となっているタイプは3枚の動画で構成された動画スライドショーです。枚数変更可能。
フォルダ名の末尾が「_movie1」となっているタイプは1枚の動画のみが表示されるタイプ。
ファイル名の末尾が「_slide」となっているタイプは3枚の写真で構成されたスライドショーです。枚数変更可能。
例えば、1枚の動画のみのテンプレはtp_lp3_biz_movie1のみですが、このメイン画像を他のタイプに使いたい場合などの説明です。
使いたいメイン画像のフォルダに入っているcss/mainimg.cssと、js/main.jsを上書きし、該当箇所のhtmlコードをコピペすれば使えます。
素材そのものも必要なので、「とりあえず動作確認だけ」という場合は素材もテンプレから移動して下さい。
cssフォルダの「mainimg.css」と、jsフォルダのmain.js内の「動画スライドショー」にあります。
スマホ撮影した状態だと容量が大きかったり拡張子がmp4ではなかったりする場合があるので、その際はマニュアルを読んで動画を編集して下さい。
動画の容量が大きすぎるとスライドショーの動作に問題が出る可能性があります。
mainimg.cssの
transition: opacity 0.5s ease;
の0.5で変更できます。
main.jsの「動画スライドショー」内にある、
}, 4000); //4秒ごとにスライド
の4000の数字で変更できます。
切り抜かれてもおかしくない動画を使って下さい。
main.jsの「動画スライドショー」内にある、
'1-tate.mp4','2-tate.mp4','3-tate.mp4'
の行は縦画面用。
'1-yoko.mp4','2-yoko.mp4','3-yoko.mp4'
の行は横画面用です。
どちらも同じ動画でいい場合はファイル名を両方揃えておけばOKです。
main.jsとhtml側にそれぞれ以下のように追加して下さい。動画ファイル名は任意のもので構いません。
'1-tate.mp4','2-tate.mp4','3-tate.mp4','4-tate.mp4'
'1-yoko.mp4','2-yoko.mp4','3-yoko.mp4','4-yoko.mp4'
<!--▼▼▼▼▼ここから「動画スライドショー」-->
<div id="mainimg">
<video muted playsinline></video>
<video muted playsinline></video>
<video muted playsinline></video>
<video muted playsinline></video>
</div>
<!--▲▲▲▲▲ここまで「動画スライドショー」-->
以下からお好きな動画をDLして入れ替えて頂いてもOKです。
このテンプレートの配布時点ではまだ数は少ないのですが、今後どんどん追加予定です。
>> 無料の動画素材