codepen.js

@codepen_js

Сборник крутых и полезных фич для вашего сайта: готовый код на css и javascript, который можно вставить в проект. Подходит веб-разработчикам и дизайнерам.

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

Канал на бирже:
https://telega.in/c/codepen_js

№ 4799182616

codepen.js (Russian)

Канал "codepen.js" - это сборник крутых и полезных фич для вашего сайта. Здесь вы найдете готовый код на css и javascript, который можно вставить в свой проект, чтобы сделать его еще более уникальным и функциональным. Этот канал подойдет как для веб-разработчиков, так и для дизайнеров, которые хотят сделать свои работы более привлекательными и современными.

Для сотрудничества и коммерческих предложений обращайтесь к администратору канала @noname_media.

Присоединяйтесь к нашему каналу и следите за обновлениями, чтобы первыми узнавать о новых интересных фичах и возможностях для вашего сайта. Просто перейдите по ссылке https://telega.in/c/codepen_js и подписывайтесь на наш канал прямо сейчас!

codepen.js

21 Nov, 06:05

Preloader SVG animation — тематический вариант анимации ожидания для какого-то действия на сайте. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

396

codepen.js

20 Nov, 16:05

Smooth Pulse Button — пульсирующая кнопка для воспроизведения видео. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

606

codepen.js

20 Nov, 06:05

Link Hover Interaction — эффектная анимация при наведении на ссылки с текстом. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

701

codepen.js

19 Nov, 16:05

Icon Animation — 6 вариантов анимации для кнопки, которая открывает и закрывает мобильное меню. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

784

codepen.js

19 Nov, 06:05

Wall of text — плавно движущиеся строки с текстом в качестве фона для вашего сайта. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

813

codepen.js

18 Nov, 16:05

Hamburger menu animation — кнопка меню. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

865

codepen.js

18 Nov, 06:05

Preloader — залипательная анимация загрузки страницы. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

920

codepen.js

17 Nov, 16:05

Space Journey — космос. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

988

codepen.js

17 Nov, 06:05

space background — успокаивающий космический фон на вашем сайте. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,093

codepen.js

16 Nov, 16:05

loader #01 — ожидание загрузки в виде движения линий по окружности. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

988

codepen.js

16 Nov, 06:05

Image Preloader — ожидание загрузки в виде параллельных линий, одна из которых подталкивает другую. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,070

codepen.js

15 Nov, 16:05

Circle preloader — круговорот линий во время ожидания загрузки. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,170

codepen.js

15 Nov, 06:05

Gooey Preloader — ожидание загрузки в виде маленьких капель. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,183

codepen.js

14 Nov, 16:05

ScrollTrigger Image Zoom — масштабирование изображения при скроллинге. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,227

codepen.js

14 Nov, 12:05

Бесплатный практический вебинар: Профессия «Frontend-разработчик».

⏰ Когда: 19 ноября в 19:00 по мск.

Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере 🎮

Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе.

Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.

1,225

codepen.js

14 Nov, 06:05

Card UI Design — появление кнопки со смещением остальных элементов при наведении на карточку. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,148

codepen.js

13 Nov, 16:05

Cards — эффект разворота карточек и перехода от одной к другой. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,346

codepen.js

13 Nov, 06:05

Animation with Particle — фон, в котором частицы разбегаются при наведении курсора мыши. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,303

codepen.js

12 Nov, 16:05

Animation Preloader — ожидание загрузки сайта. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,236

codepen.js

12 Nov, 06:05

Animated Rainbow Toggle Button — яркий переключатель. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,393

codepen.js

11 Nov, 16:05

Search Input Animation — выезжающая строка поиска при нажатии на лупу. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

400

codepen.js

11 Nov, 06:05

Background Animation — круговорот звёздного неба в качестве фона для вашего сайта. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

627

codepen.js

10 Nov, 16:05

Falling Snowflakes — падение снежинок в качестве фона для вашего сайта. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

735

codepen.js

10 Nov, 06:05

Book Preloader — ожидание загрузки в виде перелистывания страниц книги. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

793

codepen.js

09 Nov, 16:05

Particles Background Animation Effects — хаотичное движение цветных частиц в качестве фона сайта или приложения. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

810

codepen.js

09 Nov, 06:05

Converting a checkbox when running tasks — преобразование флажка при выполнении задач по аналогии с заметками. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

743

codepen.js

08 Nov, 16:05

Menu Animation — изменение цвета текста при наведении на заголовки меню. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

812

codepen.js

08 Nov, 06:05

Light Ball Preloader — прелоадер, напоминающий солнечное затмение. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

880

codepen.js

07 Nov, 16:05

Rainbow Preloader — круговое движение несколько частиц. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

938

codepen.js

07 Nov, 06:05

Ubisoft Quartz Background Animation — размытая анимация отлично подойдёт для фона на вашем сайте. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,088

codepen.js

06 Nov, 16:05

Menu Animation — интересный вариант нажатия на бургер-кнопку. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,043

codepen.js

06 Nov, 12:05

🚀 Изучай HTML и CSS с нуля! 🚀

Присоединяйтесь к нашему Telegram-каналу
[https://t.me/made_in_html_css]

Здесь вы найдете:

Уроки с нуля – от основ к сложным темам.
Практические задания – применяйте знания на практике.
Советы от опытных разработчиков – получайте помощь и рекомендации.
Участие в проектах – накапливайте практический опыт.
Обсуждения – делитесь успехами и задавайте вопросы.

Присоединяйтесь к Made in HTML/CSS и начните обучение уже сегодня! 🌟

616

codepen.js

06 Nov, 06:05

Loading Animation — ожидание загрузки в виде ассиметричного движения линий по окружности. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,137

codepen.js

05 Nov, 16:05

animation — медленный круговорот звёздного неба. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,127

codepen.js

05 Nov, 06:05

preloader — ожидание загрузки в виде прыгающих частиц. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,263

codepen.js

04 Nov, 16:05

Glow slider — ползунок. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,255

codepen.js

04 Nov, 12:05

Платные курсы больше не нужны!

Эти каналы помогут освоить веб-разработку с нуля ➡️

➡️

🖥

Senior Frontend - JS, HTML и CSS

👩‍💻

Frontend Interview - как проходить собеседования

👩‍💻

Frontender Libs - библиотеки для фронтендеров

👩‍💻

Web Craft - только Web-разработка

👩‍💻

Python_practics - обучающие материалы по Python

📌

Практические задачи, разборы кода, тесты, вопросы с собеседований, полезные статьи

С таким набором легко зайдешь в IT💪

871

codepen.js

04 Nov, 06:05

Icon hover — иконки соцсетей окрашиваются при наведении на них. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,215

codepen.js

03 Nov, 16:05

Helical dust — бесконечная анимация. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,288

codepen.js

03 Nov, 06:05

Dots & Ring Loader — загрузчик. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,285

codepen.js

02 Nov, 16:05

Holiday Feature Folding Cards — анимация вращения голографической карточки. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,341

codepen.js

02 Nov, 06:05

Bouncy image radio group — карточка изображений с анимацией и расширением при нажатии. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,017

codepen.js

01 Nov, 16:05

preloader — анимация загрузки. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,186

codepen.js

01 Nov, 06:05

CSS scroll-driven scroll-snapping animations — анимация горизонтального перехода между страницами. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,299

codepen.js

31 Oct, 16:05

Star Trails with options — звёзды генерируются и анимируются. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,224

codepen.js

31 Oct, 06:05

Preloader animation — загрузка. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,215

codepen.js

30 Oct, 16:05

deep dive — погрузка. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,320

codepen.js

30 Oct, 06:05

Native CSS particle animation with sin() and cos() — анимация частиц. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,354

codepen.js

29 Oct, 16:05

Screensaver — заставка. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,341

codepen.js

27 Oct, 16:05

Morphing Button — кнопка с анимацией. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

386

codepen.js

27 Oct, 06:05

Carousel — анимированный слайдер карточек. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

588

codepen.js

26 Oct, 16:30

Превращайте лиды в клиентов без лишних усилий c помощью LeadPlan

LeadPlan – сервис для создания эффективных поп-апов и виджетов без программирования, который поможет:
- собрать базу для рассылок;
- сегментировать аудиторию;
- настраивать стратегии показа виджетов;
- выбирать моменты, когда посетителю действительно требуется помощь в принятии решения о покупке;
- передавать данные в сервисы email-рассылок с готовыми интеграциями;передавать данные по вебхукам.

LeadPlan – это:
✅ просто: создавайте формы за пару минут, даже если вы раньше этого не делали;
✅ профессионально: режим тонкой настройки для создания индивидуального дизайна;
✅ наглядно: отслеживайте ключевые показатели работы виджетов;
✅ эффективно: проводите A/B-тесты гипотез и выбирайте рабочие стратегии.
➡️ Попробуйте LeadPlan бесплатно прямо сейчас!

Реклама. ООО "ПИСЬМО". ИНН 7811602601.

708

codepen.js

26 Oct, 16:05

Terrazzo elements — элементы для сайта. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

655

codepen.js

26 Oct, 06:05

Light/Dark Toggle With Morphing Icon — переключатель темы оформления. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

747

codepen.js

25 Oct, 16:05

Silly Buttons — анимированные кнопки с интересным интерактивом. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

824

codepen.js

25 Oct, 06:05

Carousel — интерактивная карусель с карточками достопримечательностей мира. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

922

codepen.js

24 Oct, 16:05

Stroke Logo Animation — анимация появления текста. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

948

codepen.js

24 Oct, 06:05

Future Sticky Navigation with Glas Effect — интересный эффект скрывающейся навигации. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,093

codepen.js

23 Oct, 16:05

Flip clock & countdown — обратный таймер. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,096

codepen.js

23 Oct, 06:05

Spinning Preloader — прелоадер. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,195

codepen.js

22 Oct, 16:05

Button hover effect — кнопка с интерактивным эффектом при наведении. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,126

codepen.js

22 Oct, 06:05

Link Hover Effect — эффекты при наведении. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,295

codepen.js

21 Oct, 16:05

3D Gallery — смена карточек с 3D-эффектом. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,270

codepen.js

21 Oct, 06:05

JavaScript calculator — калькулятор. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,325

codepen.js

20 Oct, 16:05

Neumorphic Liquid Slider — анимация температуры. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,304

codepen.js

20 Oct, 06:05

Flickering Neon Text — красивый текст. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,390

codepen.js

19 Oct, 16:10

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.

Присоединяйтесь: @FrontendPortal

751

codepen.js

19 Oct, 16:05

Sphere — анимация вращения трёх сфер. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,395

codepen.js

19 Oct, 06:05

Perspective — классические часы с нестандартным циферблатом. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,339

codepen.js

18 Oct, 16:05

Running man + button — анимация бегущего человека с функцией отслеживания бега. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,385

codepen.js

18 Oct, 06:05

Wave button animation — эффект возрастания волны в кнопке при наведении на неё. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,210

codepen.js

17 Oct, 16:05

Star animation — звёздная анимация для фона и меню. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,270

codepen.js

17 Oct, 06:05

Outline-to-Fill Tab Icon Animations — анимация значков меню. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,359

codepen.js

16 Oct, 16:05

Skating bunny — игра. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,316

codepen.js

16 Oct, 06:05

Particles button — пузыри. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,348

codepen.js

15 Oct, 16:05

checkbox — переключатель необычной формы. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,328

codepen.js

15 Oct, 06:05

Fiery Preloader — огненный прелоадер. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,374

codepen.js

14 Oct, 16:05

Spinner — ожидание загрузки. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,294

codepen.js

14 Oct, 06:05

Button Animation — кнопка для активации. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,205

codepen.js

13 Oct, 16:05

Square to circle button animation — смена квадратной формы кнопки на круглую при наведении на неё. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

1,318