CSSでグリッチエフェクトを作ってみたよ
こんにちは、dynaです。
今回の記事は、HTML/CSSでグリッチを作ってみた記録です。
こちらのサイトを参考にカスタマイズさせてもらっています。
http://kachibito.net/css/css-glitched-text
デモはこちら↓（スマホの場合はResultを押してみてね）
ジジジジ・・・・って感じのイメージね！！
広告
HTML
1 2 3 4 5 | <div class ="container"> <div class="glitch" data-text="GLITCH">GLITCH</div> </div> |
まず、表示したい文字「GLITCH」を<div>でくくります。
この時、クラスと
data-text=GLITCH(表示するテキストと同じ文字）
を設定しておきます。
data-textはカスタムデータ属性といって、独自の属性を作れます。
data-○○という形で作成できます。
下にdata-textサンプル作成したので、よければこちらもご参考までに。
※data-textで入力した文字を、表示させることができます。
HTMLに戻ります。
形を整えるために、<div = container>でさらにくくっておきます。
CSS
css全体↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | body{ background-color: black; } .container{ width: 100%; } .glitch {/*基本*/ color: white; font-size: 150px; position: relative; margin-top: 15px; width: 25%; margin-left: auto; margin-right: auto; text-align: center; } @keyframes noise {/*グリッチの動きを設定*/ 0% {/*上、右、下、左の順*/ clip: rect(0px, 9999px, 6px, 0); } 5% { clip: rect(1px, 9999px, 70px, 0); } 10% { clip: rect(82px, 9999px, 120px, 0); } 15% { clip: rect(32px, 9999px, 35px, 0); } 20% { clip: rect(31px, 9999px, 49px, 0); } 25% { clip: rect(18px, 9999px, 46px, 0); } 30% { clip: rect(94px, 9999px, 64px, 0); } 35% { clip: rect(69px, 9999px, 31px, 0); } 40% { clip: rect(6px, 9999px, 72px, 0); } 45% { clip: rect(25px, 9999px, 35px, 0); } 50% { clip: rect(15px, 9999px, 26px, 0); } 55% { clip: rect(10px, 9999px, 200px, 0); } 60% { clip: rect(54px, 9999px, 30px, 0); } 65% { clip: rect(86px, 9999px, 90px, 0); } 70% { clip: rect(38px, 9999px, 65px, 0); } 75% { clip: rect(41px, 9999px, 90px, 0); } 80% { clip: rect(31px, 9999px, 37px, 0); } 85% { clip: rect(8px, 9999px, 12px, 0); } 90% { clip: rect(50px, 9999px, 150px, 0); } 95% { clip: rect(50px, 9999px, 50px, 0); } 100% { clip: rect(10px, 9999px, 100px, 0); } } .glitch::after {/*疑似要素を加える*/ text-align: center; content: attr(data-text); position: absolute; left: 10px; text-shadow: 5px 0 red; top: 0; color:gray; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise 2s infinite alternate-reverse; } @keyframes noise2{/*ノイズ用アニメーション*/ 0% { clip: rect(30px, 9999px, 13px, 0); } 5% { clip: rect(74px, 9999px, 51px, 0); } 10% { clip: rect(33px, 9999px, 65px, 0); } 15% { clip: rect(64px, 9999px, 999px, 0); } 20% { clip: rect(75px, 9999px, 6px, 0); } 25% { clip: rect(20px, 9999px, 49px, 0); } 30% { clip: rect(63px, 9999px, 5px, 0); } 35% { clip: rect(42px, 9999px, 15px, 0); } 40% { clip: rect(92px, 9999px, 57px, 0); } 45% { clip: rect(4px, 9999px, 33px, 0); } 50% { clip: rect(4px, 9999px, 34px, 0); } 55% { clip: rect(49px, 9999px, 25px, 0); } 60% { clip: rect(24px, 9999px, 999px, 0); } 65% { clip: rect(31px, 9999px, 10px, 0); } 70% { clip: rect(5px, 9999px, 83px, 0); } 75% { clip: rect(1px, 9999px, 999px, 0); } 80% { clip: rect(3px, 9999px, 15px, 0); } 85% { clip: rect(68px, 9999px, 34px, 0); } 90% { clip: rect(10px, 9999px, 88px, 0); } 95% { clip: rect(0px, 9999px, 59px, 0); } 100% { clip: rect(10px, 9999px, 999px, 0); } } .glitch::before { text-align: center; content: attr(data-text); position: absolute; left: -2px; text-shadow: 5px 0 blue; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise2 3s infinite alternate-reverse; } |
まずは.glitchに基本の表示設定をします。（9行目～18行目）
それだけだとこんな感じです↓
次に@keyframes noiseでアニメーションを設定していきます。（20行目～）
@keyframesはアニメーションの開始から終了まで、どのように表示するかを細かく設定できる記載方法です。
CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。
引用元：MDN Web Docs
この@keyframesを使って、表示を設定していきます。
0% {/上、右、下、左の順/
clip: rect(0px, 9999px, 6px, 0);
}
5% {
clip: rect(1px, 9999px, 70px, 0);
}
10% {
clip: rect(82px, 9999px, 120px, 0);
}・・・・
とありますが、
clip:rectはボックスの左上端を基準として、上右下左のそれぞれの距離を指定して切り抜きます。
clipについてはこちらを参考にしています↓
clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。
clip プロパティは絶対配置された要素、つまり position:absolute または position:fixed を持つ要素だけに適用されます。
引用元：MDN Web Docs clip
http://www.htmq.com/style/clip.shtml
つまり、この@keyframesは表示する（可視化する）場所を指定して、細かくアニメーション（変化）をしていることになります。
設定したアニメーション（clip）を疑似要素（::befor,::after）に適用していくと、表示される場所が変わっているので、ジジジ・・・みたいな感じに見えます。
0％、5％、10％・・・と細かく設定するほど、ジジジの動きが細かくなります。
疑似要素、::befor,::afterについては、この説明が分かりやすいです。以下、引用です。
CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます
MDN Web Docs ::after
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 『例』 【HTML】 <p class="boring-text">古くつまらないテキストです。</p> <p>つまらなくも楽しくもないふつうのテキストです。</p> <p class="exciting-text">MDN への協力は簡単で楽しいものです。</p> 【CSS】 .exciting-text::after { content: " <- 楽しい！"; color: green; } .boring-text::after { content: " <- ツマラナイ！"; color: red; } 【結果】 古くつまらないテキストです。<- ツマラナイ！ つまらなくも楽しくもないふつうのテキストです。 MDN への協力は簡単で楽しいものです。 <- 楽しい！ |
全体のCSSコードを見ると、.glitch::afterで.glitchの後ろ側に疑似要素を作ってあげています。（85行目～）
コード↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .glitch::after {/疑似要素を加える/ text-align: center; content: attr(data-text); position: absolute; left: 10px; text-shadow: 5px 0 red; top: 0; color:gray; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise 2s infinite alternate-reverse; } |
上記のコードの中で気になるのが、 content: attr(data-text);です。
data-textには「GLITCH」が入力されていたので、attr()を使って、それを表示させます。
attr()の説明も分かりやすいので以下引用です↓
attr() は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。
MDN Web Docs
1 2 3 4 5 6 7 8 9 10 | 【HTML】 <p data-foo="hello">world</p> 【CSS】 [data-foo]::before { content: attr(data-foo) " "; } 【結果】 hello world |
次に text-shadow: 5px 0 red;
ここで、疑似要素::afterの影色を赤に設定しています。
ちらちらと赤に見えるのはこの部分です。
その次に気になるのは
animation: noise 2s infinite alternate-reverse;ここでは、アニメーション(animation)に先ほどの
@keyframes noiseを設定して、2秒ごとに再生しています。
（infinite＝無限）
alternate-reverse
アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります
MDN Web Docs
これを複合してる感じですね。
これで、無限に再生、かつアニメーションに動きを出しています。
こんな感じで、GLITCHの文字表示、疑似要素のafterをちらつかせているところまでできました。
あとは::beforもつくり、同じように@keyframesを作成して、アニメーションをします。
こちらは影を青にしました。（164行目～）
これを実行すると、デモのようにデジタルのジジジ・・・に見えます。
ということで、全体像はこんな感じでした。
細かいところまでやるとやっぱり楽しいですね！！
今はCSSでガリガリ書かなくても、グリッジを使えるライブラリもあるようなので、
今度は試してみたいと思います。
読んで下さりありがとうございます。
修正等、何かあれば、お問い合わせよりお願いします。
広告