2018年09月2日(日)
画面を斜めに分割して2つの動画を表示する
Result
See the Pen Two videos separated diagonally by kachibito (@kachibito) on CodePen.
画面を斜めに分割して動画を2つ同時に再生するサンプルですcss
body { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; background-size: cover; overflow: hidden; } .clip-video { clip-path: polygon(99.9% 0, 0 99.9%, 0 0); } .clip-video-reverse { clip-path: polygon(100% 0.1%, 0....
0
31
16
27author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
3. Yahoo!プロモーション広告「スポンサードサーチ」に出稿する方法
NEXT ›
手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『画面を斜めに分割して2つの動画を表示する』についてまとめています。
この記事は特にjQuery・動について書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
