Эффект размытия изображения на JS

Пример:

Поводите курсором мыши по изображению

HTML:

<div class="canvas-wrap">
	<div id="canvas"></div>
	<div id="fullwidth-image">
		<img data-sampler="displacedImage" src="man.jpg" crossorigin="anonymous" />
	</div>
</div>

</div>

CSS:

.canvas-wrap {
	width: 100%;
	height: 500px;
	position: relative;
}
#canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#fullwidth-image {
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 500px;
}
#fullwidth-image img {
	display: none;
}
.no-webgl #fullwidth-image {
	display: flex;
	justify-content: center;
	align-items: center;
}
.no-webgl #fullwidth-image img {
	display: block;
	object-fit: cover;
    width: 100%;
    height: 500px;
}

.canvas-wrap {

width: 100%;

height: 500px;

position: relative;

}

#canvas {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

#fullwidth-image {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 500px;

}

#fullwidth-image img {

display: none;

}

.no-webgl #fullwidth-image {

display: flex;

justify-content: center;

align-items: center;

}

.no-webgl #fullwidth-image img {

display: block;

object-fit: cover;

width: 100%;

height: 500px;

}

JS:

Подключаем библиотеку curtains.min.js и скрипт самого эффекта displacement.js

Найдено на codepen.io у пользователя Martin Laxenaire
Автор фотографии RyanMcGuire
Библиотека curtains.js на github

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: