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

こんにちは、dynaです。

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

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

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

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

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

1. HTML
2. CSS

HTML


 <div class ="container">
    <div class="glitch"  data-text="GLITCH">GLITCH</div>
 </div>

<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全体↓


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;
  }

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

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


『例』
【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 への協力は簡単で楽しいものです。 <- 楽しい！

『例』

【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行目～）

コード↓


.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;
}

.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


【HTML】
<p data-foo="hello">world</p>
【CSS】
[data-foo]::before {
  content: attr(data-foo) " ";
}
【結果】
hello world

【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秒ごとに再生しています。

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

（infinite＝無限）

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

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

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

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

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

こちらは影を青にしました。（164行目～）

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

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

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

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

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

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

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