【CSS,JavaScript】Gridge(グリッジ）アニメーションを使ったスライドの作成方法

2024年4月19日2024年4月23日

テレビ画面が壊れて荒れたようになる「グリッジ」効果をつけたアニメーションと、それを使ったスライドの作り方についてご紹介します！

完成イメージ

グリッジはCSSでアニメーション。
スライドはSwiperを使用（slickなどでも応用できます）
カレントクラスの発火タイミングで、グリッジアニメーションが発火するようにしています。

グリッジアニメーションは「画像が長方形に乱れる」「色がブレる」アニメの２通りを使用しています。
まずはそれぞれのアニメーションの実装方法について説明します。

【CSSのみ】グリッジアニメーションの実装方法

グリッジアニメーションのポイントは、
「アニメーションをつけない画像」の上に「同じ画像でアニメーションをつけたものを複数重ねる」ことです。
これであたかも、画像が乱れているように見せています。

グリッジアニメーション（画像が長方形にずれる）

2種類のアニメーションをつけています。

clip-pathで切り抜いた画像をtranslateで小刻みに動くアニメーション（複数枚）
translateで微妙に斜めにずれるアニメーション（1枚）

この2種類のアニメーションをつけた画像を、position:absoluteで複数重ねています。

HTML

ポイントは、.glitch__imgを5つ作成することです。
この中の画像に、CSSでそれぞれ違うアニメーションをつけます。

<div class="glitch__wrap">
  <div class="glitch">

    <div class="glitch__img">
      <picture> 
        <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
      </picture>
    </div>
    <!-- この下に、.glitch__imgを4つ複製します -->

CSS（SCSS）

`.glitch__img` 1つ目：この画像には何もしない（アニメーションなし）

`.glitch__img` 2,3,4つ目：`clip-path`で切り抜いた画像を`translate`で小刻みに動くアニメーションをつける。

`.glitch__img` 5つ目：`translate`で微妙に斜めにずれるアニメーションをつける

background-blend-mode: overlayでオーバーレイ効果をつけています。

コードはこちら↓

:root {
	--glitch-width: 100svw;
	--glitch-height: 100svh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
}

.glitch__wrap {
	position: relative;

	width: 100%;
	height: var(--glitch-height);
	overflow: hidden;
}

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

	&__img {
		position: absolute;
		left: 0;
		top: 0;
		transform: translateZ(0);
		width: var(--glitch-width);
		height: var(--glitch-height);
    
    //アニメーション部分
    animation-delay: 0.5s;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;

		&:first-child {
			animation: none;
		}

		&:nth-child(2) {
			animation-name: glitch-anim-1;
		}

		&:nth-child(3) {
			animation-name: glitch-anim-2;
		}

		&:nth-child(4) {
			animation-name: glitch-anim-3;
		}

		&:nth-child(5) {
			animation-name: glitch-anim-flash;
			background-blend-mode: overlay; //これだけブレンドモードをつける
		}

		//一番目以降の要素は、最初非表示にする（アニメーションで表示する）
		&:not(:first-child) {
			opacity: 0;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	}
}

// キーフレームの設定===============
@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0)
	}

	2% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%)
	}

	4% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%)
	}

	6% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%)
	}

	8% {
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%)
	}

	10% {
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%)
	}

	12% {
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%)
	}

	14% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%)
	}

	16% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%)
	}

	18% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%)
	}

	20% {
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		opacity: 1;
		transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0)
	}

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

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

	7% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%)
	}

	9% {
		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%)
	}

	11% {
		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%)
	}

	13% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%)
	}

	15% {
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%)
	}

	17% {
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%)
	}

	19% {
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%)
	}

	20% {
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-3 {
	0% {
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		opacity: 1;
		transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1)
	}

	1.5% {
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%)
	}

	2% {
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%)
	}

	2.5% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%)
	}

	3% {
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%)
	}

	5% {
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%)
	}

	5.5% {
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%)
	}

	7% {
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%)
	}

	8% {
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%)
	}

	9% {
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%)
	}

	10.5% {
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%)
	}

	11% {
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%)
	}

	13% {
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%)
	}

	14% {
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%)
	}

	14.5% {
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%)
	}

	15% {
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%)
	}

	16% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%)
	}

	18% {
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%)
	}

	20% {
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-flash {

	0%,
	5% {
		opacity: .2;
		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0)
	}

	5.5%,
	to {
		opacity: 0;
	}
}

完成品

See the Pen Glitch Effect Animation01 by lifescrewdesign (@lifescrewdesign) on CodePen.

グリッジアニメーション（色がブレる）

これでは、アニメーションは1種類だけつけています。

この1種類のアニメーションをつけた画像を、position:absoluteで複数重ねています。

HTML

ポイントは、.glitch__imgを2つ作成することです。
この中の画像に、CSSアニメーションをつけます。

<div class="glitch__wrap">
  <div class="glitch">

    <div class="glitch__img">
      <picture> 
        <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
      </picture>
    </div>
    <!-- この下に、.glitch__imgをもう1つ複製します -->

CSS（SCSS）

2枚目の画像にtranslateで小刻みに揺らすアニメーションをつけ、
さらに、mix-blend-mode: hard-lightでハードライトの効果をつけて、上から重ねてます。

`.glitch__img` 1つ目：この画像には何もしない（アニメーションなし）

`.glitch__img` 2つ目：`translate`で小刻みに揺らすアニメーションをつけ、
さらに、`mix-blend-mode: hard-light`でハードライトの効果をつける

コードはこちら↓

//参考サイト：https://codepen.io/web_designer_sanchit/pen/aaVPzq

//下準備
* {
    padding: 0;
    margin: 0;
}
body{
  background:#000;
  text-align:center;
}

// アニメーションの設定===============
:root {
	--glitch-width: 100svw;
	--glitch-height: 100svh;
}

.glitch__wrap {
	position: relative;

	width: 100%;
	height: var(--glitch-height);
	overflow: hidden;
}

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

	&__img {
		position: absolute;
		left: 0;
		top: 0;
		transform: translateZ(0);
		width: var(--glitch-width);
		height: var(--glitch-height);
    
		&:first-child {
			animation: none;
		}

		&:nth-child(2) {
      animation: glitch-anim-colors 1.5s 0.6s infinite;
			mix-blend-mode: hard-light;
		}

		//一番目以降の要素は、最初非表示にする（アニメーションで表示する）
		&:not(:first-child) {
			opacity: 0;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	}
}

// キーフレームの設定===============
@keyframes glitch-anim-colors {

	0%,
	90% {
		opacity: 0;
		translate: 0 0;
		filter: hue-rotate(0deg);
	}

	0.5%,
	90.5% {
		opacity: .5;
		translate: 5px 0;
	}

	1%,
	91% {
		translate: -5px 0;
	}

	1.5%,
	91.5% {
		translate: 15px 0;
	}

	2.5%,
	92.5% {
		opacity: .5;
		translate: 5px 0;
	}

	5%,
	95% {
		translate: -25px 0;
	}

	6%,
	96% {
		translate: -50px 0;
	}

	7%,
	97% {
		translate: 0 -20px;
	}

	8%,
	98% {
		translate: -60px -20px;
	}

	8.1%,
	98.1% {
		translate: 0 0;
	}

	10%,
	100% {
		opacity: 0;
		translate: 0 0;
		filter: hue-rotate(360deg);
	}
}

完成品

See the Pen Glitch Effect Animation02（color blend） by lifescrewdesign (@lifescrewdesign) on CodePen.

グリッジアニメーション（画像が長方形にずれる＋色がブレる）

上の２種類のアニメーションを合わせます。
細かい説明は省いて、コードだけご紹介します。

HTML

ポイントは、.glitch__imgを6つ作成することです。
この中の画像に、CSSアニメーションをつけます。

<div class="glitch__wrap">
  <div class="glitch">

    <div class="glitch__img">
      <picture> 
        <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
      </picture>
    </div>
    <!-- この下に、.glitch__imgをもう5つ複製します -->

CSS（SCSS）

.glitch__imgのCSSアニメーションについて、簡単にご説明すると…

1枚目：何もしない（アニメーションなし）
2,3,4,5枚目：グリッジアニメーション（画像が長方形にずれる）
6枚目：グリッジアニメーション（色がブレる）

// アニメーションの設定===============
:root {
	--glitch-width: 100svw;
	--glitch-height: 100svh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
}

.glitch__wrap {
	position: relative;

	width: 100%;
	height: var(--glitch-height);
	overflow: hidden;
}

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

	&__img {
		position: absolute;
		left: 0;
		top: 0;
		transform: translateZ(0);
		width: var(--glitch-width);
		height: var(--glitch-height);
    
    //アニメーション部分
    animation-delay: 0.5s;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;

		&:first-child {
			animation: none;
		}

		&:nth-child(2) {
			animation-name: glitch-anim-1;
		}

		&:nth-child(3) {
			animation-name: glitch-anim-2;
		}

		&:nth-child(4) {
			animation-name: glitch-anim-3;
		}

		&:nth-child(5) {
			animation-name: glitch-anim-flash;
			background-blend-mode: overlay; //これだけブレンドモードをつける
		}
    &:nth-child(6) {
			/*他のアニメーションと動作の間隔を変える*/
			animation: glitch-anim-colors 1.5s 0.6s infinite;
			mix-blend-mode: hard-light;
		}

		//一番目以降の要素は、最初非表示にする（アニメーションで表示する）
		&:not(:first-child) {
			opacity: 0;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	}
}

// キーフレームの設定===============
@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0)
	}

	2% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%)
	}

	4% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%)
	}

	6% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%)
	}

	8% {
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%)
	}

	10% {
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%)
	}

	12% {
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%)
	}

	14% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%)
	}

	16% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%)
	}

	18% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%)
	}

	20% {
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		opacity: 1;
		transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0)
	}

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

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

	7% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%)
	}

	9% {
		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%)
	}

	11% {
		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%)
	}

	13% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%)
	}

	15% {
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%)
	}

	17% {
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%)
	}

	19% {
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%)
	}

	20% {
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-3 {
	0% {
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		opacity: 1;
		transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1)
	}

	1.5% {
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%)
	}

	2% {
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%)
	}

	2.5% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%)
	}

	3% {
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%)
	}

	5% {
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%)
	}

	5.5% {
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%)
	}

	7% {
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%)
	}

	8% {
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%)
	}

	9% {
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%)
	}

	10.5% {
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%)
	}

	11% {
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%)
	}

	13% {
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%)
	}

	14% {
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%)
	}

	14.5% {
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%)
	}

	15% {
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%)
	}

	16% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%)
	}

	18% {
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%)
	}

	20% {
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-flash {

	0%,
	5% {
		opacity: .2;
		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0)
	}

	5.5%,
	to {
		opacity: 0;
	}
}

@keyframes glitch-anim-colors {
	0%,
	90% {
		opacity: 0;
		translate: 0 0;
		filter: hue-rotate(0deg);
	}

	0.5%,
	90.5% {
		opacity: .5;
		translate: 5px 0;
	}

	1%,
	91% {
		translate: -5px 0;
	}

	1.5%,
	91.5% {
		translate: 15px 0;
	}

	2.5%,
	92.5% {
		opacity: .5;
		translate: 5px 0;
	}

	5%,
	95% {
		translate: -25px 0;
	}

	6%,
	96% {
		translate: -50px 0;
	}

	7%,
	97% {
		translate: 0 -20px;
	}

	8%,
	98% {
		translate: -60px -20px;
	}

	8.1%,
	98.1% {
		translate: 0 0;
	}

	10%,
	100% {
		opacity: 0;
		translate: 0 0;
		filter: hue-rotate(360deg);
	}
}

完成品

See the Pen Glitch Effect Animation01 and 02 mixed by lifescrewdesign (@lifescrewdesign) on CodePen.

【JavaScript】スライドで、カレントクラスでアニメーションが発火するように実装

今回はSwiperを使います。（slickなど他のスライドでも応用できます。）
スライドのJavaScriptライブラリーでは、たいてい「メインで表示される画像」に専用のクラス名（カレントクラス）がつきます。
そのクラスが追加された時に、アニメーションが発火（スタート）するようにします。

HTML

スライド（.swiper-slide）の中に、グリッジアニメーションをまとめるdiv要素をいれます。
こうすることで、スライドの動きにグリッジアニメーションが干渉されないようにします。


<div class="p-fv-slide swiper js-swiper-slide">
  <div class="swiper-wrapper">

    <!--Swiperはスライドの枚数が少ないと動作がおかしくなるので、複製してスライドの枚数を増やす。-->
    <div class="swiper-slide glitch__wrap">
      <div class="glitch">
        <div class="glitch__img">
          <picture>           
            <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
          </picture>
        </div>
        <div class="glitch__img">
          <picture>           
            <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
          </picture>
        </div>
        <div class="glitch__img">
          <picture>           
            <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
          </picture>
        </div>
        <div class="glitch__img">
          <picture>           
            <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
          </picture>
        </div>
        <div class="glitch__img">
          <picture>           
            <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
          </picture>
        </div>
        <div class="glitch__img">
          <picture>           
            <source srcset="https://lifescrewdesign.com/blog/sozai/img/01top_sp.jpg" media="(max-width: 768px)"/><img src="https://lifescrewdesign.com/blog/sozai/img/01top_pc.jpg" alt="" decoding="async"/>
          </picture>
        </div>
      </div>
    </div>
    
  </div>
</div>

CSS（SCSS）

カレントクラス（Swiperの場合は、.swiper-slide-active）にCSSのanimationを設置することで、スライドが表示された時にアニメーションが発火（スタート）するようにします。

:root {
	--glitch-width: 100vw;
	--glitch-height: 114vh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
}

.glitch__wrap {
	position: relative;

	width: 100%;
	height: var(--glitch-height);
	overflow: hidden;
}

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

	&__img {
		position: absolute;
		left: 0;
		top: 0;
		transform: translateZ(0);

		width: var(--glitch-width);
		height: var(--glitch-height);

		//一番目以降の要素は、最初非表示にする（アニメーションで表示する）
		&:not(:first-child) {
			opacity: 0;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	}
}

/*スライドがアクティブになった時、アニメーションを発火する*/
.swiper-slide-active {
	.glitch__img {
		animation-delay: 0.5s;
		animation-duration: 5s; //スライドの速さと同じにする
		animation-iteration-count: infinite;
		animation-timing-function: linear;

		&:first-child {
			animation: none;
		}

		&:nth-child(2) {
			animation-name: glitch-anim-1;
		}

		&:nth-child(3) {
			animation-name: glitch-anim-2;
		}

		&:nth-child(4) {
			animation-name: glitch-anim-3;
		}

		&:nth-child(5) {
			animation-name: glitch-anim-flash;
			background-blend-mode: overlay; //これだけブレンドモードをつける
		}

		&:nth-child(6) {
			/*他のアニメーションと動作の間隔を変える*/
			animation: glitch-anim-colors 1.5s 0.6s infinite;
			mix-blend-mode: hard-light;
		}
	}

}

@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0)
	}

	2% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%)
	}

	4% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%)
	}

	6% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%)
	}

	8% {
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%)
	}

	10% {
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%)
	}

	12% {
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%)
	}

	14% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%)
	}

	16% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%)
	}

	18% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%)
	}

	20% {
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		opacity: 1;
		transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0)
	}

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

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

	7% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%)
	}

	9% {
		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%)
	}

	11% {
		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%)
	}

	13% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%)
	}

	15% {
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%)
	}

	17% {
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%)
	}

	19% {
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%)
	}

	20% {
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-3 {
	0% {
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		opacity: 1;
		transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1)
	}

	1.5% {
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%)
	}

	2% {
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%)
	}

	2.5% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%)
	}

	3% {
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%)
	}

	5% {
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%)
	}

	5.5% {
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%)
	}

	7% {
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%)
	}

	8% {
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%)
	}

	9% {
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%)
	}

	10.5% {
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%)
	}

	11% {
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%)
	}

	13% {
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%)
	}

	14% {
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%)
	}

	14.5% {
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%)
	}

	15% {
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%)
	}

	16% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%)
	}

	18% {
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%)
	}

	20% {
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%)
	}

	21.9% {
		opacity: 1;
		transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1)
	}

	22%,
	to {
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		opacity: 0;
		transform: translateZ(0)
	}
}

@keyframes glitch-anim-flash {

	0%,
	5% {
		opacity: .2;
		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0)
	}

	5.5%,
	to {
		opacity: 0;
	}
}

@keyframes glitch-anim-colors {

	0%,
	90% {
		opacity: 0;
		translate: 0 0;
		filter: hue-rotate(0deg);
	}

	0.5%,
	90.5% {
		opacity: .5;
		translate: 5px 0;
	}

	1%,
	91% {
		translate: -5px 0;
	}

	1.5%,
	91.5% {
		translate: 15px 0;
	}

	2.5%,
	92.5% {
		opacity: .5;
		translate: 5px 0;
	}

	5%,
	95% {
		translate: -25px 0;
	}

	6%,
	96% {
		translate: -50px 0;
	}

	7%,
	97% {
		translate: 0 -20px;
	}

	8%,
	98% {
		translate: -60px -20px;
	}

	8.1%,
	98.1% {
		translate: 0 0;
	}

	10%,
	100% {
		opacity: 0;
		translate: 0 0;
		filter: hue-rotate(360deg);
	}
}

JavaScript

Swiperのライブラリのコードは省略します。headタグにCDNを埋め込むなどしてください。

const swiper01 = new Swiper(".js-swiper-slide", {
  //Parameter(no modules)----------------
  slidesPerView: 1, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  spaceBetween: 0, // スライド間の余白（px、%の場合は"20%"で囲む）
  centeredSlides: true, // アクティブなスライドを中央に配置する

  loop: true, // 無限ループさせる
  loopAdditionalSlides: 1, // 無限ループさせる場合に複製するスライド数

  allowTouchMove: false, // マウスドラッグによるスライド移動を有効にする
  //Navigation--------------
  speed: 500, // スライドアニメーションのスピード（ミリ秒）

  // Effect settings
  effect: "fade", // エフェクトの種類を 'fade' に設定
  fadeEffect: {
    crossFade: true, // クロスフェード効果を有効にする
  },

  //Autoplay--------------
  autoplay: {
    // 自動再生させる
    delay: 5000, // 次のスライドに切り替わるまでの時間（ミリ秒）
    disableOnInteraction: false, // ユーザーが操作しても自動再生を止めない
    pauseOnMouseEnter: false, // マウスがスライダー上にある時、自動再生を止めない
  },
});

完成品

See the Pen Glitch Effect Animation01 and 02 mixed (Swipe Slide) by lifescrewdesign (@lifescrewdesign) on CodePen.

この記事が気に入ったら
フォローしてね！

Follow @yoshizo_web

よかったらシェアしてね！

【CSS,JavaScript】Gridge(グリッジ）アニメーションを使ったスライドの作成方法

完成イメージ

【CSSのみ】グリッジアニメーションの実装方法

グリッジアニメーション（画像が長方形にずれる）

HTML

CSS（SCSS）

.glitch__img 1つ目：この画像には何もしない（アニメーションなし）

.glitch__img 2,3,4つ目：clip-pathで切り抜いた画像をtranslateで小刻みに動くアニメーションをつける。

.glitch__img 5つ目：translateで微妙に斜めにずれるアニメーションをつける

完成品

グリッジアニメーション（色がブレる）

HTML

CSS（SCSS）

.glitch__img 1つ目：この画像には何もしない（アニメーションなし）

.glitch__img 2つ目：translateで小刻みに揺らすアニメーションをつけ、さらに、mix-blend-mode: hard-lightでハードライトの効果をつける

完成品

グリッジアニメーション（画像が長方形にずれる＋色がブレる）

HTML

CSS（SCSS）

完成品

【JavaScript】スライドで、カレントクラスでアニメーションが発火するように実装

HTML

CSS（SCSS）

JavaScript

完成品

`.glitch__img` 1つ目：この画像には何もしない（アニメーションなし）

`.glitch__img` 2,3,4つ目：`clip-path`で切り抜いた画像を`translate`で小刻みに動くアニメーションをつける。

`.glitch__img` 5つ目：`translate`で微妙に斜めにずれるアニメーションをつける

`.glitch__img` 1つ目：この画像には何もしない（アニメーションなし）

`.glitch__img` 2つ目：`translate`で小刻みに揺らすアニメーションをつけ、
さらに、`mix-blend-mode: hard-light`でハードライトの効果をつける