4 134 Text / Codepen

Гибкий текст

Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.

Гибкий текст
4 575 Скрипты / Other

Изменение формы курсора при наведении на ссылку

Эффект двойного курсора, когда за привычной стрелкой двигается кружок. Когда наводим на элемент с определенным классом, например на ссылку, то кружок плавно увеличивается в размере. Для придания плавности движения кружку используется библиотека GSAP.

Изменение формы курсора при наведении на ссылку
5 016 Parallax / Codepen

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

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

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

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

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

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