Эффект волны на изображении

Пример:

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

HTML:

<div class="canvas-wrap">
	<div id="canvas"></div>
	<div class="plane">
		<img data-sampler="texture0" id="texture0" src="photo.jpg" crossorigin="anonymous"/>
	</div>
</div>

</div>

CSS:

.canvas-wrap {
    position: relative;
}
#canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 500px;
	width: 100%;
}
.plane {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
}
.plane img {
	display: none;
}

.canvas-wrap {

position: relative;

}

#canvas {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

height: 500px;

width: 100%;

}

.plane {

width: 100%;

height: 500px;

position: relative;

overflow: hidden;

}

.plane img {

display: none;

}

JS:

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

За основу взят скрипт, найденный на codepen.io у пользователя Alain
Автор фотографии Claudia14
Библиотека curtains.js на github

Пример:

HTML:

CSS:

JS:

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

Постер из разных фотографий на CSS

Группа из 4-х секций

Перелистывающиеся страницы с фотографиями

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