[anime.js]アニメーションロゴ スライドイン


 

anime.jsを使ってスルスル動くロゴを作る練習してみた。

1.前提

このページのコードでは、jqueryとanime.jsを使っています。

サンプル1.すぅいーん すすすす

こんな感じのタグを書くと↓こうなるソースを書いてみた。

 

 

サンプル2.ぎゅん! すすすす

こうすると、↓こうなる。

 

2.ソースコード

javascriptは、こんな感じ。

属性「anime-str」で設定された文字を、属性「face」で指定したフォントでスライドさせている。

CSSは適当にこんな感じ。

とりあえず、動くレベルまで調整してみたけども、ソースぐちゃぐちゃになってしまったぁ・・・。

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です