4.11.13, 22:27
0 комментарий
  Уроки

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

Сегодня мы хотели бы показать вам некоторые идеи для создания креативных загрузок. В наши дни на сайтах используется множество различных эффектов и анимаций. Достаточно взять в пример красную строку загрузки в 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.

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

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


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


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


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


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


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


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

Исходник в архиве.

Напишите своё мнение