Уникальная полоса загрузки для вашего сайта
Время чтения: 2 мин.
Существует множество способов придать сайту уникальности, сделать его особенным. Для этого мы постоянно совершенствуем дизайн сайта, добавляем новые возможности в функционал. Но одним из элементов, который выделит ваш сайт среди остальных — это индикатор загрузки страницы, собственный индикатор загрузки страницы. Как правило, страница не может загрузиться очень быстро, а в это время, пока страница загружается, можно вывести красивый индикатор загрузки.
Для создания индикатора загрузки мы будем использовать плагин Pace.js. Этот плагин предназначен для создания красивых индикаторов загрузки на вашем сайте. Полоса загрузки заполняется автоматически, используя AJAX запросы.
Скачать данный плагин можно — здесь.
Как установить индикатор загрузки на свой сайт?
1 шаг. Скачиваем данный плагин, разархивируем в папку, где у вас лежат все скрипты.
Затем подключаем данный плагин, вставляя данный плагин между тегами
1 2 3 | <head> <script src="pace.min.js"></script> </head> |
2 шаг. Выбираем цвет индикатора загрузки.
Переходим по адресу — ссылка.
Там видим следующее поле для ввода:
Здесь в шестнадцатеричном виде вводим цвет, который подходит по цветовой гамме вашей теме. Советую для этого использовать программу ColorMania.
3 шаг. Выбираем стиль индикатора загрузки.
Спускаемся немного ниже и выбираем понравившийся индикатор загрузки.
Нажимаем по ссылке «Download» и увидите CSS код. Его необходимо скопировать и вставить в файл стилей вашей темы.
4 шаг. Вставляем одну строку Javascript.
Также между тегами <head>
</head> вставляем следующий код:1 | <script data-pace-options='{ "ajax": false }' src='pace.js'></script> |
Вывод
Pace.js поддерживает IE8+, FF 3.5+, Chrome, Safari 4 +, Opera 10.5 +, и все современные мобильные браузеры. Согласитесь, иметь собственную полосу загрузки, будет отличать ваш сайт от всех остальных.
Успехов!
Источник: http://www.hongkiat.com/blog/pacejs-progress-bar/
Эффект загрузки страницы — создание эффекта при загрузке страницы
Время чтения: 3 мин.
Долго грузиться сайт? И вы не хотите чтобы человек видел как сайт загружается по частям, а хотите чтобы он видел только полностью загруженный сайт? Тогда этот урок для вас. То есть посетитель заходит на сайт и видит индикатор загрузки, по истечении которого появляется сайт с красивым переходом. Может для блогов или порталов использование такого эффекта будет только мешать посетителям, то на продающих страницах он будет весьма кстати.
Скачать (необходимо будет подождать 10 секунд) и посмотреть пример вы можете по ссылкам ниже:
Смотреть примерСкачать
Раньше я писал об индикаторах загрузки, поэтому рекомендую посмотреть еще их:
Ну и вот еще несколько статей о том, что можно сделать с помощью jQuery:
Эффект при загрузке страницы
В чем, собственно, суть: когда пользователь попадает на сайт, он видит перед собой серый фон, на котором изображен логотип сайта. Также он видит индикатора загрузки, который постепенно заполняется. Для индикатора загрузки используем SVG. После заполнения с помощью красивого эффекта появляется уже загруженная страница сайта, а область с логотипом плавно исчезает.
Вот страница после исчезновения индикатора загрузки:
Разметка HTML
У нас есть блок <header> </header>, с серым фоном, логотипом сайта и индикатором загрузки. То есть то, что пользователь видит как зашел на сайт.
Далее идет блок <div> с классом ip-main, где находится основной контент страницы.
А сейчас сам код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div>
<header>
<!-- лого -->
<div>
<svg viewBox="0 0 80 80">
<path d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
<path d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
</svg>
</div>
</header>
<div>
<!-- основной контент -->
</div>
</div> |
А сейчас давайте это всё красиво оформим!
Стили CSS
В HTML разметке ничего сложного нет. Переходим к визуальному оформлению. В зависимости от того, какое демо вам понравилось больше, вам необходимо подключить между тегами <head> </head> соответствующий файл стилей (который находится в папке css).
| effect1.css | если вам понравилось первое демо |
| effect2.css | если вам понравилось второе демо |
Ну а подключается всё это дело как обычно (если вам нравится первый эффект):
1 | <link rel="stylesheet" type="text/css" href="css/effect1.css" /> |
Или так (если больше понравился второй):
1 | <link rel="stylesheet" type="text/css" href="css/effect2.css" /> |
В начале каждого из этих файлов есть вот такие свойства:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @font-face {
font-weight: normal;
font-style: normal;
font-family: 'Blokk';
src: url('../fonts/blokk/BLOKKRegular.eot');
src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
url('../fonts/blokk/BLOKKRegular.woff') format('woff'),
url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'feather';
src:url('../fonts/feather/feather.eot?-9jv4cc');
src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'),
url('../fonts/feather/feather.woff?-9jv4cc') format('woff'),
url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'),
url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg');
} |
Здесь вам необходимо указать пути к папке fonts, чтобы в дальнейшем работал индикатор загрузки.
Следующим свойством мы зафиксируем блок, в котором находится индикатор загрузки:
1 2 3 4 5 6 7 8 9 | .ip-header {
position: fixed; /* фиксированное позиционирование */
top: 0; /* указывая 0 (ноль), мы "прижимаем" к верху этот блок */
z-index: 100; /* позиционирование по оси Z */
min-height: 480px; /* минимальная высота блока */
width: 100%; /* ширина блока на всю ширину экрана */
height: 100%; /* высота блока на всю высоту экрана */
background: #f1f1f1; /* фоновый цвет */
} |
Свойств действительно много, не буду их все описывать. Вам лишь нужно подключить файл стилей соответствующего эффекта. Вот что получается в результате:
Функциональная часть jQuery
Чтобы всё это заработало и закрутилось нужна некая «магия» 🙂 . Но к ней мы сегодня прибегать не будем, а воспользуемся лишь несколькими скриптами (classie.js, pathLoader.js и main.js), которые можно найти в папке js.
Скрипты подключаем перед закрывающим тегом </body>:
1 2 3 | <script src="js/classie.js"></script> <script src="js/pathLoader.js"></script> <script src="js/main.js"></script> |
Вывод
Сейчас у нас всё красиво работает и страница появляется по истечению таймера в индикаторе загрузки. Вы увидели 2 эффекта загрузки страницы и можете выбирать любой свой вкус. На продающей странице, где много изображений, видео, и я не говорю о количестве скриптов, данный способ показать посетителю заранее подгруженный сайт — очень подойдет.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
10 эффектов при загрузке страницы, привлекающих внимание посетителей
Время загрузки страницы зависит от нескольких факторов. Некоторые из этих факторов включают в себя скорость соединения с Интернетом, используемые устройства или элементы, составляющие веб-сайт, на который заходят пользователи. Какой бы ни была причина, ваша задача, как веб-дизайнера, сделать все возможное, чтобы удержать внимание посетителей.
Как долго пользователи готовы ждать, пока сайт загрузится, прежде чем покинуть страницу, иногда зависит от того, как вы сможете развлечь их во время ожидания. Отличным способом захватить внимание пользователей, пока страница грузится, является демонстрация привлекательной страницы загрузки.
Ниже приведено несколько идей эффектов загрузки, которые вы можете применить, создавая веб-дизайн.
Вы когда-нибудь видели, чтобы улитка передвигалась реально быстро? Возможно видели, если смотрели мультфильм Турбо.
Но если нет, и хотите увидеть нечто подобное, воспользуйтесь вот таким индикатором загрузки с улиткой (или Helixbar, как его назвал разработчик). Это супер креативный способ скрасить время ожидания загрузки вашего веб-сайта.
Лично я выбрал этот индикатор, потому что в нем используются креативные заголовки для развлечения посетителя, пока он ждет загрузки сайта.
Использование крайне остроумных высказываний по-настоящему поднимет температуру на вашем сайте. Я только надеюсь, что индикатор достигнет точки кипения и загрузки вашего сайта до того, как это сделает самообладание посетителя.
Pieces это очень креативный, а кроме того, еще и простой плагин загрузки, который предоставляет на выбор свыше 300 анимаций загрузки. Вы увидите, какие волшебные превращения могут происходить с вашей страницей в то время как пользователь ждет крутой контент от вас!
Использование движка CutJs позволит добавить немного игривости в дизайн. С цветовой схемой как у Google, ваш экран загрузки будет, безусловно, забавным, с «запашком» дизайна Google.
Если вы ищете анимацию загрузки, которая придаст вашему сайту уникальную атмосферу, это то, что вам нужно. С эффектом загрузки в виде уровней стереозвука, ваш веб-сайт никогда не будет похож на чей-то еще.
Шестерни! Вот что демонстрирует движение! Этот эффект загрузки точно подойдет тем, кто разрабатывает веб-сайты для автомобильных компаний и гоночных игр.
[IMG = http://www.1stwebdesigner.com/wp-content/uploads/2014/02/ever-last-drop.png]
Это крутая анимация, которую вы можете попытаться адаптировать для вашего веб-сайта. Как и во вращающемся эффекте загрузки, в данной анимации используются простые, и в то же время креативные картинки, сочетающиеся с пастельными цветами. Простое вращение все еще может служить весьма занимательным эффектом загрузки.
Вы можете подумать, что это просто какой-то неправильный плагиат иконки загрузки Windows 8. Но нет, вы ошибаетесь. Это другой взгляд на эту анимацию.
Влюблены в эффект загрузки на сайте Flickr.com? Вот точная копия этого эффекта! Включите его в ваш сайт и получите flickr-подобное настроение!
Это, наверное, самая простая анимация загрузки из представленных в этом списке, но в голову даже не придет мысль исключить ее из этой статьи. Незатейливая, как это может показаться, анимация будет эффективна, так как она проще и быстрее для загрузки, чем большинство приведенных в этой статье анимаций.
Вы всегда можете превратить скучный горизонтальный эффект загрузки в нечто, что заставит ахнуть ваших посетителей. И если вы веб-дизайнер, создание такого эффекта в ваших руках!
На это вам придется потратить некоторое время. Вам нужно будет приложить немало усилий и терпения. Но, так же как и анимации загрузки, вы просто должны работать и ждать. И, в конце концов, получиться нечто прекрасное.
Данная публикация представляет собой перевод статьи «10 Page Loading Effects That Catch Your Viewer’s Attention» , подготовленной дружной командой проекта Интернет-технологии.ру
Pace — автоматический индикатор загрузки страницы JQuery
Pace.js — автоматический индикатор загрузки страницы для сайта с отслеживанием ajax-запросов и состояния загрузки страницы (readyState).
Скрипт не требует первоначальной настройки, для работы Pace достаточно подключить сам скрипт pace.min.js и подходящую css-тему и он заработает!
Инструкция по установке и настройке Pace
Скачиваем скрипт с официальной странички Pace, причем обратите внимание на опцию выбора цвета для загрузчика, в формате #HEX, т.е. вы можете скачать скрипт в подходящем для вашего сайта цвете.
Распаковываем архив, видим папки с доками, шаблонами, темами и сам скрипт — pace.min.js в сжатом и pace.js исходном виде.
Здесь нам нужны два файла — pace.min.js и любая из тем, я взял /themes/pace-theme-minimal.css
Копируем их в свой проект (сайт) и подключаем, например так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример подключения скррипта Pаce</title>
<link rel="stylesheet" href="css/pace-theme-minimal.css">
<script src="js/pace.min.js"></script>
</head>
<body>
</body>
</html>После подключения скрипт в действии с темой pace-theme-minimal.css выглядит так:
Теперь можете поиграться с шаблонами из папки templates или попробуйте создать свои шаблоны или темы, самыми удачными можете поделиться с автором, может быть его опубликуют на страничке скрипта.
Pace поддерживает IE8 + (стандартный режим), FF 3.5 +, Chrome, Safari 4 +, Opera 10.5 +, и все современные мобильные браузеры.
Также есть небольшое API для разработчиков, что также очень хорошо:
- Pace.start — Показать прогресс бар и начать обновление. Вызывается автоматически, если вы не используете AMD или CommonJS.
- Pace.restart — Показать прогресс бар, если он скрыт и стартует прогресс с нуля. Вызывается автоматически при PushState или replaceState по умолчанию.
- Pace.stop — Скрыть индикатор и остановить его обновление.
Размер pace.js равен 4 КБ в уменьшенном и gzip — сжатом виде. Размер тем варьируется между 0,5 и 4 КБ.
Также есть поддержка скрипта на github.com в случае возникновения проблем.
22 бесплатных jQuery CSS3 плагина прогресс-баров
JQuery – это библиотека JavaScript, которая позволяет очень просто создавать такие элементы интерфейсов, как прогресс-бары, выпадающие списки и т.д.
В этой статье вы найдете ссылки на скачивание JavaScript и JQuery скриптов, которые могут быть использованы на вашем сайте для отображения прогресса загрузки, скачивания файлов или любых других задач. Все описанные ниже скрипты являются абсолютно бесплатными для скачивания.
JQuery и JavaScript могут не поддерживаться старыми браузерами, но все современные браузеры полностью поддерживают их.
Адаптивный CSS прогресс-бар с красивым интерфейсом пяти шагов оплаты и подписки.
Скачать
Небольшой декоративный индикатор в виде квадратных пикселей на конце полосы прогресса делает этот прогресс-бар визуально гораздо более привлекательным.
Скачать
Автоматический прогресс бар веб-страницы. Включите pace.js и тему по своему выбору в свою страницу, и все готово! Pace будет автоматически отслеживать Ajax запросы, задержку цикла событий, состояние готовности документа и элементы на странице, чтобы уведомлять о прогрессе выполнения задачи.
Демо|Скачать
Они идеально подходят для отображения прогресса выполнения задачи при выводе формы или загрузке контента через AJAX. Они также могут использовать стили и переходы CSS3, что делает их простыми в настройке.
Демо|Скачать
Этот плагин позволяет создавать анимированные прогресс-бары на основе JQuery. Просто заполните необходимые данные, и плагин сам вычислит прогресс выполнения задачи и задаст соответствующую анимацию панели. Вы можете указать текст, который будет выводиться перед и после достижения определенного процента выполнения задачи.
Демо|Скачать
Набор плоских и 3D стилей кнопок прогресса, где сама кнопка служит индикатором прогресса. 3D-стили используются для отображения прогресса задачи на одной стороне при вращении кнопки.
Демо|Скачать
ProgressJs — это библиотека на основе JavaScript и CSS3, которая помогает разработчикам создавать и управлять прогресс-барами для каждого объекта на странице.
Демо|Скачать
ngProgress — используется для вывода статуса загрузки чего-либо. Данный элемент может использоваться для индикации извлечения данных с внешних ресурсов, если выполнение занимает больше времени, чем обычно или при простой загрузке страниц. Преимущественно применятся для вывода статуса загрузки больших по объему файлов.
Демо|Скачать
Данный прогресс-бар полностью реализован с помощью градиентов, теней и границ-радиусов CSS3 с примесью анимации. Целью данного проекта является демонстрация возможностей CSS3 в современных веб-браузерах. Поэтому стили этого прогресс-бара задаются исключительно с помощью CSS.
Демо|Скачать
«Наноскопический» прогресс-бар. С помощью реалистичных эффектов анимации, вы показываете пользователям, что выполняется какая-то задача! Вдохновение автора черпали в среде Google, YouTube.
Скачать
Круговой JavaScript-виджет прогресса, очень прост в реализации и настройке.
Скачать
Очень, очень компактный прогресс-бар (архив размером всего 730 байт). Не требует установки JQuery.
Демо|Скачать
Идея проста: добавлять прогресс-бар загрузки всякий раз, когда выполняется XHR-запрос. Несколько запросов, выполняемых одновременно, могут собираться в одной панели таким образом, что каждый ответ соответственно увеличивает прогресс-бар.
Демо|Скачать
jQuery.PercentageLoader — это JQuery-плагин для визуализации более привлекательного прогресс-бара, чем обычный горизонтальный индикатор и текстовый счетчик. Плагин прост в установке и довольно гибок в использовании. Он использует холсты HTML5, что позволяет создавать впечатляющее графическое представление, используя для этого всего лишь 10-килобитный (минимизированный) Javascript-файл (с приложением веб-шрифтов опционально).
Плагин использует векторы, а не изображения, что позволяет легко разворачивать различные элементы простым редактированием начальных параметров.
Демо|Скачать
Circular Progress Bar предоставляет неограниченные возможности для индикации потоков выгрузки или загрузки данных.
Демо / Скачать
Этот прогресс-бар использует атрибут HTML5 custom data-*, что позволяет просто дополнять анимацией прогресс-бар с помощью Zepto (или JQuery). Анимация упаковывается в функцию window.resize, чтобы запускать ее снова, если размер окна браузера изменяется.
Демо|Скачать
5-этапный CSS прогресс-бар. JS используется только для анимации демо-версии.
Демо|Скачать
Использует элементы прогресса выполнения при заполнении профиля. Добавляет соответствующие кнопки для отображения заполнения всех необходимых данных; пользователь может нажимать кнопки «Сохранить«, «Далее» при выполнении соответствующих действий.
Демо|Скачать
Прогресс-бар со сменными скинами, отображающий прогресс завершения загрузки в процентах.
Демо|Скачать
Простой прогресс-бар для заполнения форм. Использует элементы Dribbble.
Демо|Скачать
Прогресс-бар, выводимый в процессе одной единственной сессии браузера, я полагаю, что это пока только A/B тестирование.
Демо|Скачать
Анимированный плоский прогресс-бар с круговыми диаграммами. Может быть использован для добавления на ваш сайт инфографики, проектов Adobe Muse или интерактивных книг. Вы можете легко редактировать шрифты, цвета и значения. Файлы можно редактировать в Adobe Edge CC.
Видео демо|Скачать
Данная публикация представляет собой перевод статьи «22 Free jQuery CSS3 Progress Bar Plugins» , подготовленной дружной командой проекта Интернет-технологии.ру
Создание индикатора загрузки на jQuery
$(document).ready(function(){
jQuery.fn.anim_progressbar = function (aOptions) {
// Определяем значения
var iCms = 1000;
var iMms = 60 * iCms;
var iHms = 3600 * iCms;
var iDms = 24 * 3600 * iCms;
// Определяем опции
var aDefOpts = {
start: new Date(), // Текущее время
finish: new Date().setTime(new Date().getTime() + 60 * iCms), // Текущее время + 60 сек
interval: 100
}
var aOpts = jQuery.extend(aDefOpts, aOptions);
var vPb = this;
// Каждый индикатор прогресса
return this.each(
function() {
var iDuration = aOpts.finish — aOpts.start;
// Вызываем оригинальны индикатор прогресса
$(vPb).children(‘.pbar’).progressbar();
// Процесс обработки
var vInterval = setInterval(
function(){
var iLeftMs = aOpts.finish — new Date(); // Оставшееся время в миллисекундах
var iElapsedMs = new Date() — aOpts.start, // Прошедшее время в миллисекундах
iDays = parseInt(iLeftMs / iDms), // Прошло дней
iHours = parseInt((iLeftMs — (iDays * iDms)) / iHms), // Прошло часов
iMin = parseInt((iLeftMs — (iDays * iDms) — (iHours * iHms)) / iMms), // Прошло минут
iSec = parseInt((iLeftMs — (iDays * iDms) — (iMin * iMms) — (iHours * iHms)) / iCms), // Прошло секунд
iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // Процент выполнения
// Выводим текущее положение и прогресс
$(vPb).children(‘.percent’).html(‘<b>’+iPerc.toFixed(1)+’%</b>’);
$(vPb).children(‘.elapsed’).html(iDays+’ дн. ‘+iHours+’ч.:’+iMin+’мин.:’+iSec+’сек.</b>’);
$(vPb).children(‘.pbar’).children(‘.ui-progressbar-value’).css(‘width’, iPerc+’%’);
// В случае завершения
if (iPerc >= 100) {
clearInterval(vInterval);
$(vPb).children(‘.percent’).html(‘<b>100%</b>’);
$(vPb).children(‘.elapsed’).html(‘Завершено’);
}
} ,aOpts.interval
);
}
);
}
// Режим по умолчанию
$(‘#progress1’).anim_progressbar();
// Для секунд с 5-й по 15-ю
var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // Теперь прибавляем по 5 секунд
var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // Теперь прибавляем по 15 секунд
$(‘#progress2’).anim_progressbar({start: iNow, finish: iEnd, interval: 100});
// Устанавливаем интервал обновления в 1 секунду
$(‘#progress3’).anim_progressbar({interval: 1000});
});
Индикатор загрузки страницы для вашего сайта
Со временем сайты стали более объемные при этом требующие больше ресурсов, что, соответственно, увеличивает скорость загрузки. В данном уроке мы рассмотри как создать достаточно простой, но в тоже время весьма привлекательный индикатор. Он будет состоять из трех кругов, различного цвета, они будут вращаться с колебаниями, при этом будут пересекаться, в том месте где будет происходить стык кругов происходит изменения цветов. В центре будет находится подпись, в данном случае это название сайта.
Загрузка будет состоять из трех кругом, соответственно, каждый круг будет иметь частоту и радиус вращения, нам необходимо, чтобы они двигались по разных осях, но об этом немного позже, давайте начнем с первого шага.
Шаг 1. HTML
Разметка достаточно проста, она будет состоять с одного класса с параметром «hoja», также мы добавляем текст, который будет отображаться в центре индикатора, в данном случае это название нашего сайта:
<div>RUDEBOX</div> |
Кроме этого мы добавляем библиотеки скриптов и стили, просмотреть их можно в исходниках.
Шаг 2. CSS
Здесь все достаточно интереснее, для индикатора необходимо установить абсолютное позиционирование, и выставить по центру, для этого будем использовать top: 50%; left: 50%;. Далее мы установим окрас колец и анимацию кругового вращения, по умолчанию будет установлено 2s.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | .hoja { color: #dcdce2; position: absolute; top: 45%; left: 50%; margin-left: -140px; margin-top: -140px; width: 280px; height: 280px; text-align: center; font-family: ‘Open Sans’, sans-serif; font-size: 35px; line-height: 280px; -webkit-font-smoothing: antialiased; } .hoja:after, .hoja:before { content: «»; border-radius: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center center; } .hoja:after { box-shadow: inset 0 17.5px 0 rgba(250, 250, 0, 0.6), inset 17.5px 0 0 rgba(250, 200, 0, 0.6), inset 0 -17.5px 0 rgba(250, 150, 0, 0.6), inset -17.5px 0 0 rgba(250, 100, 0, 0.6); animation: rotar 2s linear infinite; } .hoja:before { box-shadow: inset 0 17.5px 0 rgba(0, 250, 250, 0.6), inset 17.5px 0 0 rgba(0, 200, 200, 0.6), inset 0 -17.5px 0 rgba(0, 150, 200, 0.6), inset -17.5px 0 0 rgba(0, 200, 250, 0.6); animation: rotarIz 2s linear infinite; } @keyframes rotar { 0% { transform: rotatez(0deg) scalex(1) scaley(1); } 50% { transform: rotatez(180deg) scalex(0.82) scaley(0.95); } 100% { transform: rotatez(360deg) scalex(1) scaley(1); } } @keyframes rotarIz { 0% { transform: rotatez(0deg) scalex(1) scaley(1); } 50% { transform: rotatez(-180deg) scalex(0.95) scaley(0.85); } 100% { transform: rotatez(-360deg) scalex(1) scaley(1); } } |
Кроме этого, при вращении нам необходимо сделать дисбаланс вращения, для этого установим траекторию вращения, соответственно 0, 180 и 360 и отрицательное значение с минусовым значением.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.