🤩Хотите, чтобы ваши React-приложения не просто работали, а вызывали вау-эффект?

Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся.

Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React.

⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOnwX9

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

JavaScript. Что будет выведено в консоль?

Ответ

Liquid loader

"Жидкий" прелоадер. Реализован из SVG-элементов с анимацией на CSS.

#css

Loaders Kit | Pure CSS

Комплект анимированных лоадеров, реализованных с помощью CSS.

#css

JavaScript. Что будет выведено в консоль?

Ответ:
[ 1, 2, 3, [ 1, 2, 3, 1, 2, 3 ] ]
[ 1, 2, 3, [ 1, 2, 3, 1, 2, 3 ] ]

Guess a Color

Небольшая игра на чистом JS. Вёрстка реализована на HTML и SCSS.

#js

Simple CSS Waves

Анимация волн. Реализовано на чистом CSS.

#css

JavaScript. Напишите функцию order, которая принимает строку и возвращает её вариант, очищенный от цифр, вшитых в каждое слово, и отсортированный на основе этих цифр.

Ответ

JavaScript. Что будет выведено в консоль?

Ответ: 5

GSAP - Scroll animation

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

#js

trippy text

Анимации и трансформации зависят от положения курсора пользователя и созданы в JS.

#js

Animated blob SVG text clipping effect

Анимация появления и исчезновения текста. Реализовано с помощью SVG-текста и JavaScript.

#js