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


 

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

1.前提

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

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

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

 

 

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

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

 

2.ソースコード

javascriptは、こんな感じ。

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

CSSは適当にこんな感じ。

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

タグ:

Leave a Reply

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

Related Post

編集したTableの値に循環参照が発生していないかチェックしてみる。編集したTableの値に循環参照が発生していないかチェックしてみる。

さて、今回は編集可能にしたTableに関数を実装していく前に循環参照を検出しようというところ。 編集中のセルからフォーカスアウトした時に発火するイベントにチェックを仕込みます。 循環参照のチェックを開始する部分 [cra […]