css3で回転(時計回り)

CSS3で2D右回転アニメーションしてみました。

.rote {display:block; width:100px;animation: rote 1.5s ease 0s infinite;}
@keyframes rote {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(-180deg);}
	100% {transform: rotate(360deg);}
}

回転します

-指定で逆回転です。

値を変更できます。

ease
linear
ease-in
ease-out
ease-in-out

右側は0sからイーズを持たせるかどうか。

infiniteは無限ループ

css3アニメーションで点滅

CSS3でアニメーションしてみました。

.flash {animation: flash 1.5s ease 0s infinite;}
@keyframes flash {
    0% {color:gley;}
    100% {color:blue;}
}

点滅

値を変更できます。

ease
linear
ease-in
ease-out
ease-in-out

右側は0sからイーズを持たせるかどうか。

infiniteは無限ループ

Youtubeの動画をlity.jsによって表示したあと関連動画を非表示にする

YOUTUBEに上がっている動画を共有で貼り付けることができます。

関連動画がうざいときは上記のチェック項目を入れると非表示にできます。

普通に動画を張るときはいいのですが、jqueryのlityを使用してモーダルウィンドウで表示させたいって時もあります。

Jquery lity

http://sorgalla.com/lity/

制作者はJan SorgallaさんでLicensed MITで提供されています。

簡単に実装でき便利なんですが、ひとつつまずいたところで、lityに関連動画非表示のパラメータ「?rel=0」をつけても関連動画が表示されてしまうのです。

そこで若干、パラメータを足させていただきました。

'https://www.youtube' + (matches[2] || '') + '.com/embed/' + matches[4],
$.extend({
rel:0,autoplay:1
},

上記の箇所のautoplay:1の前にrel:0,を追加しました。

サンプルはこちら

autoplayやrelを追加できるのでloopも追加できると思います。