• HOME
  • CODE
  • WEBサイト上で簡単にグリッチエフェクトを実装するなら「CSS Glitch Effect」がオススメ

2020/07/18 20:50

WEBサイト上で簡単にグリッチエフェクトを実装するなら「CSS Glitch Effect」がオススメ

ここ数年で増え続けてる「グリッチエフェクト」を簡単に実装できるライブラリをご紹介します。

 

 

グリッチエフェクトとは

 

 

グリッチとは電子回路のバグで起こるノイズを差すらしいですが、それを活かしてデザインとして利用したのがいわゆる「グリッチエフェクト」という事ですね。

 

 

・サンプル

https://tympanus.net/Tutorials/CSSGlitchEffect/

 

 

ダウンロードサイト

 

下記サイトからデータのダウンロードができます。

 

・CSS Glitch Effect

https://tympanus.net/codrops/2017/12/21/css-glitch-effect/

 

3つのサンプルが同梱されてますので好みによって選びましょう。

 

 

実装方法

 

ホバーしてる間だけエフェクトがかかったりするものもありますが、今回は一定時間ごとにエフェクトがかかる方法をご紹介します。

 

ダウンロードしたファイル内の「demo02.html」がベースとなります。

 

ちょっと囲み方にコツがあります。

 

【HTML】

<body class="demo-2 loading">

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

    <script src="https://tympanus.net/Tutorials/CSSGlitchEffect/js/imagesloaded.pkgd.min.js"></script>

</body>

 

 

 

CSSもちょっと長いですがこんな感じになってます。

 

【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 styles */

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

}

 

/* Animations */

 

@keyframes glitch-anim-1 {

    0% { 

        opacity: 1;

        transform: translate3d(var(--gap-horizontal),0,0);

        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);

        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);

    }

    2% {

        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);

        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);

    }

    4% {

        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);

        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);

    }

    6% {

        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);

        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);

    }

    8% {

        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);

        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);

    }

    10% {

        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);

        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);

    }

    12% {

        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);

        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);

    }

    14% {

        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);

        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);

    }

    16% {

        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);

        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);

    }

    18% {

        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);

        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);

    }

    20% {

        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);

        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);

    }

    21.9% {

        opacity: 1;

        transform: translate3d(var(--gap-horizontal),0,0);

    }

    22%, 100% {

        opacity: 0;

        transform: translate3d(0,0,0);

        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);

        clip-path: polygon(0 0, 0 0, 0 0, 0 0);

    }

}

 

@keyframes glitch-anim-2 {

    0% { 

        opacity: 1;

        transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);

        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);

        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);

    }

    3% {

        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);

        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);

    }

    5% {

        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);

        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);

    }

    7% {

        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);

        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);

    }

    9% {

        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);

        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);

    }

    11% {

        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);

        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);

    }

    13% {

        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);

        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);

    }

    15% {

        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);

        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);

    }

    17% {

        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);

        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);

    }

    19% {

        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);

        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);

    }

    20% {

        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);

        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);

    }

    21.9% {

        opacity: 1;

        transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);

    }

    22%, 100% {

        opacity: 0;

        transform: translate3d(0,0,0);

        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);

        clip-path: polygon(0 0, 0 0, 0 0, 0 0);

    }

}

 

@keyframes glitch-anim-3 {

    0% { 

        opacity: 1;

        transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);

        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);

        clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);

    }

    1.5% {

        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);

        clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);

    }

    2% {

        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);

        clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);

    }

    2.5% {

        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);

        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);

    }

    3% {

        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);

        clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);

    }

    5% {

        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);

        clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);

    }

    5.5% {

        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);

        clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);

    }

    7% {

        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);

        clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);

    }

    8% {

        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);

        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);

    }

    9% {

        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);

        clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);

    }

    10.5% {

        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);

        clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);

    }

    11% {

        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);

        clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);

    }

    13% {

        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);

        clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);

    }

    14% {

        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);

        clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);

    }

    14.5% {

        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);

        clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);

    }

    15% {

        -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);

        clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);

    }

    16% {

        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);

        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);

    }

    18% {

        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);

        clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);

    }

    20% {

        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);

        clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);

    }

    21.9% {

        opacity: 1;

        transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);

    }

    22%, 100% {

        opacity: 0;

        transform: translate3d(0,0,0);

        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);

        clip-path: polygon(0 0, 0 0, 0 0, 0 0);

    }

}

 

@keyframes glitch-anim-text {

    0% { 

        transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);

        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);

        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);

    }

    2% {

        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);

        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);

    }

    4% {

        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);

        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);

    }

    5% {

        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);

        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);

    }

    6% {

        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);

        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);

    }

    7% {

        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);

        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);

    }

    8% {

        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);

        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);

    }

    9% {

        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);

        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);

    }

    9.9% {

        transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);

    }

    10%, 100% {

        transform: translate3d(0,0,0) scale3d(1,1,1);

        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

    }

}

 

/* Flash */

@keyframes glitch-anim-flash {

    0%, 5% { 

        opacity: 0.2; 

        transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);

    }

    5.5%, 100% {

        opacity: 0;

        transform: translate3d(0, 0, 0);

    }

}

 

 

 

【Javascript】

{

    setTimeout(() => document.body.classList.add('render'), 60);

    const navdemos = Array.from(document.querySelectorAll('nav.demos > .demo'));

    const total = navdemos.length;

    const current = navdemos.findIndex(el => el.classList.contains('demo--current'));

    const navigate = (linkEl) => {

        document.body.classList.remove('render');

        document.body.addEventListener('transitionend', () => window.location = linkEl.href);

    };

    navdemos.forEach(link => link.addEventListener('click', (ev) => {

        ev.preventDefault();

        navigate(ev.target);

    }));

    document.addEventListener('keydown', (ev) => {

        const keyCode = ev.keyCode || ev.which;

        let linkEl;

        if ( keyCode === 37 ) {

            linkEl = current > 0 ? navdemos[current-1] : navdemos[total-1];

        }

        else if ( keyCode === 39 ) {

            linkEl = current < total-1 ? navdemos[current+1] : navdemos[0];

        }

        else {

            return false;

        }

        navigate(linkEl);

    });

    imagesLoaded('.glitch__img', { background: true }, () => {

        document.body.classList.remove('loading');

        document.body.classList.add('imgloaded');

    });

}

 

 

簡単に中身の説明

 

HTML内には同じクラス名で5つのdivタグが記述されてます。

同じ背景画像をCSSで指定して、ランダムでオーバーレイさせている状態です。

 

CSSに関しては変数の定義により、サイズや色や時間などをカスタムできるようになってます。

 

ホバーやクリックによってエフェクトをかけたり、同様にテキストをグリッチエフェクトをかけたりもできます。

 

 

グリッチのかっこいいサイトをご紹介

 

最後にグリッチエフェクトを使ったサイトを紹介します。

 

・We Cargo

https://www.wecargo.be/

 

・Active Theory

https://activetheory.net/home

 

・ピクシブテックフェス

https://conference.pixiv.co.jp/2020/tech-fes

 

・Piccadilly

https://clubpiccadilly.jp/

 

 

 

現場から以上です

7638

PICK UP