Эффект панорамы реализован на библиотеке 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(/blog/img/blank.webp)') - Указываем реальную его высоту (строка 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
Скрипт ComcastifyJS для эмуляции загрузки изображений как на модеме 56к
Волнистые линии для секции управляемые курсором
Добавить комментарий:
Ваш комментарий отправлен!
А как прикрутить гиперссылку для перехода на другой сайта к какому либо месту фотографии?
Бессмысленно, так как нет мобильной версии
Жаль, с мобильного телефона нельзя управлять
Ну это очень круто!!!
Большое спасибо!
А как сделать, что было во весь экран?
А если высоту задать 100% или 100vh не получается?
Прикольный эффект. Все ни как руки не дойдут до GSAP.