Красивый эффект смены 2-х фотографий

Скрипт реализующий данную анимацию работает на библиотеках TweenMax и curtains.js

Пример:

Обратите внимание: тестируя скрипт локально эффект может не работать.

HTML:

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

</div>

Картинка texture.jpg нужна для красивой смены фотографий. Ее можно заменить и поэкспериментировать с эффектами

CSS:

.canvas-wrap {
    position: relative;
	overflow: hidden;
	border-radius: 10px;	
}
#canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	aspect-ratio: 16/9;
	width: 100%;
}
.plane {
	width: 100%;
	aspect-ratio: 16/9;
	position: relative;
	overflow: hidden;
}
.plane img {
	display: none;
}

.canvas-wrap {

position: relative;

overflow: hidden;

border-radius: 10px;

}

#canvas {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

aspect-ratio: 16/9;

width: 100%;

}

.plane {

width: 100%;

aspect-ratio: 16/9;

position: relative;

overflow: hidden;

}

.plane img {

display: none;

}

JS:

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

Найдено на codepen.io у пользователя Alain
Библиотека TweenMax
Библиотека curtains.js

Пример:

HTML:

CSS:

JS:

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

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

Комментарии: