Эффект панорамы реализован на библиотеке GSAP
Пример:
При клике на фотографию происходит ее увеличение
HTML:
1 |
<div id="panorama"></div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 |
#panorama { width: 100%; height: 600px; overflow:hidden; margin: 20px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 16px 20px rgba(0,0,0,0.2); } #panorama div { position:absolute; user-select: none; overflow:hidden; } |
JS:
- Подключаем библиотеку GSAP (версия 3.2.6)
- Подключаем скрипт панорамы
Настройка фотографии:
- Прописываем путь к изображению (строка 26 -
backgroundImage:'url(/demo/i/pan.jpg)'
) - Указываем реальную его высоту (строка 22 -
height:1200
) - Ставим кол-во частей, на которое будет оно разделено (строка 8 -
const n = 16
) - Делим реальную его щирину на кол-во частей, в нашем случае 16, и указываем результат в строке 21 -
width:235
и 27 -backgroundPosition:i*-235+'px 0px'
- Подкручиваем процент в строке 25 -
transformOrigin:String("50% 50% -585%")
, чтобы части фотографии не налезали друг на друга и между ними не было разрывов - Можно еще в первой строчке изменить перспективу
gsap.set('#panorama', {perspective:1000})
и задать значения зума (при клике) в строке 42 -gsap.to('.box', {duration:0.4, z:[1300,1500,1700][zoom]})
Найдено на codepen.io у пользователя Tom Miller
Смотрите также:
Фон из точек с ховер эффектом на CSS
Анимированный фон для блока или секций с размахивающим руками мороженным
3D hover-эффект ориентированный на направление движения курсора мыши
Добавить комментарий:
Ваш комментарий отправлен!
Жаль, с мобильного телефона нельзя управлять
Ну это очень круто!!!
Большое спасибо!
А как сделать, что было во весь экран?
А если высоту задать 100% или 100vh не получается?
Прикольный эффект. Все ни как руки не дойдут до GSAP.