1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

簡単なハンドライティングっぽいアニメーションの実装

Posted at

##SVGをゴニョゴニョやる?
一つだけ大きくどーん!って置くだけならそれでもいいですけど、違う単語でいくつもパラパラと置くとなるとそんなことやってられないですよね。

##ではそれっぽくCSSだけでやってしまおう

HTMLはこんな感じで、

<div class="hand-writing">
   <span>Comming Soon</span>
</div>

CSSを下記のようにします。

.hand-writing {
    position: absolute;
    clip: rect(0 0 100px 0); //ここの高さは適当に。文字の高さより低くなければOK
    transform: skew(-30deg); //ここの角度はフォントの斜め具合に合わせて決める
    transition: clip 3s ease-in-out 0s; 
        //いろいろ試したがease-in-outが一番それっぽくなりました。
}

.hand-writing > span {
    position: absolute;
    left: 20px; //親要素からはみ出た分を微調整
    top: 0;
    transform: skew(30deg); //正位置に戻す。absoluteになっていないと効かないので注意
}

そして例えば可視領域に入ったら.is-animatedというクラスを付与するみたいなことをしてあげて、

.hand-writing.is-animated  {
    clip: rect(0 300px 100px 0); //ここの幅は適当に。文字の幅より広くなればOK
}

こうすることで簡単なハンドライティングっぽいアニメーションが実装でき、こんな感じになります。

adf8ab4feb0b1af57f53182be171532b.gif

以上です!

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?