Webサイトに動きを！グリッチエフェクトを実装する「CSS Glitch Effect」

2018年3月2日

こんにちは！
デザイナーの伊東です。

先日、「2017年のWebデザイントレンドを振り返る」といった趣旨のセミナーに参加してきました。
昨年多くのWebサイトから見られた傾向を振り返っていったのですが、その中でも印象に残っているのが”動きのあるWebサイトが増えている”というトピックスでした。
私自身、2017年はjs+cssでアニメーションを加えたWebサイトを多く作成したように思います。

ただ、ダイナミックな動きを実現しようとするとその分工数が増えてしまうのも事実です。

そこで今回は、凝った動きを簡単に実装できる「CSS Glitch Effect」というものを紹介しようと思います。
短時間で実装できますので、ぜひお試しください！

この記事の目次

1 グリッチエフェクトとは
2 CSS Glitch Effectのダウンロード
3 実装する
4 ソースを詳しく見てみる

グリッチエフェクトとは

「グリッチ」とは、電子回路のバグによって起こるノイズのことだそうです。
そのノイズをあえてデザインに利用したのが今回実装する「グリッチエフェクト」です。

下記のサンプルを見ていただくとわかりやすいかと思います。

サンプル1
https://tympanus.net/Tutorials/CSSGlitchEffect/index.html
サンプル2
https://tympanus.net/Tutorials/CSSGlitchEffect/index2.html
サンプル3
https://tympanus.net/Tutorials/CSSGlitchEffect/index3.html

CSS Glitch Effectのダウンロード

それでは実際に動きを実装していきたいと思います。
まずは下記のサイトからデータをダウンロードしてください。

CSS Glitch Effect

ダウンロードしたデータを確認すると、先ほどご紹介したサンプルのhtmlファイルが3つと、それに付随する関連ファイルが梱包されています。

3つのサンプルのうち、実装したい形にもっとも近いものをベースに作業を進めていくことをオススメします。

実装する

それではいよいよ実装していきます。
今回は一番オーソドックスな”一定時間ごとにエフェクトがかかる方法”をご紹介します。

先ほどダウンロードしたファイルの”demo02.html”をベースに作業していきましょう。
不要なHTMLやCSSは一切排除して、シンプルな状態にしてみました。

See the Pen MQLNEo by ito nao (@chokuro) on CodePen.

ソースを詳しく見てみる

ソースの内容をもう少し具体的に見ていきましょう。

HTMLは、同じクラスのついた空のdivタグを5つ用意しています。
それぞれに同じ背景画像をCSSで指定し、5つの背景画像をランダムでオーバーレイさせることによってアニメーションを実現しています。

<div class="glitch">
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
</div>

</div>

CSSは、上部で変数を定義しています。
秒数や色、サイズなどの値を変更することでカスタマイズできるような仕組みになっています。

.demo-2 {
	--glitch-width: 100vw;
	--glitch-height: 100vh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--color-title: #fff;
	--time-anim: 4s;
	--delay-anim: 2s;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: overlay;
	--blend-mode-5: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: #fb909a;
	--blend-color-5: #1c1cc9;
}

.demo-2 {

--glitch-width: 100vw;

--glitch-height: 100vh;

--gap-horizontal: 10px;

--gap-vertical: 5px;

--color-title: #fff;

--time-anim: 4s;

--delay-anim: 2s;

--blend-mode-1: none;

--blend-mode-2: none;

--blend-mode-3: none;

--blend-mode-4: overlay;

--blend-mode-5: overlay;

--blend-color-1: transparent;

--blend-color-2: transparent;

--blend-color-3: transparent;

--blend-color-4: #fb909a;

--blend-color-5: #1c1cc9;

}

この部分で背景の画像、サイズ指定を行います。

.glitch {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--glitch-width);
	height: var(--glitch-height);
	overflow: hidden;
}

.glitch__img {
	position: absolute;
	top: calc(-1 * var(--gap-vertical));
	left: calc(-1 * var(--gap-horizontal));
	width: calc(100% + var(--gap-horizontal) * 2);
	height: calc(100% + var(--gap-vertical) * 2);
	background: url(https://tympanus.net/Tutorials/CSSGlitchEffect/img/img2.jpg) no-repeat 50% 0;
	background-color: var(--blend-color-1);
	background-size: cover;
	transform: translate3d(0,0,0);
	background-blend-mode: var(--blend-mode-1);
}

.glitch {

position: absolute;

top: 0;

left: 0;

width: var(--glitch-width);

height: var(--glitch-height);

overflow: hidden;

}

.glitch__img {

position: absolute;

top: calc(-1 * var(--gap-vertical));

left: calc(-1 * var(--gap-horizontal));

width: calc(100% + var(--gap-horizontal) * 2);

height: calc(100% + var(--gap-vertical) * 2);

background: url(https://tympanus.net/Tutorials/CSSGlitchEffect/img/img2.jpg) no-repeat 50% 0;

background-color: var(--blend-color-1);

background-size: cover;

transform: translate3d(0,0,0);

background-blend-mode: var(--blend-mode-1);

}

次に５枚重ねた画像に対して、先ほど用意した変数の値を入れたり、あとで出てくるアニメーション部分との紐付けを行なっていますね。

.glitch__img:nth-child(n+2) {
	opacity: 0;
}

.imgloaded .glitch__img:nth-child(n+2) {
	animation-duration: var(--time-anim);
	animation-delay: var(--delay-anim);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.imgloaded .glitch__img:nth-child(2) {
	background-color: var(--blend-color-2);
	background-blend-mode: var(--blend-mode-2);
	animation-name: glitch-anim-1;
}

.imgloaded .glitch__img:nth-child(3) {
	background-color: var(--blend-color-3);
	background-blend-mode: var(--blend-mode-3);
	animation-name: glitch-anim-2;
}

.imgloaded .glitch__img:nth-child(4) {
	background-color: var(--blend-color-4);
	background-blend-mode: var(--blend-mode-4);
	animation-name: glitch-anim-3;
}

.imgloaded .glitch__img:nth-child(5) {
	background-color: var(--blend-color-5);
	background-blend-mode: var(--blend-mode-5);
	animation-name: glitch-anim-flash;
}