🚀Самые полезные библиотеки JS для красивых анимаций🚀

📌Lottie
Lottie представляет собой библиотеку, совместимую с платформами Android, iOS, Web и Windows, которая декодирует анимации, созданные в Adobe After Effects и экспортированные в JSON-формате с использованием Bodymovin. Эта библиотека позволяет без труда воспроизводить анимации на мобильных устройствах и веб-сайтах.

📌Anime.js
Anime.js представляет собой фреймворк, который выигрывает популярность благодаря своей простоте и мощным функциональным возможностям. Он является одновременно интуитивно понятным для новичков и достаточно гибким для опытных аниматоров, позволяя легко воплощать творческие концепции в реальность. Anime.js умело управляет как CSS-анимациями, так и анимациями, основанными на JavaScript, делая его отличным решением для разнообразных анимационных проектов. Его API является простым для освоения, но при этом обладает достаточной мощностью для реализации сложных анимационных эффектов, от простых переходов до продвинутых ключевых кадров и анимаций с использованием временной шкалы, предоставляя обширный спектр возможностей для разработчиков.

📌Popmotion
Popmotion представляет собой библиотеку для создания анимаций в JavaScript, ориентированную на простоту и удобство использования. Она отличается лаконичным и интуитивно понятным API, что облегчает её применение, и обеспечивает совместимость со всеми основными веб-браузерами. Благодаря встроенной системе плагинов, Popmotion предоставляет

📌Framer Motion
Framer Motion является специализированной библиотекой анимации для веб, разработанной с учетом интеграции в экосистему React. Эта библиотека обеспечивает полный набор инструментов для внедрения анимационных движений в приложения React. Благодаря тому, что Framer Motion сосредоточен на React, её синтаксис оптимизирован под данную платформу, что делает её особенно удобной для опытных разработчиков.

📌ScrollMagic
ScrollMagic - это библиотека JavaScript, специализированная на создании интерактивных сценариев прокрутки, которая отличается лёгкостью настройки и возможностью расширения функционала. Возможности ScrollMagic могут быть расширены за счёт интеграции с различными анимационными фреймворками.

👉 @frontend_1

Совет по CSS! 🤙

Вы можете создать этот магнитный эффект :hover с помощью позиционирования анкоров CSS, :has и без JS 🔥.

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}

Как сохранить чистоту при входе/выходе из списка? Используйте transition-delay

ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}


https://codepen.io/jh3y/pen/MWLyGxo

👉 @frontend_1

Фильтр Блума

У каждого разработчика есть набор инструментов для решения различных задач. Однако со временем возникает необходимость расширять этот набор, чтобы эффективно справляться с более сложными задачами. В этой статье я хочу познакомить вас с инструментом, которым вы, скорее всего, раньше не пользовались. И хотя он подходит для решения узкого спектра задач, его использование может оказаться весьма полезным. Знакомьтесь — "фильтр Блума" (Bloom filter).

https://habr.com/ru/companies/timeweb/articles/806383/

👉 @frontend_1

Гиперпространственный прыжок 🚀

GSAP && <canvas> с использованием событий указателя

👉 @frontend_1

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.

Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

https://habr.com/ru/companies/ruvds/articles/757490/

👉 @frontend_1

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 2

Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи.

В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.
Давайте начнём!

https://habr.com/ru/companies/ruvds/articles/766344/

👉 @frontend_1

Создание поля ввода с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/input-04

👉 @frontend_1

Создание эффекта наведенной галереи с помощью flex grow 🚀

https://github.com/atherosai/ui/tree/main/gallery-06

👉 @frontend_1

Совет по CSS 💡

Знаете ли вы о свойстве shape-outside в CSS?

Demo https://www.codewithshripal.com/playground/css/shape-outside

👉 @frontend_1

Создание карточек с эффектом наведения зума с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/cards-07

👉 @frontend_1

Совет по HTML 💡

Знаете ли вы, что мы можем легко создать сворачивающуюся панель без использования Javascript?

Demo https://www.codewithshripal.com/playground/html/details-element

👉 @frontend_1

ВКонтакте представила образовательный проект для разработчиков, IT-предпринимателей и бизнесменов, который познакомит с открытыми веб-технологиями на примере сервисов VK Mini Apps.

Студентам курса будут доступны видеоуроки с рекомендациями по дизайну, разработке, тестированию и продвижению сервисов. Эксперты VK Mini Apps записали практические советы и подготовили элементы кода и шаблоны, которые можно использовать бесплатно.

👉 @frontend_1

Глубокий JS. В память о типах и данных

Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в документации MDN, а на просторах интернета полно статей на этот счет.

Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS. В качестве испытуемого возьмем один из самых распространенных, на сегодняшний день, движок V8 от компании Google.

Но, прежде чем мы приступим к разбору, давайте вспомним основные теоретические моменты.

https://habr.com/ru/articles/774548/

👉 @frontend_1