lynx.digital 15.06.2015

В апреле этого года я принял участие в разработке сайта для небольшого проекта, специализирующегося на создании промо-страниц. Основными требованиями к реализации были адаптивность, наличие паралакса и использование векторной графики для создания использованных в макете геометрических фигур. В проекте предполагалось использование сторонних JavaScript-библиотек: паралакс эффектов и слайдера с touch-интерфейсом.

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

Что касается слайдера, то здесь задача оказалась не такой простой, как могло показаться с первого взгляда. Несмотря на то, что интернет пестрит скриптами для реализации баннеров любой сложности, ни один из них не смог удовлетворить меня по всем критериям отбора: простота настройки, качество кода, поддержка touch-событий большинства устройств, адаптивность и конечно же отсутствие багов — при использовании сторонних библиотек в подобных проектах очень важно, чтобы они работали стабильно, иначе время, потраченное на поиск и устранение неполадок сведет на нет все преимущества переиспользования уже готового стороннего кода. Результатом такого отбора стало создание собственного скрипта для реализации слайдера с touch-интерфейсом. Об этом слайдере я еще напишу отдельно, здесь же скажу, что он поддерживает скролл на Android и iOS устройствах, swipe-жесты браузеров на базе webkit, Firefox.

Сборка проекта осуществлялась на базе пакета Citadel (SASS, require.js, Grunt). Живую версию проекта можно посмотреть здесь.

by 15.06.2015