⌛ Термостат

Выполнен и анимирован на чистом CSS

⤷Забрать код

@HtmlGram | #css

🗼 Анимация с маяком

Разметка написана на Pug. Работает постоянная CSS анимация, при наведении происходит Parallax эффект, который реализован с помощью библиотеки ParallaxJs

⤷Забрать код

@HtmlGram | #scss #js

🐬 One short life  

Анимация для рекламного ролика.

⤷Забрать код

@HtmlGram | #scss

🍔 Click to send

Анимированная кнопка "Отправить", выполненная с помощью SVG, CSS и библиотеки GSAP.js

⤷Забрать код

@HtmlGram | #css #js #gsap

⛰️ Фоновый слайдер

Вертикальный слайдер, переключаемый с помощью свайпов, колесика мышки или кнопок вверх или вниз.

⤷Забрать код

@HtmlGram | #css #js

🍷 Memory Game

Интересная игра, с интересным дизайном и простой разработкой.

⤷Забрать код

@HtmlGram | #scss #js

🍩 Rotation Navigation

В этой реализации автор создал импровизированный слайдер с интересным эффектом переключения.

⤷Забрать код

@HtmlGram | #scss #js

💰 Игра

Игра на чистоv css, кубик двигается за указателем, можно использовать во время загрузки сайта

⤷Забрать код

@HtmlGram | #scss

🎁 408 ERROR

Шаблон 408 ошибки с использованием 
three.js, ccapture.js

⤷Забрать код

@HtmlGram | #scss #js

👀 Карточки

Созданы без использования JS. Разметка написана на Pug, а стили и анимация на SCSS.

⤷Забрать код

@HtmlGram | #scss

🍭 Confetti Button 

Обыкновенная кнопка с небольшой анимацией при нажатии + выпускает конфетти. Можно использовать эту фичу в какие-то праздники.

⤷Забрать код

@HtmlGram | #Postcss #js

✅ Text by circles

Текст создается на canvas, в js создана сложная логика отрисовка букв.

⤷Забрать код

@HtmlGram | #js

🥛 Карточка рецепта 

Интерактивная карточка с описанием рецепта 
коктейля

⤷Забрать код

@HtmlGram | #css #js

💋 Чекбокс

Оригинальный чекбокс, реализованный на CSS.

⤷Забрать код

@HtmlGram | #css #js

🍏 Magnify Glass / Zoom

Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря который фильтр убирается в месте, где находится курсор пользователя.

⤷Забрать код

@HtmlGram | #css #js

🏓 Кнопки навигации

Переключающиеся пункты меню, при нажатии применяется анимация написанная на SCSS и JS.

⤷Забрать код

@HtmlGram | #scss #js

☕ Цветные линии

Градиентная линия постоянно изменет свою форму, выполнена в виде SVG.

⤷Забрать код

@HtmlGram | #css #js

💥 Анимация пузырьки

Пузырьки для фона на чистом CSS

⤷Забрать код

@HtmlGram | #scss

🚲 Велосипед

Приходилось ли вам реализовывать сложную анимацию? 
Не изобретай велосипед, используй готовый код. 

⤷Забрать код

@HtmlGram | #css #js

💙 Пазл

Сами фрагменты создаются через JS и анимируется с помощью CSS keyframes. При этом для анимации используются CSS переменные, значения которым задаются через JS.

⤷Забрать код

@HtmlGram | #scss #js

Social Media Icons

Иконки c всплывающими окнами, реализованные на чистом CSS, без использования JavaScript

⤷Забрать код

@HtmlGram | #css