2022 на выход, 2023 заходим

🎄 Sketch Button

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

⤷Забрать код

@HtmlGram | #scss #js #svg

🥑 Iridescent morphing blob

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

⤷Забрать код

@HtmlGram | #js #threejs

🐳 Disappear

Текст с анимацией, реализованный на чистом CSS, без использования JavaScript

⤷Забрать код

@HtmlGram | #css

🍔 X-Ray

Эффект при наведении на текст, реализованный с помощью SCSS и JavaScript

⤷Забрать код

@HtmlGram | #scss #js

💐 Airport Distance Map

Небольшое приложение на Vue, которое расcчитывает расстояние между двумя маркерами, которые можно перемещать с помощью Drag&Drop. Анимации реализованы при помощи библиотеки D3.

⤷Забрать код

@HtmlGram | #less #js #vue

🍁 Smooth infinite scrolling

Плавная бесконечная прокрутка с эффектом гиперпространства на основе JavaScript и библиотеки p5.js

⤷Забрать код

@HtmlGram | #сss #js #p5

💎 Анимированная кнопка "В корзину"

При нажатии на кнопку запускается анимация. Кнопка есть в двух цветах - белый и черный

⤷Забрать код

@HtmlGram | #scss #js #gsap

📮 Отправка сообщения

Сделано из двух svg картинок и чекбокса. При активации чекбокса одна картинка скрывается, а другая показывается.

⤷Забрать код

@HtmlGram | #scss

🐱 Bongo Cat

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

⤷Забрать код

@HtmlGram | #scss #js #gsap

🛡 Interactive particles text

Интерактивный текст, выполненный с использованием CSS и библиотеки Three.js

⤷Забрать код

@HtmlGram | #css #js #threejs

🎁 Этапы процесса заказа

Красиво анимированный контейнер этапов заказа товара только на CSS

⤷Забрать код

@HtmlGram | #scss

🪐 Rolling Text

Анимация волнообразного скольжения текста вверх и вниз при наведении

⤷Забрать код

@HtmlGram | #scss #js

✈️ 3Д-самолет

Сделан с использованием препроцессоров Pug и Stylus. Анимирован в Stylus. Реакция на курсор пользователя реализована в JS при помощи библиотеки gsap.

⤷Забрать код

@HtmlGram | #stylus #js #gsap

🍏 Horizontal Scroll Gallery

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

⤷Забрать код

@HtmlGram | #less #js

🏖 Download

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

⤷Забрать код

@HtmlGram | #scss #js #gsap

🪐 Radial Nav Menu

Круговое меню навигации, реализованное на SCSS, с применением TypeScript

⤷Забрать код

@HtmlGram | #scss #js #ts

🌱 Слайдер

Кратко, минималистично, красиво

⤷Забрать код

@HtmlGram | #stylus #gsap

🦜 Color Swatches

Набор карточек цвета с описанием. При выборе карточки задействуются CSS трансформации. В JS создана логика перевода цвета во все форматы.

⤷Забрать код

@HtmlGram | #css #js

🗽 Show button on Hover

При наведении на карточку, анимируется фон, состоящий из четырех блоков и отображается кнопка.

⤷Забрать код

@HtmlGram | #css

👀 Radio Hopping

Анимированные Radio Buttons, выполненные с помощью Sass

⤷Забрать код

@HtmlGram | #scss