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

Пример:

HTML:

<div class="canvas-wrap">
	<div id="canvas"></div>
	<div class="plane">
		<img src="fish.jpg" crossorigin="anonymous"/>
	</div>
</div>

</div>

CSS:

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

.canvas-wrap {

position: relative;

}

#canvas {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.plane {

width: 100%;

height: 500px;

position: relative;

overflow: hidden;

}

.plane img {

display: none;

}

.no-curtains .plane {

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

.no-curtains .plane img {

display: block;

max-width: 100%;

object-fit: cover;

}

JS:

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

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

Пример:

HTML:

CSS:

JS:

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

Замедленная загрузка изображений

Рентгеновские лучи на JS

Бесконечный коридор на JS

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

Разделы:

Фоновая анимация на JS

Простые решения: