Начнем неделю с нечто приятного и необычного, все вы, наверняка, любите эффект параллакса, по этому мы бы сегодня хотели рассказать о нем, и о том, как создать замечательную 3D карусель с параллаксом при помощи GSAP. Возможно кто-то не знает, что такое GSAP, так вот, GSAP или его полное название GreenSock (GreenSock Animation Platform), суперэффективный, профессиональный класс анимации HTML5.  GSAP имеет слишком много функций, и сегодня одна из них ляжет в основу нашей карусели которая будет полноэкранной.

 

Если вы хотите создать красивый сайт, используя при этом уникальный дизайн с адаптивом и русским языком, тогда обратите внимание на предложение от наших партнеров, там можно найти много интересного по вкусной цене:

Шаг 1. HTML

После того как вы подключили все скрипты к вашей странице перейдем к разметке, часть графических элементов будет реализована при помощи SVG, которые будут заключены с подписями в общий контейнер. Обратите внимание, что в демке используется премиум скрипт от greensock — splittext, вам необходимо приобрести подписку, чтобы использовать его:

На примере мы показали реализацию одного контейнера с содержимым, вы можете добавить больше слайдов, применив к ним свои классы и изображения.

Шаг 2. CSS

Теперь перейдем к стилям, нам необходимо все стилизовать по классам которые мы присвоили выше, стили у нас будут следующими:

Шаг 3. JS

Последним шагом станет добавление эффекта движения за курсором мыши, а также анимации, поможет нам в этом javascript:

Вот такая, замечательная, карусель получилась у нас. Материал предоставлен зарубежным источником для ознакомления.

Вот и все. Готово!