Хаки и Скрипты Next Generation CMS Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888

Замена лоадера GIF на анимацию CSS

2013-10-13 13:49:13 (читать в оригинале)

Сегодня покажу как сделать заменить " 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.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам pure-css-ajax-loader.zip (14.79 Kb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном.
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"

Тэги: css, анимация,, слайдшоу