超超初心者向け漫画サイトのつくり方【絵をまばたきさせる】

自分で描いた絵を、まばたきさせるアニメーションを作ります。

CSSでさくっと実装するので、「目を開けた状態」と「目を閉じた状態」の２種類で作ります。半目は省きます。

↓８秒後にまばたきするので、しばらく待ってみてください。

デモページ

ホームページにアニメーションを載せる方法
準備するもの
ｈｔｍｌの記述
CSSの記述
カスタマイズ方法

ホームページにアニメーションを載せる方法

実装、の前に。

超超初心者向けなので、アニメーション方法の種類について書いておきます。

簡単な順から

GIFアニメを作って載せる
CSSでアニメーションさせる
jQueryを使ってアニメーションさせる（多分）
SVGアニメーションを作る

えっと………こんな感じかなぁ？？？

違ってたらすみません。。(;´･ω･)

GIFアニメは、漫画描きさんなら一度は耳にしたことがあるはず。作ったことある人も多いかな。

GIFアニメに特に不満がないなら、GIFアニメでOKっぽいです。（古い手法とか、不具合などは無いっぽい）GIFアニメの一番のデメリットが、「作るのが難しい」っぽいので、作る事が得意な漫画描きさんにはデメリットが無いと言ってもいい。

あー…

早速この記事の存在価値がなくなりました………

あ、いや。あるぞ。

GIFは色の数が少ないです。グラデーションとかもキレイに出ません。漫画描きさんなら美麗な絵をアニメーションさせたいですもんね！！CSSなら可能ですよ！！！

準備するもの

いや、私が描いた絵はGIFで充分なんですけどね。デモなので勘弁してください。

まず、「目以外の絵」「開けた目」「閉じた目」の３種類の絵を用意します。

今回は簡単に作れるように、３種類とも同じサイズの画像にしました。

positionの記事を読んで、position使えるよーって人は、目の画像は小さいサイズ（目の部分以外余白がない画像）で作ってもOKです。

左から、ｐｎｇ、透過ｐｎｇ、透過ｐｎｇで作っています。

この３枚をレイヤーみたいに重ねて、最初閉じた目は非表示、時間経過で開けた目を非表示にし、その間、閉じた目を表示する。という流れをＣＳＳで実装します。

ｈｔｍｌの記述

用意した、３枚の画像を貼りつけます。

<div class="anime">
  <img src="girl1.png" alt="" class="girl1">
  <img src="girl2.png" alt="" class="girl2">
  <img src="girl3.png" alt="" class="girl3">
</div>

girl1（目以外の絵）、girl2（開いた目の絵）、girl3（閉じた目の絵）に画像と同じ名前を付けて、divで囲いました。divには、animeという名前を付けました。

名前は、自分の好きな名前にしてください。半角英数字なら何でもOKです。

CSSの記述

３枚の絵を重ねて、アニメーションさせていきます。

.anime {
      position: relative;
    }
.girl1 {
      position: absolute;
    }
.girl2 {
      position: absolute;
      animation: mabataki-akeru 8s infinite;
    }
.girl3 {
      position: absolute;
      animation: mabataki-tojiru 8s infinite;
    }
@keyframes mabataki-akeru {
      100% {
        opacity: 1;
      }
      10% {
        opacity: 1;
      }
      0% {
        opacity: 0;
      }
     }
@keyframes mabataki-tojiru {
      100% {
        opacity: 0;
      }
      10% {
        opacity: 0;
      }
      0% {
        opacity: 1;
      }
     }

これで、８秒毎にまばたきするアニメーションを延々くり返します。

時間ランダムでまばたきした方がかっこいいですが、それはムリ。jQuery賢者とかの仕事になってきます。