実装手順
1.公式サイトからダウンロードする
useAnimations
ここには、ハンバーガーメニューやSNSアイコンなど、
あらゆるアイコンが無料で使用できます。
気になるアイコンにマウスオーバーすると、
Downloadボタンが出てきますので、それをクリックしてください。
2.ダウンロードしたzipから必要なファイルを抜き取る
zipの中には、
svg
json
の2種類が入っています。
静止しているアイコンが欲しい場合は、
svgをimgタグに普通に設置してください。
hoverやclickで動くようにするには、
svgは使わず、
jsonの方を使用します。
3.その他に必要なファイルを用意する
javascripで必要なもの
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><liclass="sociallink"><aclass="anim-icon-instagram"href="インスタグラムへのリンク"target="_blank"rel=”noopener”></a></li><liclass="sociallink"><aclass="anim-icon-facebook"href="フェイスブックへのリンク"target="_blank"rel=”noopener”></a></li></ul><!--ハンバーガーメニュ（クリック時）ー--><buttonclass='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
/*アイコンの大きさ変えたい時に入れてください-----------------*/.sociallinka{height:29px;width:29px;display:block;}.sociallinksvg{/*どちらかを100%,autoにする*/height:100%;width:auto;}/*アイコンの色を変えたい時に入れてください-----------------*/.header-burgersvg*{stroke:#fff;}javascript
javascriptライブラリの後に入れてください。
//=========================// svg animation//=========================//絶対パス取得//サイトに実装する際、相対パスだとページによってURLが変わる場合があるので、トップページURLを入れるvarhomeUrl='サイトのトップページURLを入れる';$(window).on('load',function(){//facebook(on hover)variconFacebook=this.document.querySelector('.anim-icon-facebook');varanimationFacebook=bodymovin.loadAnimation({container:iconFacebook,renderer:'svg',loop:true,autoplay:false,path:homeUrl+"js/svg-animation/facebook.json"});animationFacebook.setSpeed(1);vardirectionFacebook=1;iconFacebook.addEventListener('mouseenter',(e)=>{animationFacebook.setDirection(directionFacebook);animationFacebook.play();});iconFacebook.addEventListener('mouseleave',(e)=>{animationFacebook.stop();});//instagram(on hover)variconInstagram=document.querySelector('.anim-icon-instagram');varanimationInstagram=bodymovin.loadAnimation({container:iconInstagram,renderer:'svg',loop:false,autoplay:false,path:homeUrl+"js/svg-animation/instagram.json"});animationInstagram.setSpeed(1);vardirectionInstagram=1;iconInstagram.addEventListener('mouseenter',(e)=>{animationInstagram.setDirection(directionInstagram);animationInstagram.play();});iconInstagram.addEventListener('mouseleave',(e)=>{animationInstagram.setDirection(-directionInstagram);animationInstagram.play();});//hamberger-buttonvaricon6=document.querySelector('.anim-icon-menu-003');varanimation6=bodymovin.loadAnimation({container:icon6,renderer:'svg',loop:false,autoplay:false,path:homeUrl+"js/svg-animation/menu-003.json"});animation6.setSpeed(1);vardirection6=1;icon6.addEventListener('click',(e)=>{animation6.setDirection(direction6);animation6.play();direction6=-direction6;});});補足
1ページで複数箇所に設置したい場合
1ページに表示する数の分、javascriptの記述も増やす必要があります。
例えば、facebookアイコンを2つ表示させたい場合は
以下のようにします。
//1つ目の記述//上と同じ内容です//facebook(on hover)variconFacebook=this.document.querySelector('.anim-icon-facebook');varanimationFacebook=bodymovin.loadAnimation({container:iconFacebook,renderer:'svg',loop:true,autoplay:false,path:homeUrl+"js/svg-animation/facebook.json"});animationFacebook.setSpeed(1);vardirectionFacebook=1;iconFacebook.addEventListener('mouseenter',(e)=>{animationFacebook.setDirection(directionFacebook);animationFacebook.play();});iconFacebook.addEventListener('mouseleave',(e)=>{animationFacebook.stop();});//2つ目の記述//1つ目の記述と関数・クラスが被らないように名前を変更してください。//facebook(on hover) footervariconFacebook2=this.document.querySelector('.anim-icon-facebook--footer');varanimationFacebook2=bodymovin.loadAnimation({container:iconFacebook2,renderer:'svg',loop:true,autoplay:false,path:homeUrl+"js/svg-animation/facebook.json"});animationFacebook2.setSpeed(1);vardirectionFacebook2=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を条件分岐で読み込まなくする方法
をご参照ください！