💙 Пазл

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

⤷Забрать код

@HtmlGram | #scss #js

Social Media Icons

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

⤷Забрать код

@HtmlGram | #css

🤘 Sidebar

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

⤷Забрать код

@HtmlGram | #scss #js

🌋 Smooth Scroll Reveal 

Анимация плавного появления изображений при прокрутке страницы

⤷Забрать код

@HtmlGram | #css #js

😏 Feedback Reactions

Кнопки реакций, реализованные с помощью SCSS, без использования JavaScript

⤷Забрать код

@HtmlGram | #scss

🌐 Круговое меню

Сделано из списка ссылок в Haml и SCSS. Автор умело использует возможности препроцессоров, поэтому количество кода довольно небольшое.Круговое меню

⤷Забрать код

@HtmlGram | #scss

💗 SMASH that Like Button

Кнопка лайк с анимацией на чистом CSS.

⤷Забрать код

@HtmlGram | #scss #js

🔄 CSS Loaders

Подборка загрузчиков на HTML и SCSS. Для удобства сделано увеличение лоадера при наведении.

⤷Забрать код

@HtmlGram | #scss #js

👌 Horizontal Scroll Gallery

Интерактивная галерея с горизонтальной прокруткой, выполненная с помощью Less и библиотеки LocomotiveScroll.js

⤷Забрать код

@HtmlGram | #css #js

💢 Кнопка видеоплеера  

Необычная анимация кнопки воспроизведения для вашего видео на веб-странице

⤷Забрать код

@HtmlGram | #css #js

🍰 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