CSSのアニメーションで動かしたSGVアニメーションをスクロール連動させてみました！
複数ページにも対応しています。
今回の困った問題点
SVGをアニメーションする時に各パーツにクラスを作成しアニメーションさせた場合、画面読み込み時にCSSも読み込まれ、ページの表示と同時に再生されてしまいページの下部で動いているはずのアニメーションを見ることができず困りました。
せっかくアニメーション作ったのに表示される頃には動き終わってるなんて悲しすぎる…
今回の目的
CSSで指定したSGVアニメーションをスクロールと連動させて画面内に入った時に動かしたい。
やっぱり動きを見て欲しいのでスクロール連動させたら良いんじゃなかとおもいました！
解決方法
Jqueryを使いスクロール位置を取得、指定したクラスがスクロールで画面内に表示された時に要素を表示し、SVGに指定したCSSアニメーションを動かす。
demoを作ったよ！スクロールしてみてね。
コピペ用タグ
HTMLはこんなかんじです。
<div class="div__scroll_page_1">
<!-- 1つめのアニメーション -->
<div class="svg_1">
<div class="svg__anime">
<svg>
<g>
<circle class="st0 svg__anime-2" cx="215.4" cy="161" r="12.5"></circle>
</g>
</svg>
</div>
</div>
<!-- 2つめのアニメーション -->
<div class="svg_2">
<div class="svg__anime">
<svg>
<g>
<circle class="st0 svg__anime-2" cx="215.4" cy="161" r="12.5"></circle>
</g>
</svg>
</div>
</div>
<div class="svg_3">
<div class="svg__anime">
<svg>
<g>
<circle class="st0 svg__anime-2" cx="215.4" cy="161" r="12.5"></circle>
</g>
</svg>
</div>
</div>
<div class="svg_4">
<div class="svg__anime">
<svg>
<g>
<circle class="st0 svg__anime-2" cx="215.4" cy="161" r="12.5"></circle>
</g>
</svg>
</div>
</div>
<div class="svg_5">
<div class="svg__anime">
<svg>
<g>
<circle class="st0 svg__anime-2" cx="215.4" cy="161" r="12.5"></circle>
</g>
</svg>
</div>
</div>
</div>
後からJSで使うクラスはこの３つです。
div__scroll_page_1…この範囲内の
svg_1…このタグが見えたらsvg_1にonを追加して
svg__anime…CSSで非表示にしていたを表示するよ。
さて、今回はJqueryを使うのでcdnでJqueryを読み込んでおきましょう！
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
JSはスクロールで要素が表示された時にclassを付与するものと
指定のclass名が表示されたらclassを付与する対象を選ぶもの２つを宣言します。
// スクロールで要素が表示された時にclassを付与する
function add_class_in_scrolling(target) {
var winScroll = $(window).scrollTop();
var winHeight = $(window).height();
var scrollPos = winScroll + winHeight;
if(target.offset().top < scrollPos) {
target.addClass('on');
}
}
//スクロール連動アニメーション
$(window).on('load scroll', function() {
if($('.div__scroll_page_1').length) {
add_class_in_scrolling($('.svg_1'));
add_class_in_scrolling($('.svg_2'));
add_class_in_scrolling($('.svg_3'));
add_class_in_scrolling($('.svg_4'));
add_class_in_scrolling($('.svg_5'));
}
});
JSはHTML内の<script>〜</script>と書いてもanime.js等名前をつけて別に読み込んでもOKです。
コピー
// スクロールで要素が表示された時にclassを付与する
function add_class_in_scrolling(target) {
var winScroll = $(window).scrollTop();
var winHeight = $(window).height();
var scrollPos = winScroll + winHeight;
if(target.offset().top < scrollPos) {
target.addClass('on');
}
}
//スクロール連動アニメーション
$(window).on('load scroll', function() {
if($('.div__scroll_page_1').length) {
add_class_in_scrolling($('.svg_1'));
add_class_in_scrolling($('.svg_2'));
add_class_in_scrolling($('.svg_3'));
add_class_in_scrolling($('.svg_4'));
add_class_in_scrolling($('.svg_5'));
} else if($('.div__scroll_page_2').length) {
add_class_in_scrolling($('.svg_1'));
add_class_in_scrolling($('.svg_2'));
add_class_in_scrolling($('.svg_3'));
add_class_in_scrolling($('.svg_4'));
}
});
if文で別のクラスを指定して、スクロール連動する場所を増やすことが出来ます。
CSSでは.svg__animeを最初非表示にしておいて、.onクラスが付いた時に表示しています。
.svg__anime {
display: none;
}
.on .svg__anime {
display: block;
}
CSSアニメーションのサンプルです。アニメーションは好きな動きをつけてくださいね！
/*/////////////////////////////////////////////////
//svganimation
/////////////////////////////////////////////////*/
@-webkit-keyframes bound {
0% {
fill: transparent;
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
80% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
100% {
fill: #7d98ce;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bound {
0% {
fill: transparent;
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
80% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
100% {
fill: #7d98ce;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.on .svg__anime-2 {
-webkit-animation: bound 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
animation: bound 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}
ソースコードダウンロード
DEMOと同じサンプルをまとめました。
| ファイル名 | 説明 |
|---|---|
| app.js | JSファイルです |
| index.html | HTMLファイルです |
| style.css | CSSファイルです |
| style.min.css | CSSのminファイルです |
| style.scss | SASSファイルです |
動かない時はコメントでお声がけください！
同じ悩みを抱えている方の問題が解決するといいなぁ。