Красивый эффект смены 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;
}
#canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 400px;
	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: 400px;

width: 100%;

}

.plane {

width: 100%;

height: 500px;

position: relative;

overflow: hidden;

}

.plane img {

display: none;

}

JS:

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

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

Пример:

HTML:

CSS:

JS:

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

Эффект метели на JS

Качающиеся фоторамки на CSS

Фон с рандомными окружностями

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

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