Html Gram
9.92K subscribers
13 photos
451 videos
2.18K links
Улучши свой сайт, используя крутые codepen решения.

Сотрудничество: @dad_admin

Ссылка на канал: @HtmlGram1
Канал на бирже: https://telega.in/c/HtmlGram1

РКН: https://bit.ly/3XoPSV0
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
3D carousel

При прокрутке колеса мыши меняется радиус слайдера.

Забрать код

@HtmlGram1 | #css #javascript
15
This media is not supported in your browser
VIEW IN TELEGRAM
About Us Pop-Out Effect

Простой эффект всплывающего изображения на чистом CSS.

Забрать код

@HtmlGram1 | #css
9
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Typing Effect

Эффект набора текста на чистом CSS.

Забрать код

@HtmlGram1 | #css
11
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Goey footer

Футер с анимацией стекающих капель на чистом CSS.

Забрать код

@HtmlGram1 |#css
10
This media is not supported in your browser
VIEW IN TELEGRAM
Tabbar

Панель вкладок с "жидкими иконками", анимация реализована с помощью GSAP и MorphSVGPlugin.

Забрать код

@HtmlGram1 | #css #GSAP
11
This media is not supported in your browser
VIEW IN TELEGRAM
Airplanes

Анимация полёта самолета при прокрутке страницы, реализованная с помощью GSAP и ScrollTrigger.

Забрать код

@HtmlGram1 | #css
24🦄3👨‍💻2
This media is not supported in your browser
VIEW IN TELEGRAM
React Slider w/ Hover Effect

Слайдер, созданный с помощью React, с оригинальным эффектом при наведении.

Забрать код

@HtmlGram1 | #javascript #react
10
This media is not supported in your browser
VIEW IN TELEGRAM
GSAP ScrollTrigger

Анимация движения текста и изображений при скролле страницы, реализованная с помощью GSAP и ScrollTrigger.

Забрать код

@HtmlGram1 | #gsap
14
This media is not supported in your browser
VIEW IN TELEGRAM
Infinite draggable webgl slider

Бесконечный слайдер, реализован с помощью GSAP и Tree.js.

Забрать код

@HtmlGram1 | #gsap
👨‍💻74
This media is not supported in your browser
VIEW IN TELEGRAM
Pokemon Card Holo Effect

Голографическая карта, реализованная с помощью jQuery.

Забрать код

@HtmlGram1 | #jQuery #css
17
This media is not supported in your browser
VIEW IN TELEGRAM
Stripe Like CSS Only Menu

Меню с эффектом слайдера и плавной анимацией на чистом CSS.

Забрать код

@HtmlGram1 | #css
12
This media is not supported in your browser
VIEW IN TELEGRAM
CSS3 Loader & Spinners

Коллекция из 126 прелоадеров на чистом CSS.

Забрать код

@HtmlGram1 | #css
20
This media is not supported in your browser
VIEW IN TELEGRAM
Download Button Animation

GSAP-анимация кнопок для скачивания файлов.

Забрать код

@HtmlGram1 | #GSAP
10👨‍💻2
This media is not supported in your browser
VIEW IN TELEGRAM
Netflix Intro Animation Pure CSS

Вступительная анимация Netflix на чистом CSS.

Забрать код

@HtmlGram1 | #css
17
This media is not supported in your browser
VIEW IN TELEGRAM
Fluid text hover

Плавная GSAP-анимация SVG-маски внутри текста при наведении.

Забрать код

@HtmlGram1 | #GSAP
17
This media is not supported in your browser
VIEW IN TELEGRAM
Sliding tabs

Скользящие вкладки на чистом CSS.

Забрать код

@HtmlGram1 | #css
13
This media is not supported in your browser
VIEW IN TELEGRAM
Liquid loader

"Жидкий" прелоадер, реализован из SVG-элементов с анимацией на чистом CSS.

Забрать код

@HtmlGram1 | #css
15
This media is not supported in your browser
VIEW IN TELEGRAM
Card Hover Interactions

Адаптивные карточки с необычным взаимодействием при наведении на чистом CSS.

Забрать код

@HtmlGram1 | #css
18
This media is not supported in your browser
VIEW IN TELEGRAM
Holiday Feature Folding Cards

Карточки в виде открыток с контентом внутри на чистом CSS.

Забрать код

@HtmlGram1 | #css
16👨‍💻3
This media is not supported in your browser
VIEW IN TELEGRAM
Neomorphic Form

Форма в стиле неоморфизма на чистом CSS.

Забрать код

@HtmlGram1 | #css
14
This media is not supported in your browser
VIEW IN TELEGRAM
Paper plane button

Кнопка с анимацией превращения в бумажный самолётик после успешной отправки данных. Анимация реализована с помощью GSAP.

Забрать код

@HtmlGram1 | #GSAP
13