Лого www.SiteHere.ru

Делаем зарядку для глаз вместе с миньонами — анимация CSS3

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

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

Переходите по ссылке ниже и выполняйте зарядку для глаз вместе с миньоном:

Посмотреть пример

В данной статье пойдет речь только о анимации CSS3, но хочу напомнить о бесплатном мини-курсе по созданию лендингов, который можно получить по этой ссылке: "Лендинг за 60 минут".

Этапы создания анимации "Зарядка для глаз"

1 этап. Выбор персонажа

Кто из персонажей?

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

Остановился я на миньонах. Данный миньон также создан на чистом CSS3 в таком же стиле, как я делал и старых персонажей:

  • Абсолютное позиционирование блоков — чтобы их можно было размещать в произвольном месте
  • Поворот — потому что иногда необходимо развернуть блок/блоки, чтобы добиться необходимого эффекта.
  • z-index позиционирование — одни блоки перекрывают другие и получается тот результат, который нужен.

Миньон создан не мною. Некоторые стили я позаимствовал у Amina Poursaied.

2 этап. Анимация

CSS3 анимация

Вся анимация создана на чистом CSS3 мною вручную и ее можно разделить на следующие группы:

  • Анимация текста
  • Анимация "подсказок"
  • Анимация глаз

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

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

Что касается текста в подсказках, то он также появляется и исчезает с помощью анимации. Но Вы этого не видите, потому что это происходит когда блок с подсказкой исчезает. И Вы видите каждый раз новый текст.

Вывод

Кроме анимации, которую можно создать на чистом CSS, я еще хотел напомнить о наших глазах, которые работают всё время бодрствования. Делайте перерывы в работе и повторяйте действия за миньоном. Делайте отдых 2-3 минуты каждый час и Ваши глаза будут более сконцентрированные и готовыми к интенсивной работе 🙂 .

Есть интересные идеи, но не знаете как их реализовать? Записывайтесь на индивидуальную SKYPE консультацию!

Успехов!

С Уважением, Юрий Немец

Делаем зарядку для глаз вместе с миньонами — анимация CSS3 5.00/5 (100.00%) 6 голос(ов)

Понравилась статья - расскажи друзьям! :)

3 комментария к записи
  • Seosko

    Ты не перестаешь меня удивлять, не думал, что можно сделать такую анимацию без подключение js. Спасибо большое так же, за зарядку для глаз, повторил упражнения))

     
    • Юрий Немец

      Спасибо! 🙂

       
  • Михаил

    Очень круто! А можно мне отправить на почту код этого миньона?)

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *