• 2306
  • 0
  • Автор: Pete R
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Сегодня покажу как сделать заменить " loading" картинку на CSS . Идея состоит в том, чтобы управлять объектами HTML, используя только CSS , таким образом, мы можем избавится от GIF.

Отказ от ответственности: Цель этой статьи состоит в том, чтобы показать Вам возможности CSS. Содержание может не быть практичным, чтобы использовать в действительности. Демонстрационный пример работает лучше всего в Хроме, и частично работает в Firefox и Сафари.

ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ ANIMATION CSS перед GIF/JS
Это дало мне больше контроля над анимацией. Я нашел, что намного более удобнее отредактировать элементы и скорость анимации через CSS вместо того, чтобы по мучатся с Фотошопом.
Анимация CSS использует ускорение GPU, которое намного быстрее, чем применение JS и намного легче с точки зрения размера, когда сравниваются с gif изображениями.
CSS позволяет пользователям быть в состоянии взаимодействовать с анимацией. Для gif изображений нет никакого взаимодействия между пользователями и анимацией.
С ДРУГОЙ СТОРОНЫ, ТАКЖЕ ЕСТЬ НЕКОТОРЫЕ НЕДОСТАТКИ
Анимация CSS еще широко не поддерживается. Например, в нашем демонстрационном примере, некоторые аннимации не работают в Сафари, но работают хорошо в Хроме.
Чтобы улучшить работу, я решил свести код HTML к минимуму, чтобы ускорить начальную загрузку страницы. Реализовал при помощи псевдо элементов :before и :after. CSS позволяет мне легко создавать 3 анимированных элемента, используя один HTML-тэг. Вы можете легко отредактировать любые изменения, просто регулируя числа в файле CSS.
В демо 5 различных АЯКСА CSS, анимации, чтобы показать Вам,на что способна анимация CSS . Не стесняйтесь экспериментировать на них так, как Вы хотите.
Я надеюсь, что Вы понравились мой небольшой эксперимент и если у Вас есть идеи, чтобы показать нам, не стесняйтесь показывать их в комментариях ниже.

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

Код:
<link rel="stylesheet" type="text/css" href="css/style.css" />
3.В main.tpl заменяем
Код:
<div id="loading-layer"><img src="{{ tpl_url }}/images/loading.gif" alt="" /></div>
на
Код:
<div id="loading-layer"><div class="loader1">
<i></i><i></i>
</div></div>
где "loader1" изменить на свой выбор 2,3,4,5. Конечно можно сделать и грамотнее,просто прописав стили лоадера в стиле "loading-layer"

Можешь почитать и вот эту статейку " 30 онлайн-инструментов для тестирования сайтов"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какие темы вам интереснее?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element