⛳ Menu micro-interaction with CSS 

Небольшое меню, которое раскрывается при нажатии пользователя. Аккуратно, минималистично.

⤷Забрать код

@HtmlGram | #scss

✨ Анимация

Движение разноцветных морских актиний, начинается с области где был клик!

⤷Забрать код

@HtmlGram | #css #js

🌴 Generative Tree Animation

Генерация дерева, реализованная с помощью CSS и JavaScript

⤷Забрать код

@HtmlGram | #css #js

♨️ CSS Filter Cards 

Карточки с эффектом «блюра» при наведении мыши. Некий фокус на карточку.

⤷Забрать код

@HtmlGram | #css

🍿 Анимация
 
Лого анимация реализована с помощью anime.js

⤷Забрать код

@HtmlGram | #css #js

🥨 Shiny Debit Card

Банковская карточка c 3D-эффектом, реализованная на чистом CSS, без использования JavaScript

⤷Забрать код

@HtmlGram | #css

🌟 Спиннеры

Подборка оригинальных загрузчиков на HTML и CSS.

⤷Забрать код

@HtmlGram | #scss

🎁 Анимация

Карточки в тему анимации css

⤷Забрать код

@HtmlGram | #css

⚗️ Анимация

Лампа анимация включения и выключения реализована с помощью библиотеки GSAP Draggable и MorphSVG.

⤷Забрать код

@HtmlGram | #css #js

🎳 Text Alignment  

Презентабельная анимация разметки текста.

⤷Забрать код

@HtmlGram | #scss

🛳️ Форма входа

Реализована на HTML и CSS. При переключении тогла login/signup устанавливается CSS свойство transform, со значением translate3d

⤷Забрать код

@HtmlGram | #css

🚁 Perspective Loader

Анимация загрузки, реализованная на чистом CSS, без использования JavaScript

⤷Забрать код

@HtmlGram | #css

⛱️ Gentle button 'explode'

Эффект при наведении на кнопку, реализованный с помощью SVG, SCSS и библиотеки GSAP.js

⤷Забрать код

@HtmlGram | #scss #js

🌈 Monochromatic Yoyo

Сделана без использования JS. Автор добавил возможность настраивать фигуру. Для этого он создал радио кнопки, при нажатии на которые задействуются определенные стили

⤷Забрать код

@HtmlGram | #css

🎉 Fireworks in the mind 

Идея для сайта, пользователи будут в восторге

⤷Забрать код

@HtmlGram | #css #js

🤘 Включите свет

Логика создана в JS, которая завязаны на продолжительности нажатия на кнопку.

⤷Забрать код

@HtmlGram | #css #js

💚 Face Grid Track

Фотографии с отслеживанием положения курсора, реализованные с помощью препроцессора Pug, SCSS и JavaScript

⤷Забрать код

@HtmlGram | #scss #js

🏓 Рандомная диаграмма

Сделана на canvas. Созданные фигуры анимируются при помощи JS.

⤷Забрать код

@HtmlGram | #css #js

🥨 Слайдер
 
Горизонтальный слайдер с position: sticky

⤷Забрать код

@HtmlGram | #scss #js

🍒 Send 

Для обратной связи с вашими клиентами и пользователями вашего сайта. Просто добавьте красивую кнопку - "отправить".

⤷Забрать код

@HtmlGram | #scss

🍿 SVG Animation 

Анимация с распознаванием выбранного цвета, реализованная с помощью just-animate.js и TweenMax.js.

⤷Забрать код

@HtmlGram | #scss #js