2 045 Parallax / Codepen

Параллакс эффект при ресайзе браузера

Параллакс эффект, созданный на CSS. Тридцать дивов с одним и тем же фоном из цветов, абсолютно с позиционирован и, благодаря координате Z, каждый из дивов смещен на уровень ниже, относительно другого. При этом трансформация по оси Z находится в зависимости от ширины viewport, так как используется единица vw.

Параллакс эффект при ресайзе браузера
8 515 Скрипты / Form

Stepper.js — увеличение/уменьшение значений в input type="number" заданным шагом

Скрипт позволяющий кастомизировать кнопки плюс/минус у поля input type="number" в соответствии с дизайном. Настройки интервала значений и шага задаются через привычные атрибуты поля: step, max, min. Поля такого рода часто используются при указании количества товара помещаемого в корзину, а также управление товаром в самой корзине.

Stepper.js — увеличение/уменьшение значений в input type="number" заданным шагом
6 960 Скрипты / Other

Bubbly — анимированный фон из пузырьков на canvas

Скрипт bubbly позволяет создать на страницы анимированный фон из пузырьков, которые можно заставить двигаться по заданной математической формуле. В параметрах также настраиваются разные визуальные эффекты, такие как блюр, цвета, размеры и т.п.

Bubbly — анимированный фон из пузырьков на canvas
6 366 Скрипты / Menu & Nav

Canvi — off-canvas панель навигации

Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.

Canvi — off-canvas панель навигации
6 590 Скрипты / Time & Clock

Часы

Аналоговые часы на CSS и чистом JS, отображающие текущее время у пользователя

Часы
6 257 Скрипты / Other

Cocoen — сравнение изображений до и после

Визуальное сравнение двух изображений одного и того же момента, но при разных условиях. Передвигая бегунок слева направо или в обратном направлении можно наглядно сравнить состояния До и После.

Cocoen — сравнение изображений до и после