Result
動画をあらかじめ再生しておいて一部だけ見せる事でユーザーに動画閲覧を促す、みたいなやつ
JavaScriptはYoutubeのミュート等に使用しているものでUIには使用していませんので基本的にはCSSのみで実装されています
コードはちょっと長いのでCodepenをご参照ください。clip-pathとtransitionが鍵となります
html
<div class="wrapper"> <input type="checkbox"> <div class="video"><div id="youtube"></div> </div> <div class="text"> <span data-text="動画を見る"></span> </div></div> |
