3D панорама на JS

Эффект панорамы реализован на библиотеке GSAP

Пример:

При клике на фотографию происходит ее увеличение

HTML:

CSS:

JS:

Настройка фотографии:
  • Прописываем путь к изображению (строка 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

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

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

Ваш комментарий отправлен!

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

  • PiVirus:

    Прикольный эффект. Все ни как руки не дойдут до GSAP.

    Ответить