WebDesignMagazine.ru – Журнал о веб-дизайне

Креативная анимация “Загрузки” с помощью CSS

0

В этом уроке, мы разберемся как создавать различные эффекты анимации при помощи CSS3. Несколько важных моментов, прежде чем мы начнем:

  • Вы не увидите никаких префиксов в CSS фрагментах, но вы, конечно же, найдете их в ресурсных файлах.
  • Цель этого урока, это показать потенциал CSS, а особенно CSS3, поэтому рендеринг может быть изменен на-IE9. Если вы планируете поддерживать эти браузеры, не забудьте сделать резервные варианты.
  • Мы будем использовать box-model, где [width]= [element-width] + [padding]+ [borders]. Мы активируем их с следующим фрагментом:

CSS: За и Против

Каковы преимущества и недостатки чистого эффекта CSS “загрузки” и “предварительной загрузки”? Почему не JavaScript код, или даже старый добрый способ: анимированный GIF? Нет универсального ответа на этот вопрос, все будет зависеть от ситуации. Но позвольте нам дать вам некоторые идеи:

За:

  • CSS легко редактируемый: вы можете быстро изменить длительность, скорость, цвет  и т.д. вашей анимации
  • CSS является “вектроным”: вы можете масштабировать его по своему усмотрению без потери качества
  • CSS анимации быстрее, чем JS “анимации”, так как они используют родной двигатель браузера
  • CSS анимации используют GPU ускорение: если у вас есть хорошее устройство, то тогда у вас будет очень быстрая и плавная анимация

Против:

  • У CSS анимации нет полной поддержки браузера: IE9 и Opera Mini не понимают их
  • CSS (pre) загрузчики могут включать объемные разметки
  • CSS немогут активировать экшнс на нажатие мышкой и тд., в отличие от JS

Пример 1

CSSLoadingAnimations_01

Мы начнем с чего-нибудь простого. Наш ползунок бесконечно бегает в окне слева направо. “Движение” является очень важным, для того чтобы пользователь видел, что приложение/сайт действительно что-то делает.

Разметка

CSS

Во-первых, нам нужно создать контейнер для сферы: bar. Чтобы сохранить пропорции и сделать призагрузчики масштабируемыми, мы использовали em единицы. Просто измените значение размера шрифта на обертке, для того чтобы все масштабировалось так, как вы хотите.

Давайте займёмся “Подождите”. Вы, наверное, заметили, что его нету в разметке: это потому, что это контент. На самом деле он должен быть в разметке в реальном случае, так как это важное содержание, а не только графический материал.

Теперь давайте взглянем на сферу.

Ключевые фреймы запускающие анимации:

Пример 2

CSSLoadingAnimations_02

Теперь давайте продолжим с чем-то немного посложнее, но не слишком! Вращающаяся … мельница? :)

Разметка

Этот пример полностью основан на псевдо-элементе. Полностью. Нет необходимости в дополнительной разметке.

CSS

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

Теперь, псевдо-элемент для внутреннего прозрачного белого круга.

Анимация

Пример 3

CSSLoadingAnimations_03

Теперь давайте рассмотрим что-то немного сложнее. Но не волнуйтесь, это действительно не так сложно.

Разметка

HTML для этого варианта не самый красивый. Поскольку мы не можем анимировать псевдо-элементы, мы должны использовать несколько элементов, чтобы это сделать. Мы выбрали списки (даже если они не очень семантические), но вы можете выбрать все, что захотите.

CSS
Первое, что нужно сделать, это стилизовать сам список.

И общие свойства для всех элементов списка.

А теперь, несколько объяснений о том, что грядет. При загрузке страницы, четыре точки не будут перекрывать друг друга, они расположены как стороны света: север, юг, восток, запад. Но, их центры вращения все в одном и том же месте – в точном центре спиннера.

Наконец, две анимации. Одна предназначена для вращения, а другая для прозрачности. Да, прозрачность здесь меняется тоже!

Пример 4

CSSLoadingAnimations_04

Разметка

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

CSS

Во-первых, у нас есть много вещей, которые нужно применить к основному элементу: размер, положение, шрифт, анимация и т.д.

Мы все еще должны создать внутренние колеса с псевдо-элементами.

Теперь внутренние обертки и спаны. Обратите внимание, как мы используем “reverse” параметр на внутреннем контейнере для отмены вращения основного элемента.

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

Эти анимация может быть немного сложно понять, поэтому давайте разберемся, каждая буква должна:

  • Потерять немного непрозрачности
  • Вернуться к полной непрозрачности
  • Подождите, пока все остальные буквы сделают тоже самое
  • Вернитесь к шагу 1 и повторите

Как конкретно это сделать:

  • Вы посчитали количество букв в своем элементе. Наш демо насчитывает 7
  • Вы разделили 100 (количество ключевых кадров, выраженных в %) на это число. В этом примере оно равно ~ 14,28
  • Каждый 14,28 ключевой кадр, буква делает свое дело
  • Готово

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

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.