こんにちは。ミーハーです!

ショートムービーを投稿するサイトを作ってみました。

動画をhover(ホバー)することによって、動画が再生されるようにjavascript(jQuery)で制御しています。

ツネキッチンのサイト
ツネキッチンのサイト

製作の動機

ツネキッチン動画投稿サイトを作るため

製作内容

使用言語

  • html
  • scss
  • jQuery
  • php

作業時間

約3日

難易度

★★★★☆☆☆☆☆☆

jQueryのコードは簡単ですが、scssのスタイルに時間を費やしました。

コード(jQuery)

const post= $(‘.post’); 
const video= $(‘.video’);

const post_num = post.length;
for (let i=0; i<post_num; i++) { 
video[i].pause();
}
post.hover(
function(){ 
video.get(post.index(this)).play(); 
video.get(post.index(this)).loop = true;
}, 
function(){     
video.get(post.index(this)).loop = false;
}

上2行の変数の詳細は、html参照

ツネキッチンのサイト
ツネキッチンのサイト

納豆大好きなので、納豆料理ばかり作っています。
見たことない、料理をこれから作っていきたいと思います。