🍏 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

🤘 Sidebar

Фон сайдбара является svg картинкой, которая анимируется через js при нажатии.

⤷Забрать код

@HtmlGram | #scss #js

Menu Animation

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

⤷Забрать код

@HtmlGram | #анимация #меню #кнопка #css #javascript

Positive Negative

Слайдер температуры с положительным и отрицательным значениями. Реализован с помощью Vue.


⤷Забрать код

@HtmlGram | #слайдер #vue

Animated BottomBar

Несколько вариантов анимаций нижней панели, реализованные с помощью CSS и JavaScript.

⤷Забрать код

@HtmlGram | #анимация #tabbar #css #javascript

⚙️Анимация загрузки

Оставляем для вас ниже код, который поможет создать анимацию загрузки на HTML, CSS и JavaScript.

⤷Посмотреть код

@HtmlGram | #html #css #javascript

🪴CSS3 Loader & Spinners

Набор анимаций загрузки, реализованных SCSS, без применения JavaScript.

⤷Забрать код

@HtmlGram | #scss

StockAI — бесплатные стоковые фото, созданные ИИ

Картинки высокого качества, полностью созданные искусственным интеллектом. Можно использовать в любом проекте, не беспокоясь об авторском праве.

Искать нужные картинки можно через строку поиска или через категории: природа, портреты, еда, путешествия, бизнес и животные.

#нейросеть #фото

🫧Glow Button

Кнопка с эффектом при наведении, реализованная на SCSS и SVG, с применением JavaScript

⤷Глянуть код

@HtmlGram | #scss #javascript

💥 Magic card 

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

⤷Забрать код

@HtmlGram | #css

🎯 Link hover animation

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

⤷Забрать код

@HtmlGram | #scss

🎛️Hover Blur Cards

Эффект при наведении на карточки, реализованный на CSS, с применением JavaScript

⤷Забрать код

@HtmlGram | #css #javascript

🍩 Rotation Navigation

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

⤷Забрать код

@HtmlGram | #scss #js

Прелоадер

⤷Забрать код

@HtmlGram #html | #css | #js