anime.jsでripple effect(波紋効果)を作ってみたよ

anime.jsでripple effect(波紋効果)を作ってみたよ

こんにちは!

プログラム学習中のdynaです!

この記事は anime.jsの公式サイトに載っているページを少しアレンジしてデモで作成した内容 になります。


デモはこちら↓

表示されている丸をクリックすると、動きます。

See the Pen ripple effect(波紋効果) anime.js by dyna (@sakudyna) on CodePen.

公式サイトはこちら ⇒ https://animejs.com/documentation/

日本語版はこちら ⇒ https://tr.you84815.space/animejs/staggering.html

anime.jsって?

JavaScriptのアニメーションライブラリです。

軽いファイルで面白いアニメーションがたくさん使えます。

公式サイトからDLしてJSファイルを読み込めば使用できます。


面白いアニメーションがたくさん!


コード

コードを記載します。

HTMLは自分のローカル環境に作った場合です。



HTMLで表示部分を作成

HTMLの以下の部分で、表示物を作成する部分を記載します。

 


JavaScriptで丸を描く

JSの以下の部分で、丸を156個書きます。

 


anime.jsの値を設定する

anime.jsの値を設定します。

 


各設定項目は以下です。

 

 targets ・・・ アニメーションさせたいエレメントを指定する。 

CSSセレクター ( 書き方の例  targets: ‘.item’)

DOMノードまたはNodeList( 書き方の例  targets: el.querySelector(‘.item’),  targets: el.querySelectorAll(‘.item’))

オブジェクト( 書き方の例  targets: myObjectProp)

配列( 書き方の例   targets: [‘.item’, el.getElementById(‘#thing’)])

 

と指定できる。

参考:

https://animejs.com/documentation/#cssSelector


 scale・・・CSSのプロパティ。デモではeasing、durationを設定する。 

使用できるeasing は以下にデモあり↓

https://animejs.com/documentation/#pennerFunctions

duration はアニメーションの時間をミリ秒で設定します。


 delay: anime.stagger(ディレイの間隔, {grid: [列, 行], from: ‘起点の場所’}) 

grid・・・表示しているdivの列数と行数を指定します。

起点の場所・・・どこから波紋を起こすかを設定します。

例:delay: anime.stagger(200, {grid: [14, 5], from: ‘center’})

 

参考:

https://tr.you84815.space/animejs/staggering.html

 


こんな形でデモができました!!

 

参考サイト様:

https://tr.you84815.space/animejs/staggering.html

https://attadesign.co.jp/blog/1212/

おまけ

おまけの波紋効果の別サンプルです。

クリックしてみてね。

See the Pen 波紋効果(波紋2)anime.js by dyna (@sakudyna) on CodePen.

参考サイト様:

https://unitypull.com/stagger/

いつもありがとうございます。

 

ここまで読んで下さりありがとうございます。