Voyager Slider

Full-screen слайдер с плавной 3D анимацией. Реализовано с помощью библиотеки GSAP. Отлично подойдёт для landing-page.

https://codepen.io/dev_loop/pen/MWKbJmO

#codepen
@frontend_html_css_js

Credit Card Form – Vue.js

Интерактивная и понятная форма заполнения данных банковской карты с анимированной 3D картой. Отлично подойдёт для собственной платёжной системы.

#codepen
@frontend_html_css_js

Generative MacOS Big Sur Waves 🌊

Генератор картинок в стиле обоев MacOS Big Sur. Почти всегда выдаёт рандомные изображения, так что можно использовать в качестве генератора фона, плейсхолдеров, обложек. Реализовано с помощью библиотеки GSAP.

#codepen
@frontend_html_css_js

Привет!

Рады видеть тебя на канале WebStream.
Мы три web-разработчика – у нас более 15 лет опыта на троих, и мы работали как в стартапах, так и в крупных международных компаниях. Поэтому мы разбираемся не только в том, как создать форму регистрации, но и можем поговорить про красивый и качественный код.

У нас ты узнаешь:
· Как решать нетривиальные задачи – #советы
· Что реализуют продвинутые разработчики – #codepen
· Что происходит во Frontend-тусовке - #новости #podcast
· А также найдешь много полезных материалов – #meme #статья #qa

Думаешь, много теории? Будет и практика – также мы выкладываем задачки #задача, чтобы ты смог сразу отработать новые знания.

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

Apple TV Word Rotation

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

#codepen
@frontend_html_css_js

Pure CSS “Eye”

Эффект фокусировки глаза и сам кибернетический глаз на чистом CSS + SVG. Можно использовать как лоадер в тематическом сайте.

#codepen
@frontend_html_css_js

Folding Ticket Detail

Макет приложения продажи авиабилетов. Особенность в том, что стиль и анимация раскрытия билетов сделаны в виде сгибаемого бумажного билета. Идею можно легко адаптировать под другие бумажные билеты, например кинотеатра.

#codepen
@frontend_html_css_js

#122 in 2021 / JavaScript Canvas

Эффект “неработающего телевизора” на JS + чистый canvas. Я бы использовал эту анимацию как фон header’а landing-страницы. Так же можно использовать как заглушку, во время загрузки видео.

#codepen
@frontend_html_css_js

Tunnel travel using CSS perspective

Довольно интересный эффект, как из одной статичной картинки со звёздами, автор сделал пространственный туннель как в фильмах про космос.

#codepen
@frontend_html_css_js

Audio Waveform

Шикарная анимация аудиоволн. Можно использовать как кнопку записи при разработке голосового чата. Реализовано с помощью GSAP.

#codepen
@frontend_html_css_js

Card Hover Interactions

Шикарная анимация карточек. Можно использовать в блогах для отображения постов с превью или же в landing страницах для описания товаров. Вся логика написана на HTML + CSS.

#codepen
👉🏻@frontend_html_css_js

Ссылка