Интерактивная галерея полароид-фото

Это классная идея для пет-проекта, который вы сможете повторить самостоятельно. Автор написал проект на ванильном CSS и JavaScript.

Посмотреть код можно по ссылке.

#codepen #javascript

Perspective Loader на чистом CSS

Вы, скорее всего, видели этот шуточный ролик, где показывается почему на самом деле лоадер прерывается во время загрузки или установки.

Пользователь CodePen решил повторить его во фронтенде и сделал анимацию, которая работает исключительно на HTML и CSS.

Посмотреть код можно здесь:
https://codepen.io/jh3y/pen/xxWdOQy

#codepen #css

Новогодний генератор снежинок на JS

Сейчас на codepen проходит новогодний челленедж. Каждая неделя — новая тема. Прошлая была посвящена снежинкам и хочу показать вам один проект, который там отметился. Это генератор снежинок, написанный на JavaScript.

Ключевой его особенностью является то, что все снежинки генерируются рандомно благодаря особому алгоритму. Это может оказаться удобно, если вам нужно добавить на сайт, например, эффект падающих снежинок.

Посмотреть принцип работы кода можно на странице проекта.

#codepen #javascript

Impatiently Waiting — элемент загрузки на HTML и SCSS

Больше лоадеров богу лоадеров! На этот раз предлагаем вам познакомиться с забавным вариантом, который нарисован с помощью SVG и анимирован с помощью SCSS.

С кодом проекта можно ознакомиться по ссылке: https://codepen.io/jkantner/pen/VwooLxv

#codepen #svg #scss #лоадер

Слайдер настроения на чистом JS

Автор этого проекта создал слайдер, который поможет вам точно указать степень эмоционального состояния. Такой элемент пригодится везде, где требуется оценить качество предоставленной услуги, работы или чего-нибудь ещё.

Создан он с помощью SCSS и JS. Забрать код в свой проект или изучить подробнее можно по ссылке на codepen.

#codepen #слайдер #ui

Крутая анимация перехода с перспективой при скролле

Отличный пример создания красивого перехода. Эффект достигается за счёт увеличения изображений и грамотной работы со слоями. Сделан с помощью библиотеки GSAP.

Посмотреть код можно тут: https://codepen.io/GreenSock/pen/YzbPYMx

#codepen

Стильная анимация кнопки поиска для вашего сайта

Сделана с помощью классического стека HTML + CSS (SCSS) + JS, поэтому может быть использована вами в любом проекте без установки дополнительных библиотек.

Посмотреть код можно на странице проекта.

#codepen #фронтенд

Жидкие кнопки для вашего сайта

Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.

Посмотреть код и забрать их к себе в проект можно тут:

https://codepen.io/Zaku/pen/eRmRxz

#codepen #ui #фронтенд

Интересная анимация загрузки с помощью CSS

Можете попробовать повторить такой лоадер, если хотите потренироваться в создании CSS-анимации. Здесь всего несколько DIV'ов, которые анимированы с помощью @keyframes.

Посмотреть код можно на codepen.

#codepen #css

Image Hover Effect на чистом CSS

Этот проект предлагает создание необычного эффекта при наведении на изображение — текст получает эффекты негатива, но только на некоторую область.

Как повторить такой эффект у себя в проекте, можно узнать тут:

https://codepen.io/ig_design/pen/WNrWezW

#codepen #css

Pass Strength Shield

Это анимированное поле ввода пароля, созданное с помощью React, GSAP и DrawSVGPlugin3. Картинка над полем меняется в зависимости от того, соответствует пароль требованиям или нет.

Как повторить такой проект, можно узнать на его странице:

https://codepen.io/lerida/pen/MWjPxRW

#codepen

Необычные часы с «кодовым» циферблатом, реализованные с помощью CSS и JavaScript

Посмотреть код проекта можно здесь: https://codepen.io/MarkBoots/pen/zYbjaoR

#codepen

Анимация глича для текста при наведении cоздана на чистом CSS. Посмотреть код и попробовать проект можно по ссылке:

https://codepen.io/oscar-jite/pen/yLwoeLE

#codepen

Этот снежный шар сделан с помощью Canvas. Логика прописана в JavaScript, а стили в CSS. Никаких сторонних библиотек, препроцессоров и прочего.

Можете убедиться сами, посмотрев код проекта на codepen: https://codepen.io/Calleb/pen/pvzgBpa

#codepen #canvas

Ходячий замок Хаула своими руками

Нечасто встретишь такие объемные проекты на codepen. Сделан он при помощи библиотеки TweenMax. Посмотреть код можно тут.

#codepen

Pokemon Slide Gallery

Реализовано без использования JS. Только HTML и CSS. Переключение реализовано с помощью радио-кнопок. Посмотреть код проекта можно по ссылке: https://codepen.io/cbolson/pen/raBJWOJ

#codepen

Пятнашки на Vue

Полезный codepen-проект для тех, кто изучает Vue. Сможете не только изучить алгоритм игры, но и посмотреть, как это реализовано на фреймворке.

https://codepen.io/leemartin/pen/VwmdyNQ

#codepen #vue

Анимация раскидывания частиц на чистом JavaScript

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

Подробнее: https://codepen.io/ma77os/pen/ExOKBay

#codepen

Эффект выгорающей кинопленки

Нашел интересный codepen-проект. Здесь автор решил сделать эффект при наведении, похожий на выгорающую кинопленку. При этом он учитывает положение курсора в момент наведения при отработке эффекта.

Посмотреть код можно здесь: https://codepen.io/kiranpate1/pen/MWMGKdv

#codepen #css #javascript

Video To ASCII Art

Энтузиаст сделал проект, который превращает короткие видео в ASCII-арт. Проект реализован с помощью CSS и JavaScript.

По ссылке можно посмотреть код проекта и попробовать воспроизвести различные видео: https://codepen.io/konstantindenerz/pen/YzgRQZj

#codepen