UNORTHODOX WORKBOOK

2017.06.05 Mon

SVGでハンドライティングアニメーションを実装する

文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe…

2017.04.04 Tue

CSSアニメーション(transition)で起こるバブリングの原因と対策

正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C…

2015.12.29 Tue

【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し

CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時…

2015.09.24 Thu

[After Effects] 文字を書き順通りに徐々に表示させるアニメーションの作り方

文字を書き順通りに塗りつぶしていくアニメーションが必要になったので、After Effectsを使ってアニメーション（動画）を作成しました。After Effectsは、あまり使う機会がなく、たぶんすぐ使い方を忘れてしま…

2015.05.24 Sun

CSSでテキストをなぞるようにアニメーションしながら色を変える

なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々…

2015.03.27 Fri

CSSで全画面の画像を真っ二つに切り開く方法

CSSだけで全画面の画像を真っ二つにぶった切る方法です。真っ二つにした上で、観音開きにしたり、スライドさせたりといったアニメーションを加えています。 アニメーションや画像の開閉についても、全てCSSだけでやっています。 …

2015.03.22 Sun

JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法

Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログ…

2015.03.16 Mon

CSSフィルターを使って流体を表現する(＋SVGフィルター)

滑らかに結合したような表現をCSSで実装する方法です。なんて言ったらいいか分からなくて、タイトルでは「流体」と表現していますが、要は「ぷよぷよ」みたいなやつですね。英語ではこういうのを「gooey」とか言ったりするみたい…

2015.02.28 Sat

マウスホバーでアニメーションしながら追従するバーをCSSだけで実装する

よくメニューとかグローバルナビで使われているやつで、マウスホバーすると、それにあわせて付いてくる線(バー)をCSSだけで実装する方法。 JavaScriptでやることが多いと思いますけど、CSSだけでできるんじゃないかと…