Доброго времени суток, товарищи!
Решил себе сделать анимированный загрузчик для сайта. Давно мечтал, да все руки не доходили. А сегодня сделал, правда пришлось погуглить как это правильно сделать, но сделал. И тут же подумал: зачем хорошей идеи пропадать? Решил написать небольшую статейку.
Она готова и я ее выношу на ваш суд, поехали!
Все всегда спешат, и веб-сайт, загрузка которого занимает более 2–3 секунд, воспринимается как «слишком медленный». К счастью, есть способ на мгновение обойти эту панику и удерживать пользователей на сайте достаточно долго, чтобы он загрузился. Я говорю о совершенно гипнотической анимации загрузки.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится – тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
В этом посте мы с вами рассмотрим, что именно представляет собой анимация загрузки, какова ее цель и как добавить ее на любой сайт WordPress, включая ваши сайты.
Что такое анимация загрузки?
Анимация загрузки, также называемая preloader (предварительным загрузчиком), является привлекательной анимацией, которая отображается на веб-сайте достаточно долго для загрузки всех элементов. Некоторые загрузочные анимации короткие и не требуют длительного внимания пользователя. Но в некоторых случаях, если сайт очень большой, анимация загрузки должна быть действительно увлекательной, чтобы пользователь оставался на месте.
Если вы ведете блог достаточно долго, вы знаете, что анимация загрузки появилась где-то с 90-х годов. Даже в начале эры интернета у нас была анимационная загрузка. Конечно, тогда они могли бы длиться намного дольше, чем сейчас. Кроме того, мы узнали, как сделать их намного более приятными для пользователя, чтобы он не скучал и не уходил с сайта.
Знакомство с анимацией загрузки
Самый распространенный стиль анимации загрузки — это вращающийся круг. Не путать с «радужным кругом смерти» от компьютеров Apple. Анимация загрузки вращающегося круга имеет ступенчатое градиентное движение. У первых вращающихся предварительных загрузчиков было много различных версий, от цветов, до кружков, снежинок и даже вращающихся инь — ян. В наше время анимация вращающейся загрузки стала более динамичной и приятной на вид.
Вращающиеся анимации загрузки работают только при коротком времени ожидания. Больше 5 секунд — это уже слишком. Именно тогда разработчики должны использовать более креативные предварительные загрузчики. Веселая и интересная анимация загрузки будет держать пользователя на сайте независимо от того, сколько времени это займет.
Советы для лучшей анимации загрузки
Есть несколько вещей, которые вы можете добавить к своей загрузочной анимации, чтобы сделать ее более интересной, чем просто движущееся изображение. Вот несколько советов, чтобы сделать их еще лучше и эффективнее.
- Включить процентную строку;
- Показать, сколько еще времени пользователь должен ждать;
- Объяснить, что происходит под капотом (реквизит для использования юмора);
- Используйте развлекательную анимацию, которая не обязательно повторяет одно и то же действие.
Преимущества фирменной анимации загрузки
Если у вас есть возможность создать собственную загрузочную анимацию или использовать плагин с опциями настройки, убедитесь, что у прелоадера есть бренд. Это может быть так же просто, как использовать цвета бренда веб-сайта, чтобы фактически использовать иллюстрацию компании. Идея, стоящая за брендингом загрузки анимации, заключается в том, что она выглядит так, как будто она принадлежит этому сайту, а не просто как дополнение. Этот обзор на веб-сайте «Awwwards» может вдохновить ваши собственные творения.
Как добавить анимацию загрузки на ваш сайт WordPress
Добавить анимацию загрузки проще, чем вы думаете. Есть несколько вариантов, как добавить ее на сайт WordPress. От простых в использовании плагинов до добавления пользовательского кода на сайт. Поскольку существует так много разных вариантов, я перечислю их здесь, чтобы вы могли осмотреться и найти, какой из них лучше всего подходит для вас.
Использование плагина для добавления анимации загрузки
Плагин — это самый легкий и простой способ добавить анимацию загрузки. Они особенно полезны, если вам неудобно возиться с кодом или у вас нет времени. Вот список некоторых из самых универсальных плагинов для загрузки анимации. Некоторые из них бесплатны, а другие премиум. В некоторых случаях этот же плагин имеет более простую бесплатную версию и более надежную профессиональную версию.
Loftloader
Loftloader имеет бесплатную и профессиональную версию. В бесплатной версии вы можете опробовать несколько загрузчиков и настроить их так, чтобы они соответствовали сайту и вашему бренду. Pro-версия имеет больше возможностей и более детальный контроль.
Flat Preloader
Flat Preloader — простой бесплатный плагин с ограниченным набором красочных анимаций загрузки. Этот плагин идеально подходит, если вам нужно быстро исправить загрузчик и не нужно настраивать цвета или изображение.
Best Preloader
Best Preloader — бесплатный плагин загрузки анимации с одним вариантом, который подходит для любого стиля сайта. Он поставляется с одной анимацией и некоторыми настройками управления.
Page Loader
Page Loader — это премиальный плагин для анимации загрузки с множеством функций и фирменных настроек. Это один из любимых плагинов для предварительной загрузки на рынке.
WP Smart Preloader
WP Smart Preloader — это бесплатный плагин с открытым исходным кодом с полным набором настроек. Анимации не очень сложные, но будут соответствовать любому стилю сайта. Вы можете настроить цвета и настроить их довольно легко.
Добавление анимации загрузки без плагина
Если вы хотите избежать использования плагина, есть множество бесплатных и готовых к использованию загрузочных анимаций. А также некоторые продвинутые решения, которые предоставляют фрагменты кода, которые нужно добавить.
PixelBuddha with Multimedia:
PixelBuddha with Multimedia — опубликовали простое учебное пособие с двумя бесплатными наборами загрузочных анимаций от PixelBuddha и кодом, который вам необходим для их установки на вашем сайте.
CodePen:
В этой статье UX Planet, посвященной средам, автор обобщает множество загрузочных анимаций в разных стилях. Есть простые и более сложные. Большинство из них встроены в CodePen, и вы можете получить фрагмент HTML и CSS из самого виджета. Вам нужно будет вставить их в свой набор кодов для настройки анимации загрузки.
SpinKit:
У Тобиаса Эшлинка есть SpinKit с хорошей коллекцией загрузочных анимаций с кодом, доступным через GitHub. Они также должны быть добавлены в полный набор кодов для предварительной настройки.
Loading.io:
Loading.io — это коллекция загрузочных анимаций с множеством различных опций. Есть предварительные загрузчики CSS, предварительные загрузчики GIF, кнопки и многое другое. Просмотрите их сайт, чтобы найти все варианты и инструкции о том, как добавить их на свой сайт.
Pixelvars:
Ребята из Pixelvars написали полезное руководство со всем кодом, который вам понадобится для настройки собственной анимации загрузки. Вы даже можете использовать их код вместе с анимациями CodePen или GitHub выше. Эта опция кажется немного более продвинутой для некоторых людей. Возьмите это, если вы разработчик с хорошими знаниями кодирования.
Вот пример моего анимированного загрузчика:
HTHL
<div class=”preloader”>
<div class=”sk-folding-cube”>
<div class=”sk-cube1 sk-cube”></div>
<div class=”sk-cube2 sk-cube”></div>
<div class=”sk-cube4 sk-cube”></div>
<div class=”sk-cube3 sk-cube”></div>
</div>
</div>
CSS
.preloader {
overflow: hidden;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100000;
background: #ffffff;
}
.sk-folding-cube {
top: 50%;
left: 50%;
margin: -20px 0 0 -20px;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
background: #00757b;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
JavaScript
$(window).on(‘load’, function () {
$preloader = $(‘.preloader’),
$loader = $preloader.find(‘.sk-folding-cube’);
$loader.fadeOut();
$preloader.delay(350).fadeOut(‘slow’);
});
Если кому надо — берите, пользуйтесь!
Что так много вариантов, из которых вы можете выбрать?
Добавить анимацию загрузки на сайт WordPress легко. Имеется так много различных вариантов, это просто вопрос выбора.
В этом посте я показал вам много разных способов добавить анимацию загрузки на ваш сайт. Какой метод вы предпочитаете? Пользовательский дизайн и добавление кода в дочернюю тему? Настраиваемый плагин? Простой, без излишеств вариант? Дайте мне знать в комментариях, чтобы я мог проверить ваши собственные анимированный загрузчик.
У меня на этом все — до скорых встреч!
Комментарии закрыты.