1. y_yoshino_LB

    Posted

    y_yoshino_LB
Changes in title
+CSS3でなんちゃってグリッチエフェクトもどきを実装する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,38 @@
+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のアニメーションを細かく設定し、それっぽくなるようにしているだけです。
+本当に簡単なので誰でも作れます!
+
+##応用
+<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="yyko" data-slug-hash="ZEzLrpQ" 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="ZEzLrpQ">
+ <span>See the Pen <a href="https://codepen.io/yyko/pen/ZEzLrpQ/">
+ ZEzLrpQ</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>
+レイヤーが重なっているように見える要素を、::beforeと::afterの疑似要素を用いて作成しました。
+これに上記で作ったアニメーションを使って、ちょっとした仕掛けをつけてみます。
+
+<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="yyko" data-slug-hash="xxKqXXq" 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="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で遅延させ、表示速度を変えているだけの簡易な作りなのですが、それぞれの要素に異なる動きをつけても面白いかもしれません。
+
+使用する場面は限られそうですが、何かの参考になれば幸いです!
+
+