Коллекция css анимаций кнопок
Коллекция css анимаций для кнопок при наведении на них курсора
Резиновый ползунок или range slider
Range slider с эффектом резиновости реализованном с помощью gsap tweenmax.
Жидкий текст при наведении
При hover на текст его фон становится текучим, как жидкость.
Гибкий текст
Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.
Изменение формы курсора при наведении на ссылку
Эффект двойного курсора, когда за привычной стрелкой двигается кружок. Когда наводим на элемент с определенным классом, например на ссылку, то кружок плавно увеличивается в размере. Для придания плавности движения кружку используется библиотека GSAP.
Слайдер с размытыми градиентными не активными слайдами
Для эффекта размытия в местах сопряжения слайдов используется SVG c фильтром размытия
Эффект наведения следящий за курсором
Подчеркивание ссылки при наведении на пункт меню
Форма авторизации и регистрации
Концепт формы авторизации и регистрации с интересной анимацией переключения
Параллакс эффект при ресайзе браузера
Параллакс эффект, созданный на CSS. Тридцать дивов с одним и тем же фоном из цветов, абсолютно с позиционирован и, благодаря координате Z, каждый из дивов смещен на уровень ниже, относительно другого. При этом трансформация по оси Z находится в зависимости от ширины viewport, так как используется единица vw.
Загрузчик дрифтующая машина
Загрузчик для страницы в виде дрифтующей по кругу машины. Анимация на CSS, машинка это SVG.
Загрузчик в виде кубиков лего
Анимация загрузчика страницы в виде кубиков лего. Сделано на CSS.
Stepper.js — увеличение/уменьшение значений в input type="number" заданным шагом
Скрипт позволяющий кастомизировать кнопки плюс/минус у поля input type="number" в соответствии с дизайном. Настройки интервала значений и шага задаются через привычные атрибуты поля: step, max, min. Поля такого рода часто используются при указании количества товара помещаемого в корзину, а также управление товаром в самой корзине.