1. y_yoshino_LB

    No comment

    y_yoshino_LB
Changes in body
Source | HTML | Preview
@@ -1,34 +1,34 @@
CSS3が好きなへっぽこエンジニアです!
以前、CSSを使ってグリッチエフェクト(ジジッ…ジジッ…みたいな動きをする、ノイズのようなエフェクト)もどきを作ってみたので、備忘録として投稿します。
opacityとtransformだけで実装した、簡単に作れるなんちゃってエフェクトです。
##こういうの
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="yyko" data-slug-hash="ExYZomY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExYZomY">
<span>See the Pen <a href="https://codepen.io/yyko/pen/ExYZomY/">
ExYZomY</a> by y-yoshino (<a href="https://codepen.io/yyko">@yyko</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
かなりざっくりした作りなのですが…
-見ての通り、ひたすらopacityとtranslate3dのアニメーションを細かく設定し、それっぽくなるようにしているだけです。
+見ての通り、opacityとtranslate3dのアニメーションを細かく設定し、それっぽくなるようにしているだけです。
本当に簡単なので誰でも作れます!
##応用
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485322/90c73451-5c30-2d53-e99e-822495883a73.png)
レイヤーが重なっているように見える要素を、::beforeと::afterの疑似要素を用いて作成しました。
これに上記で作ったアニメーションを使って、ちょっとした仕掛けをつけてみます。
<p class="codepen" data-height="526" data-theme-id="0" data-default-tab="html,result" data-user="yyko" data-slug-hash="xxKqXXq" style="height: 526px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="xxKqXXq">
<span>See the Pen <a href="https://codepen.io/yyko/pen/xxKqXXq/">
xxKqXXq</a> by y-yoshino (<a href="https://codepen.io/yyko">@yyko</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
疑似要素で作ったレイヤーと、テキストにアニメーションをつけ、表示される際にバグが起きているようにしてみました。
例では動きをつけたい要素全てに同じ動き(guritti-anim)を設定し、animation-delayで遅延させ、表示速度を変えているだけの簡易な作りなのですが、それぞれの要素に異なる動きをつけても面白いかもしれません。
使用する場面は限られそうですが、何かの参考になれば幸いです!