CSSでグリッチエフェクトを作ってみたよ

CSSでグリッチエフェクトを作ってみたよ

こんにちは、dynaです。

今回の記事は、HTML/CSSでグリッチを作ってみた記録です。

こちらのサイトを参考にカスタマイズさせてもらっています。

http://kachibito.net/css/css-glitched-text


デモはこちら↓(スマホの場合はResultを押してみてね)

ジジジジ・・・・って感じのイメージね!!

 

 

HTML

 

 

まず、表示したい文字「GLITCH」を<div>でくくります。 

この時、クラスと

data-text=GLITCH(表示するテキストと同じ文字)

を設定しておきます。

 

data-textはカスタムデータ属性といって、独自の属性を作れます。

data-○○という形で作成できます。

 

下にdata-textサンプル作成したので、よければこちらもご参考までに。

※data-textで入力した文字を、表示させることができます。

HTMLに戻ります。   

形を整えるために、<div = container>でさらにくくっておきます。

 

CSS

 css全体↓

 

まずは.glitchに基本の表示設定をします。(9行目~18行目)

それだけだとこんな感じです↓

HTML表示

  

次に@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はどの部分が見えるかを定義するものになります。

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

全体のCSSコードを見ると、.glitch::afterで.glitchの後ろ側に疑似要素を作ってあげています。(85行目~)

コード↓


上記のコードの中で気になるのが、 content: attr(data-text);です。 

data-textには「GLITCH」が入力されていたので、attr()を使って、それを表示させます。

 

attr()の説明も分かりやすいので以下引用です↓

attr() は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

MDN Web Docs

次に text-shadow: 5px 0 red; 

ここで、疑似要素::afterの影色を赤に設定しています。

ちらちらと赤に見えるのはこの部分です。


その次に気になるのは

 animation: noise 2s infinite alternate-reverse; 

ここでは、アニメーション(animation)に先ほどの

@keyframes noiseを設定して、2秒ごとに再生しています。


animation infiniteにすると、アニメーションを再生する回数を無限にできます。

(infinite=無限)

alternate-reverse

アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります

MDN Web Docs

これを複合してる感じですね。

これで、無限に再生、かつアニメーションに動きを出しています。


こんな感じで、GLITCHの文字表示、疑似要素のafterをちらつかせているところまでできました。

あとは::beforもつくり、同じように@keyframesを作成して、アニメーションをします。

こちらは影を青にしました。(164行目~)

これを実行すると、デモのようにデジタルのジジジ・・・に見えます。


ということで、全体像はこんな感じでした。

細かいところまでやるとやっぱり楽しいですね!!

今はCSSでガリガリ書かなくても、グリッジを使えるライブラリもあるようなので、

今度は試してみたいと思います。

 

 

読んで下さりありがとうございます。

修正等、何かあれば、お問い合わせよりお願いします。

 

参加中(`・ω・´)

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ
FC2ranking