JavaScript: Панорама 180

Создание из фотографии трехмерной панорамы и как использовать анимацию с помощью JavaScript-библиотеки GSAP.

Настройка фотографии:

Прописываем путь к изображению (строка 29 - backgroundImage:'url(/demo/i/pan.jpg)').
Указываем реальную его высоту (строка 25 - height:1125).
Ставим количество частей, на которое будет оно разделено (строка 9 - const n = 16).
Делим реальную ширину на количество частей, в нашем случае 16, и указываем результат в строке 23 - width:250 и 30 - backgroundPosition:i*-250+'px 0px'.
Подкручиваем процент в строке 28 - transformOrigin:String("50% 50% -626%"), чтобы части фотографии не налезали друг на друга и между ними не было разрывов.
Можно в первой строчке изменить перспективу gsap.set('#panorama', {perspective:1000}) и задать значения зума (при клике) в строке 49 - gsap.to('.box', {duration:0.4, z:[1300,1500,1700][zoom]}).