🍰 Pastry for Pritha 

C такими анимациями, ваши сайты будут покупать на «УРА». 

⤷Забрать код

@HtmlGram | #css

🥑 GSAP ScrollTrigger test with clipping 

Приятное появление фотографий на сайте

⤷Забрать код

@HtmlGram | #scss #js

🌸 CSS цветок.

Каждый лепесток отдельно прописан в HTML и анимирован в CSS.

⤷Забрать код

@HtmlGram | #css

✅ Интерфейс в 3D

По сути это обычная верстка, но с помощью свойства transform развернута так, что создается эффект 3D.

⤷Забрать код

@HtmlGram | #css

📡 To the future

Анимация в стиле Retro Wave, реализованная на чистом CSS

⤷Забрать код

@HtmlGram | #css

💥 Magic card 

Небольшой контейнер с переливающейся рамкой, при нажатии на который показывается информация внутри. Отлично подойдёт для отображения чего-то интересного для пользователя.

⤷Забрать код

@HtmlGram | #css

🌈 Helix animation 

Вкусная анимация загрузки.

⤷Забрать код

@HtmlGram | #css

🐼 Кнопка-панда

Сама кнопка анимируется в CSS. А панды сделаны в виде svg-картинок, которые анимируются в JS.

⤷Забрать код

@HtmlGram | #css #js

🌿 CSS only 3D button
 
Стильная анимация выхода кнопки.

⤷Забрать код

@HtmlGram | #css #js

🐸 Анимация

Переход изображения в формате SVG

⤷Забрать код

@HtmlGram | #css #js

🎯 Link hover animation

Анимация при наведении на ссылку, реализованная с помощью SCSS и SVG, без использования JavaScript

⤷Забрать код

@HtmlGram | #scss

🍜 "Toss" Add to Cart Animation

Анимация добавления товара в корзину. Реализована с помощью jQuery

⤷Забрать код

@HtmlGram | #scss #js

🍦 Слайдер  

Адаптивный слайдер из карточек для твоего сайта

⤷Забрать код

@HtmlGram | #scss #js

☘️ Conic Gradient

Эффект появления реализован при помощи css свойства mask, значение которого изменяется в JS.

⤷Забрать код

@HtmlGram | #css #js

🚘 Manufactured 

Приятная гифка

⤷Забрать код

@HtmlGram | #css #js

🍬 Content filter 

Адаптивная страница с фильтрацией контента на чистом CSS.

⤷Забрать код

@HtmlGram | #scss

💦 Имитация чернильных клякс

Выполнена на canvas + JS
«Кляксы» можно добавлять кликом по холсту. Обратите внимание, что старые бледнеют при добавлении новых, «впитываясь» в «бумагу», что добавляет реалистичности.

⤷Забрать код

@HtmlGram | #css #js

🍊 Random Password Generator 

Генератор случайных паролей

⤷Забрать код

@HtmlGram | #scss #js

⛳ Menu micro-interaction with CSS 

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

⤷Забрать код

@HtmlGram | #scss

✨ Анимация

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

⤷Забрать код

@HtmlGram | #css #js

🌴 Generative Tree Animation

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

⤷Забрать код

@HtmlGram | #css #js