—»     —»   Создаем креативные эффекты загрузки
  Раздел: CSS/Style Sheets   Нет комментариев  

Создаем креативные эффекты загрузки



Создаем креативные эффекты загрузки

Сегодня мы хотели бы показать вам некоторые идеи для создания креативных загрузок. В наши дни на сайтах используется множество различных эффектов и анимаций. Достаточно взять в пример красную строку загрузки в Youtube. Когда на странице идет загрузка контента – будь то изображения или дополнительное содержимое, - было бы неплохо оповестить посетителей об этом при помощи небольшого индикатора загрузки.

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

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

В качестве примера мы хотим показать, как сделали один из эффектов: раскрытие загрузки из центра страницы::

.la-anim-7 {
position: fixed;
top: 50%;
bottom: 0;
left: 50%;
z-index: -1;
width: 0;
height: 100%;
background: rgba(0,0,0,0.1);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
}

.la-anim-7.la-animate {
z-index: 100;
width: 100%;
opacity: 0;
transition: width 5s ease-in, opacity 1s 5s;
}

Некоторые браузеры не поддерживают переходы и анимации, примененные к псевдо-элементам, поэтому некоторые эффекты в демо не будут работать. Представленные примеры не будут работать в браузерах, которые не поддерживают 3D-трансформации на CSS (то есть, IE9 и ниже).

Круглый таймер на SVG был разработан Anders Grimsrud, а круг загрузки в примере с угловым индикатором – дизайнером по имени Metty.

Давайте взглянем на скриншоты некоторых эффектов:

Создаем креативные эффекты загрузки
Создаем креативные эффекты загрузки
Создаем креативные эффекты загрузки
Создаем креативные эффекты загрузки
Создаем креативные эффекты загрузки
Создаем креативные эффекты загрузки

Надеемся, что данные примеры вдохновят вас на собственные эффекты!

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 3766   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930