わんすけに聞いてみる Javascript,jquery [anime.js]アニメーションロゴ スライドイン

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


 

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

1.前提

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

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

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

 

 

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

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

 

2.ソースコード

javascriptは、こんな感じ。

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

CSSは適当にこんな感じ。

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

わんすけへ寄付金を送る

このサイトの情報が何かの為になったなーって思う方がいらっしゃれば、是非「わんすけに缶コーヒー1本でもご馳走する」気持ちでポチってあげて下さい😉

¥120
タグ:

コメントを残す

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

Related Post