1. y_yoshino_LB

    No comment

    y_yoshino_LB
Changes in body
Source | HTML | Preview
@@ -1,47 +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のアニメーションを細かく設定し、それっぽくなるようにしているだけです。
本当に簡単なので誰でも作れます!
##応用
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485322/90c73451-5c30-2d53-e99e-822495883a73.png)
-```
-<div class="guritti--wrap">
- <div class="guritti--box">
- <div class="guritti--box--inner"><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p></div>
- </div>
-</div>
-```
-
-<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で遅延させ、表示速度を変えているだけの簡易な作りなのですが、それぞれの要素に異なる動きをつけても面白いかもしれません。
使用する場面は限られそうですが、何かの参考になれば幸いです!