что сделано:
Оптимизация структуры (UX)
Редизайн сайта
Анимации на GSAP и ScrollTrigger
Слайдеры и галереи на Swiper
Кастомные JavaScript-эффекты
Webflow анимации
ISKRIS
[ 01 ]
О проекте
ISKRIS — креативное агентство, которое занимается созданием мероприятий, пространств, предметов и специальных проектов для брендов. Сайт знакомит с агентством, его командой и работами. Я подключился к проекту на этапе разработки. Работал с готовым дизайном: собрал страницы в Webflow и реализовал анимации и интерактивные элементы.
[ 02 ]
Задачи
Нужно было точно перенести готовые макеты в Webflow, сохранив нестандартную композицию и расположение многочисленных изображений на главной и страницах проектов. Вёрстку предстояло дополнить кастомными CSS и JavaScript. Нужно было реализовать анимации при прокрутке, эффект следа из фотографий за курсором, галереи и синхронизированные слайдеры. Отдельная задача — адаптировать расположение элементов и способы управления под десктопные и мобильные экраны.
Вёрстка
Перенёс дизайн-макеты из Figma в Webflow с вниманием к деталям макета, дополнив вёрстку адаптивной логикой на CSS
В этом проекте на восприятие страницы влияют масштаб заголовков, расположение фотографий и расстояния между элементами. При вёрстке работал с этими деталями, чтобы сохранить композицию исходного дизайна. Отдельной частью разработки стало поведение блоков при прокрутке и изменении ширины экрана.
главная страница
На главной связал анимации спрокруткой идвижением курсора: логотип меняет размер иположение, фотографии следуют замышью, аэлементы контентных блоков реагируют наскролл.
Для главной настроил несколько сценариев взаимодействия: фотографии следуют за мышью, логотип меняется при скролле, а проекты и команду можно просматривать в слайдерах. Анимации реализовал на GSAP и ScrollTrigger, для слайдеров использовал Swiper.
[ 01 ]
Логотип и навигация
При прокрутке первого экрана крупный логотип уменьшается и перемещается в верхнюю часть страницы. Анимацию собрал на GSAP Timeline со ScrollTrigger. Ход анимации связан с положением скролла. Для навигационных ссылок настроил последовательное появление при загрузке и смещение при выходе из первого экрана.
[ 02 ]
Анимации контентных блоков
В разделах с направлениями и принципами работы активный пункт меняется по мере прокрутки. Переключение работает при движении вниз и возвращении назад. В блоке партнёров настроил увеличение звёзды и движение списка названий, а в разделе о миссии — уменьшение логотипа.
[ 03 ]
След из фотографий
Для эффекта использовал JavaScript и GSAP. Скрипт отслеживает перемещение мыши и показывает следующую фотографию, когда курсор проходит заданное расстояние. Перед запуском дожидается загрузки изображений через imagesLoaded.
[ 04 ]
Лента проектов
Собрал горизонтальную ленту на Swiper со свободным перетаскиванием. Карточки сохраняют заданную в вёрстке ширину, а количество видимых проектов зависит от размера экрана. Настроил управление с клавиатуры, когда слайдер находится в области просмотра.
[ 05 ]
Слайдер команды
Связал ленту миниатюр с основным слайдером команды. При выборе фотографии переключается соответствующий слайд с плавным переходом. Для этого использовал Swiper с модулем Thumbs и эффектом fade.
[ 06 ]
Стартовая заставка
Настроил анимированный счётчик и полосу прогресса на GSAP с собственной кривой ускорения. Повторное посещение сохраняется в sessionStorage: в той же вкладке заставка проигрывается быстрее.
Страница кейсов
Для проектов агентства реализовал два сценария просмотра. Знакомство с работами в общем списке с табами переключения и просмотр материалов внутри кейса с анимацией при наведении
[ 01 ]
Галерея на десктопе
Надесктопе принаведении фотография плавно увеличивается, аподписи появляются снизу. Вмобильной версии название иописание видны сразу, поэтому ихможно прочитать бездополнительного касания.
[ 02 ]
Анимации контентных блоков
Внутри кейса связал прокрутку ленты фотографий и видео со сменой крупного кадра слева. Область просмотра сохраняет положение на экране, пока посетитель листает материалы проекта.
[ 03 ]
Галерея на мобильных
На небольших экранах настроил галерею на Swiper с основным кадром и горизонтальной лентой миниатюр. Их переключение синхронизировано: материалы можно листать свайпом или выбирать нажатием на миниатюру. Кадры сменяются с плавным переходом.
Адаптив
Адаптировал вёрстку и поведение анимаций под размер экрана.
На небольших экранах скорректировал размеры изображений, типографику и расположение контента. Учёл и различия во взаимодействии: подписи карточек доступны без наведения, а галереи управляются касаниями. Для мобильного логотипа на главной настроил другой масштаб и более короткий участок анимации при скролле. Переключение активных текстов в блоке направлений ограничил шириной от 800 пикселей.
Лэндинг для продвижения запуска мобильного приложения социальной сети Real Karma на рынок
