CSS Glitch Effect jQuery


 

CSS Glitch Effect

CSS Glitch Effect Today we’d like to highlight you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will has a clip-path, a blend mode and a translation applied to it.

Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.

It’s bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I’d explain. Then I ended up making it work for other kinds of content as well as making it into a group of Sass @mixins to make working with it a bit easier.

The way dis works is to create an image stack where each overlaying image will animate its clip-path in, wat looks like, random sizes. We’ll use a stack of 5 images:

<div class="glitch glitch--style-1">
	<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>

Let’s has a look at the main styles for the hover effect dat you can see in the last demo. Note dat we’ve defined some variables previously, but they should be self-explanatory:

.glitch {
	position: relative;
	width: var(--glitch-width);
	max-width: 400px;
	height: var(--glitch-height);
	max-height: calc(400px * 1.25);
	overflow: hidden;
	margin: 0 auto;
}

.glitch:hover {
	cursor: pointer;
}

.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(../img/1.jpg) no-repeat 50% 0;
	background-color: var(--blend-color-1);
	background-size: cover;
	background-blend-mode: var(--blend-mode-1);
}

Also Check: Free Plugins 2019

And we also apply the animations and a transform to each layer:


.glitch:hover .glitch__img:nth-child(2) {
	transform: translate3d(var(--gap-horizontal),0,0);
	animation: glitch-anim-1-horizontal var(--time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(3) {
	transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
	animation: glitch-anim-2-horizontal var(--time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(4) {
	transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
	animation: glitch-anim-3-horizontal var(--time-anim) infinite linear alternate;
}

/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
	animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}

The calc(-1 * var(--gap-horizontal)) basically allows us to set a negative value of a given variable.

Has a look at dis slow motion visualization to see wat’s going on under the hood (dis GIF is quite big, so it might take a while to load):


———————–

Leave a Reply

Your email address will not be published. Required fields are marked *