1. y_yoshino_LB

    No comment

    y_yoshino_LB
Changes in body
Source | HTML | Preview

CSS3が好きなへっぽこエンジニアです!
以前、CSSを使ってグリッチエフェクト(ジジッ…ジジッ…みたいな動きをする、ノイズのようなエフェクト)もどきを作ってみたので、備忘録として投稿します。
opacityとtransformだけで実装した、簡単に作れるなんちゃってエフェクトです。

こういうの

See the Pen ExYZomY by y-yoshino (@yyko) on CodePen.

かなりざっくりした作りなのですが…
見ての通り、ひたすらopacityとtranslate3dのアニメーションを細かく設定し、それっぽくなるようにしているだけです。
本当に簡単なので誰でも作れます!

応用

ダウンロード.png

レイヤーが重なっているように見える要素を、::beforeと::afterの疑似要素を用いて作成しました。
これに上記で作ったアニメーションを使って、ちょっとした仕掛けをつけてみます。

See the Pen xxKqXXq by y-yoshino (@yyko) on CodePen.

疑似要素で作ったレイヤーと、テキストにアニメーションをつけ、表示される際にバグが起きているようにしてみました。

こちらの例では動きをつけたい要素全てに同じ動き(guritti-anim)を設定し、animation-delayで遅延させ、表示速度を変えているだけの簡易な作りなのですが、それぞれの要素に異なる動きをつけても面白いかもしれません。

使用する場面は限られそうですが、何かの参考になれば幸いです!