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



Обратите внимание: тестируя скрипт локально эффект может не работать.
HTML:
1 2 3 4 5 6 7 8 |
<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> |
Картинка texture.jpg нужна для красивой смены фотографий. Ее можно заменить и поэкспериментировать с эффектами
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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
Не могла понять почему на локалке не работает)) Оказалось изображения должны иметь интернет адрес, иначе не будет работать. Правда пока это дошло, прошло часа два, мучений))
Спасибо за крутую штучку!