PHPerTの備忘録 LOGO
  • 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/

 

 

 

現場から以上です

8082

CODE

PICK UP

clip-path maker 「Clippy」で簡単にクリップパスを作成する方法
PHPで文字列検索「strpos, strstr, preg_match」

Recommended

2020/05/30

[WEBデザイン技能検定]2級・3級勉強方法、攻略、出題する問題

2023/05/28

ACFを使って投稿のページビューやクリックアクション数を取得

2020/06/08

ajaxを使ってREAD MOREボタン等を押して「ページ遷移ナシ」でページネーションさせる実装方法

2020/04/18

WordPressプラグインを使って「CSVで投稿を一括で登録する」方法

2020/11/01

複数のJavascriptファイルをPC表示だけ読込んで、スマホの時は読込ませない記述方法

2020/05/25

[Wordpress]ACF（Advanced Custom Fields）コピペで簡単いろんな出力方法のメモ

ハイスピードプラン