animationでパラパラ漫画風

animationでパラパラ漫画風

3日ぶりの更新です。一昨日実験していたことを、紹介します。

前回の投稿で紹介した参考書「webデザイン良質見本帳」に掲載されていた
あるサイト「アキュモ鍼灸院+整骨院」http://acumo49.comについて、

「ロゴはcssでtransformを使ってアニメーションさせています。」
と少し紹介されていて……….それって詳しくはどうゆうこと??となり、

色々検索したり、紐解いていった結果、こうじゃないかなーという方法がわかりました!

それは、
文字の描かれる過程の複数の画像を縦に1つに繋げたものを、文字と同じ高さの枠の中で表示するようにし、
CSSのamimationプロパティでstepsというのを利用して、一定の時間をかけて複数段階(画像の数マイナス1の数)のコマ送りで、一番最初のコマから一番最後のコマまで表示位置を移動するように指定しているのではないかと!

例えば、冒頭のWelcomeのサンプルで指定したCSSは以下の通りです。

ボックスの高さを指定し、中に入れる画像のはみ出した部分は見えなくなるように指定。

.wp-block-image {
height: 33px;
 overflow:hidden;
}

<animeという名称をつけ、開始時点の位置と終了時点の位置を指定したアニメーションを定義>
@keyframes anime{
0%{ transform:translate(0,-2px);}
100%{ transform:translate(0,-310px);}
}

中に入れる画像が「anime」という動きを、1.5秒かけて、9回切り替えてコマ送りで実行(開始時に最初のステップを実行)し、無限ループでアニメーションするよう指定。

.wp-block-image img {
animation: anime 1.5s steps(9, start) infinite;
}

わかるとスッキリしますね!

※wordpressの個別投稿ページに画像を上げる方法がわかりました。
単純なことで、恥ずかしいです^^; 投稿フォームのことをもっと勉強します。
これでいろいろ実験を披露できるかと思います!