javascript SVG

YouTube + SVG Filter + Lazy Line PainterでSVGアニメーション

2015/04/08

ちょっと気になって、YouTubeをiframeで全画面に埋め込み、それに対してSVG Filterを使ってマウスオーバーでブラー処理をし、あわせてマウスオーバー時にLazy Line Painterで作ったSVGをアニメーションさせてみる。さすがにこれだけ詰め込むと処理が不安定。

======================================
YouTube + SVG Filter + SVG animation DEMO (chrome推奨)
======================================

以下手順

YouTube動画をifameで全画面で埋め込む

html

<iframe id="wrapper" width="560" height="315" src="https://www.youtube.com/embed/L-Rz2ZUS2mI?controls=0&showinfo=0&autoplay=1&rel=0&loop=1&playlist=L-Rz2ZUS2mI" frameborder="0" allowfullscreen>
</iframe>

css

#wrapper {
display:block;
position: fixed;
left: 0;
top: 0;
min-width:100%;
min-height:100%;
z-index:-100;
}

YouTubeをループ/自動再生させるために、パラメーターにloop=1&playlist=動画IDを記述。動画IDとはYouTube動画ページのアドレスの「watch?v=」の文字列になります。

SVG Filterで動画にブラーをかける

html

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<filter id="myblur">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
</svg>

<iframe class="blur"  id="wrapper" width="560" height="315" src="https://www.youtube.com/embed/L-Rz2ZUS2mI?controls=0&showinfo=0&autoplay=1&rel=0&loop=1&playlist=L-Rz2ZUS2mI" frameborder="0" allowfullscreen></iframe>

css

.blur:hover {
filter:url(#myblur);
-webkit-filter:url(#myblur);
}

SVG Filterが画面全体に適応されるようにsvgタグのwidth、heightをそれぞれ100%にする。そしてマウスオーバー時にブラー処理が適応されるようにcssでhoverにブラーを設定。

参考:[SVG] filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法

Lazy Line PainterでSVGアニメーションを作成

イラストレーター等で作成したSVGファイルをLazy Line PainterでSVGアニメーションに変換。Lazy Line Painterで作成したデータを使用するに際して、jQuery、raphaelLazy Line Painterを読み込む。

html

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.lazylinepainter-1.5.1.min.js"></script>

そしてLazy Line Painterから吐き出されたデータをコピペし名前をつけて保存し(ここではsvg.js)、あわせて読み込む。

js

var pathObj = {
"seal": {
"strokepath": [
{
"path":
~ 途中省略 ~
"duration": 500
}
],
"dimensions": {
"width": 414,
"height": 179
}
}
};

$(document).ready(function(){

$('#seal').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 1,
"strokeColor": "#fff",
});

setTimeout (function(){
$('#seal').lazylinepainter('erase');
$(window).on('mouseover', function(){
$('#seal').lazylinepainter('paint');
}).on('mouseout', function(){
$('#seal').lazylinepainter('erase');
});
}, 2000);

});

html

<div id="seal"></div>

css

#seal {
width:414px;
height:179px;
position:absolute;
left:50%;
top: 50%;
margin: -89px 0 0 -207px;
}

jsのsetTimeout以下の部分でマウスオーバーでアニメーション開始、マウスアウトでアニメーション終了を設定して、一応YouTube読み込み時のタイムラグを考慮してなんとなく2秒間をsetTimeoutで処理を遅らせてみる。
で、できたものが以下。(上記のDEMOと同じもの)

======================================
YouTube + SVG Filter + SVG animation DEMO (chrome推奨)
======================================

ブラウザ対応としてはchromeはSVG FilterもSVG animationも動く。FirefoxではSVG Filterが動かない。IEではSVG FilterもSVG animationも動かない。SafariにいたってはSVG Filterが効いていないというか、そもそもYouTube自体が表示されない。chromeでもこれだけ色々とやっているせいか挙動が不安定。画面全体にSVG Filterで動画にブラーをかけているのが処理を重くしているっぽい。
ちなみに以下が上記のDEMOからSVG Filterをぬいたもの。

======================================
YouTube + SVG animation DEMO
======================================

上記DEMOだと、IEではSVGが表示されないがChrome、Firefox両方で動く。動作的には多少はSVG Filterのあるものより軽い。Safariでは相変わらずYouTubeがみれない。ちょっと調べてみたが、Safariでのiframeの挙動にちょっと問題があるらしく、原因はSVGではなくiframeがらみかなと思う。とりあえずその問題は一旦放置。


-javascript, SVG

© 2020 MUKOLOG