こんにちは！
デザイナーの伊東です。
先日、「2017年のWebデザイントレンドを振り返る」といった趣旨のセミナーに参加してきました。
昨年多くのWebサイトから見られた傾向を振り返っていったのですが、その中でも印象に残っているのが”動きのあるWebサイトが増えている”というトピックスでした。
私自身、2017年はjs+cssでアニメーションを加えたWebサイトを多く作成したように思います。
ただ、ダイナミックな動きを実現しようとするとその分工数が増えてしまうのも事実です。
そこで今回は、凝った動きを簡単に実装できる「CSS Glitch Effect」というものを紹介しようと思います。
短時間で実装できますので、ぜひお試しください！
グリッチエフェクトとは
「グリッチ」とは、電子回路のバグによって起こるノイズのことだそうです。
そのノイズをあえてデザインに利用したのが今回実装する「グリッチエフェクト」です。
下記のサンプルを見ていただくとわかりやすいかと思います。
- サンプル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のダウンロード
それでは実際に動きを実装していきたいと思います。
まずは下記のサイトからデータをダウンロードしてください。
ダウンロードしたデータを確認すると、先ほどご紹介したサンプルの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>
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;
}
この部分で背景の画像、サイズ指定を行います。
.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;
}
最後に、アニメーションの設定部分です。
この部分を直接いじるよりも、変数部分の値を変更してカスタマイズします。
ここまで中身を見ていただいておわかりの通り、アニメーションの実装のほとんどをCSSで行なっているのがわかります。
jsのプラグインのように、変数を扱って簡単にカスタマイズできるのがいいですね。
紹介した基本的なエフェクト以外にも、ホバーやクリックイベントをトリガーにしてエフェクトをかける方法や、テキストにアニメーションをかける方法などが用意されています。
興味のある方はぜひチャレンジして見てください。
グリッジエフェクトはどんなデザインにもハマるものではありませんが、効果的に使用することでより魅力的なサイトのビジュアルを作ることができます。こういった便利なプラグインを使用して、短い時間で賢くアニメーションを実装することで、制作物の付加価値をつけることににつながればと思います。
