Make a World · 2019-07-15 · —плоская графика —отсутствие...

Make a WorldJulia Muzafarova

Юлия МузафароваPure CSS Animator

julia_miocene miocene

7 демок

23 демки

1 место

22 демки

1 место

14 демок

3 место

7 демок

Зачем всё это?

Зачем всё это?Обучение

Проба нового

Развлечение

Следование моде

Поиск хайпа

00 Выбор графики

— плоская графика

— отсутствие сложных градиентов

— анимация без сильного изменения шейпов

— анимация за счет rotate(), skew() и translate()

— картинка должна нравиться

01 Таймлайн

Ключевые кадры в анимации отображают крайние состояния движения объекта

таймлайн

кадр

02 Архитектура

03 Рисование

РисованиеЭкономия объектов в DOM’е

РисованиеЭкономия объектов в DOM’е

Псевдоэлементы

Этого мало!

РисованиеЭкономия объектов в DOM’е

Псевдоэлементы

Комбинирование простых фигур

РисованиеЭкономия объектов в DOM’е

Псевдоэлементы

Комбинирование простых фигур

Градиенты и тени

РисованиеЭкономия объектов в DOM’е

Псевдоэлементы

Комбинирование простых фигур

Градиенты и тени

Глобальные стили

PerfectPixelPerfectPixel by WellDoneCode

Опорные точкиtransform-origin

04 Анимирование

Кадр — это сколько?

количествокадров

Кадр = 100%/330

Кадр = 0.3%

timing function

0% 100%50%

0% 100%50%

0% 100%50%

1 30

0px

300px

1 30

0px

300px

1 30

0px

300px

5 8 11 14 17 19 21 23 25 26272829

1 330

05 Отладка

Chrome DevTools

скорость проигрывания

пауза анимации

список анимированных объектов

таймлайн

06 Итог

Как попасть в топ

ждём

Спасибо