Собственная библиотека из 50+ фронтенд-компонентов: анимации, слайдеры, утилиты, работа с векторной графикой и эффектами. Использовалась в реальных проектах и как копилка решений.
#1
Анимации и эффекты (GSAP)
Набор GSAP-решений: параллакс, прикреплённый hero, интеграция с Locomotive Scroll, цвет фона при скролле, blur-slider, button effects (ink, ripple, magnetic), clip-path, countdown, eraser, filling text, sticky sections
GSAP, ScrollTrigger, Locomotive Scroll, JavaScript
- Параллакс-эффекты для изображений
- Закреплённый hero с ScrollTrigger
- Locomotive Scroll + GSAP ScrollTrigger
- Смена цвета фона при скролле
- Blur-эффект для слайдера
- Кастомные эффекты кнопок
- CSS clip-path анимации
- Eraser-эффект (ластик)
- Заливка текста анимацией
- Кастомный курсор (magic pointer)
- Sticky-секции
#2
Слайдеры (Swiper.js)
Расширенные конфигурации Swiper: интеграция с imagesLoaded, бегущая строка, анимации GSAP в слайде, прогресс-бар по слайдам, видео-слайды
Swiper.js, GSAP, JavaScript, HTML, CSS
- Swiper + imagesLoaded lazy loading
- Бегущая строка на Swiper
- Swiper + GSAP анимации внутри слайдов
- Прогресс-бар синхронизированный со слайдами
- Видео-слайды с автовоспроизведением
#3
Формы и валидация
Набор улучшений для форм: кастомный select (Chosen), date input, file input, валидация по ожидаемому значению, только цифры, отслеживание ввода
JavaScript, jQuery, Chosen, HTML, CSS
- Стилизованный select через Chosen jQuery
- Кастомный date input с маской
- Кастомный file input с превью
- Валидация ввода по ожидаемому шаблону
- Поле только для цифр
- Отслеживание событий ввода
#4
JavaScript-утилиты
Набор самописных утилит: debounce, age-calculator, get-coords, copy-to-clipboard, element-from-point, all-images-loaded, touch-device-detection, load-scripts-from-html, scroll-to-top, vh-fallback
Vanilla JavaScript
- Debounce-функция для оптимизации событий
- Расчёт возраста по дате рождения
- Получение координат элемента на странице
- Copy-to-clipboard универсальная утилита
- Определение элемента под координатами (elementFromPoint)
- Ожидание загрузки всех изображений
- Определение touch-устройства
- Загрузка скриптов из HTML-строки
- Кнопка «наверх»
- CSS vh fallback для мобильных
#5
SVG и векторная графика
Работа с SVG: рисование маршрутов на карте, получение координат клика, интеграция с Yandex Maps
SVG, JavaScript, Yandex Maps API
- Интерактивная SVG-карта с прокладкой маршрута
- Получение координат клика на SVG-элементе
- Yandex Maps: отключение скролла зума вне карты
#6
Прочие компоненты
Accordion, cookie policy, page index, sort list, bootstrap popup, adv popup with timer, video autoplay, iframe fit-height, product card с конфигуратором
JavaScript, PHP, Bootstrap, HTML, CSS
- Accordion на Vanilla JS
- Bootstrap popup с сессионным таймером
- Cookie policy для Bitrix (GDPR)
- Page index / навигация по странице
- Сортировка списка по data-атрибутам
- Видео с автовоспроизведением
- Auto-height iframe
