Слайдер настроения на чистом 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

Интересный codepen-проект: Book Writing Animation

Анимация набора текста сделана при помощи пакета typewriter-effect. Он позволяет создать зрелищные и динамичные эффекты печати текста на веб-страницах.

Исходники: https://codepen.io/wakana-k/pen/bGxaoNv

#codepen

Бесконечная скролл-галерея

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

Можете прям так и забирать к себе на сайт или доработать на ваш вкус.

#codepen

Естественно, Liquid Glass

Нашел интересный CodePen-проект: Apple со своим обновлением заставили сообщество переосмыслять Liquid Glass, не без этого. Автор реализовал такое с помощью пользовательского шейдера (shaderMaterial) на WebGL с помощью three.js.

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

#codepen #css #javascript
@tproger_web

Кнопка «удаления» с продуманной анимацией

Отличный вариант для вашего проекта. Конечно, если у вас есть в нём кнопка для удаления чего-либо.

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

#codepen