svgアイコンが動く「useAnimations」の実装方法

実装手順

1.公式サイトからダウンロードする

useAnimations
ここには、ハンバーガーメニューやSNSアイコンなど、
あらゆるアイコンが無料で使用できます。

気になるアイコンにマウスオーバーすると、
Downloadボタンが出てきますので、それをクリックしてください。

2.ダウンロードしたzipから必要なファイルを抜き取る

zipの中には、

• svg

• json

の2種類が入っています。
静止しているアイコンが欲しい場合は、
svgをimgタグに普通に設置してください。

hoverやclickで動くようにするには、
svgは使わず、
jsonの方を使用します。

3.その他に必要なファイルを用意する

javaScriptで必要なもの

• jQuery
  公式は、jquery-3.3.1.min.jsを使用しています。

• lottie-player.js
  これ、どこから落としてくるのか分からなかったのですが、
  公式のjavaScriptを調べると、URLがこれになっていました。
  https://d33wubrfki0l68.cloudfront.net/js/6b61e0a7f8d311b0d8e7594ed9df369497d4dc9d/js/lottie-player.js
  ダウンロードし、自分のサーバーに入れて使用されるのが良いかと思います。
  （正規ルートからダウンロードする方法があれば、
  　教えていただけると有難いです。）

4.実装する

• Social media Instagram Facebookアイコン

• Navigation Menu V3（ハンバーガーメニュー）

の実装例です。

html

アイコンを入れたいタグの直ぐ上の親に、
クラス（anim-〇〇）を設定してください。

<!--インスタグラム、facebookアイコン（hover時）-->
<ul>
  <li class="sociallink"><a class="anim-icon-instagram" href="インスタグラムへのリンク" target="_blank" rel=”noopener”></a></li>
  <li class="sociallink"><a class="anim-icon-facebook" href="フェイスブックへのリンク" target="_blank" rel=”noopener”></a></li>
</ul>

<!--ハンバーガーメニュ（クリック時）ー-->
<button class='header-burger-btn anim-icon-menu-003'></button>

javaScriptライブラリ

body締めタグの直ぐ上に入れても動作します。

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="js/lottie-player.js" type="text/javascript"></script>

CSS

/*アイコンの大きさ変えたい時に入れてください-----------------*/
.sociallink a {
    height: 29px;
    width: 29px;
    display: block;
}
.sociallink svg {
    /*どちらかを100%,autoにする*/
    height: 100%;
    width: auto;
}

/*アイコンの色を変えたい時に入れてください-----------------*/
.header-burger svg * {
    stroke: #fff;
}

javaScript

javaScriptライブラリの後に入れてください。

//=========================
//  svg animation
//=========================
//絶対パス取得
//サイトに実装する際、相対パスだとページによってURLが変わる場合があるので、トップページURLを入れる
var homeUrl = 'サイトのトップページURLを入れる';

$(window).on('load',function(){

	//facebook(on hover)
	var iconFacebook = this.document.querySelector('.anim-icon-facebook');
	var animationFacebook = bodymovin.loadAnimation({
		container: iconFacebook,
		renderer: 'svg',
		loop: true,
		autoplay: false,
		path: homeUrl + "js/svg-animation/facebook.json"
	});
	animationFacebook.setSpeed(1);

	var directionFacebook = 1;
		iconFacebook.addEventListener('mouseenter', (e) => {
		animationFacebook.setDirection(directionFacebook);
		animationFacebook.play();
	});
		iconFacebook.addEventListener('mouseleave', (e) => {
		animationFacebook.stop();
	});

	//instagram(on hover)
	var iconInstagram = document.querySelector('.anim-icon-instagram');
	var animationInstagram = bodymovin.loadAnimation({
		container: iconInstagram,
		renderer: 'svg',
		loop: false,
		autoplay: false,
		path: homeUrl +  "js/svg-animation/instagram.json"
	});
	animationInstagram.setSpeed(1);

	var directionInstagram = 1;
		iconInstagram.addEventListener('mouseenter', (e) => {
		animationInstagram.setDirection(directionInstagram);
		animationInstagram.play();
	});
		iconInstagram.addEventListener('mouseleave', (e) => {
		animationInstagram.setDirection(-directionInstagram);
		animationInstagram.play();
	});

	//hamberger-button
	var icon6 = document.querySelector('.anim-icon-menu-003');
	var animation6 = bodymovin.loadAnimation({
					container: icon6,
					renderer: 'svg',
					loop: false,
					autoplay: false,
					path: homeUrl +  "js/svg-animation/menu-003.json"
	});
	animation6.setSpeed(1);

	var direction6 = 1;
		icon6.addEventListener('click', (e) => {
		animation6.setDirection(direction6);
		animation6.play();
		direction6 = -direction6;
	});

});

補足

1ページで複数箇所に設置したい場合

1ページに表示する数の分、javaScriptの記述も増やす必要があります。
例えば、facebookアイコンを2つ表示させたい場合は
以下のようにします。

	//1つ目の記述
	//上と同じ内容です
	//facebook(on hover)
	var iconFacebook = this.document.querySelector('.anim-icon-facebook');
	var animationFacebook = bodymovin.loadAnimation({
		container: iconFacebook,
		renderer: 'svg',
		loop: true,
		autoplay: false,
		path: homeUrl + "js/svg-animation/facebook.json"
	});
	animationFacebook.setSpeed(1);

	var directionFacebook = 1;
		iconFacebook.addEventListener('mouseenter', (e) => {
		animationFacebook.setDirection(directionFacebook);
		animationFacebook.play();
	});
		iconFacebook.addEventListener('mouseleave', (e) => {
		animationFacebook.stop();
	});

	//2つ目の記述
	//1つ目の記述と関数・クラスが被らないように名前を変更してください。
	//facebook(on hover) footer
	var iconFacebook2 = this.document.querySelector('.anim-icon-facebook--footer');
	var animationFacebook2 = bodymovin.loadAnimation({
		container: iconFacebook2,
		renderer: 'svg',
		loop: true,
		autoplay: false,
		path: homeUrl + "js/svg-animation/facebook.json"
	});
	animationFacebook2.setSpeed(1);

	var directionFacebook2 = 1;
		iconFacebook2.addEventListener('mouseenter', (e) => {
		animationFacebook2.setDirection(directionFacebook2);
		animationFacebook2.play();
	});
		iconFacebook2.addEventListener('mouseleave', (e) => {
		animationFacebook2.stop();
	});

上記以外の「useAnimations」アイコンを使いたい場合

上では、Instagram、Facebook、ハンバーガーメニューの実装方法をご紹介しました。
これ以外のアイコンを実装したい場合、
javaScriptの部分を、
公式の以下のファイルから、該当部分をコピペし、改造してください。
https://d33wubrfki0l68.cloudfront.net/js/e09b5e0935c0a09877e0cea70a5360d1dd4ce169/js/lottie-settings.js

IE11では動作しないよ

IE11では、

-- addEventListener('mouseenter', (e)

-- addEventListener('mouseleave', (e)

-- addEventListener('click', (e)

でエラーが出て、アイコンそのものが消えました!!!
ほんとやめてくれ。。。。

回避策として、
IE11では、静止SVGを入れるように条件分岐する方が早いと思います。。
回避策は、
IE11でエラーが出るjavaScriptを条件分岐で読み込まなくする方法
をご参照ください！