• Страница 2 из 2
  • «
  • 1
  • 2
Форум » Территория вебмастера » Начинающему вебмастеру » Анимация и эффекты загрузки страниц сайта (Подборка лучших загрузчиков для сайта на CSS3)
Анимация и эффекты загрузки страниц сайта
Kosten
Дата: Пятница, 04.05.2018, 17:54 | Сообщение 16
Администраторы
Сообщений:18094
Награды: 55


Экран загрузки призмы должен напоминать один из фона LinkedIn для фотографий. Загрузчик удаленно выглядит как созвездия, которые движутся в пространстве с основным элементом в середине, который потенциально может иметь корпоративный логотип. Погрузчик можно использовать для предприятий, работающих с международными клиентами.



Демонстрация
Прикрепления: 8900145.png(16.7 Kb) · tressa.rar(20.8 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 04.05.2018, 18:04 | Сообщение 17
Администраторы
Сообщений:18094
Награды: 55


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

Предзагрузчик анимации



Демонстрация
Прикрепления: 0126152.png(10.3 Kb) · ghda.rar(10.4 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 04.05.2018, 18:09 | Сообщение 18
Администраторы
Сообщений:18094
Награды: 55


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

Простой загрузчик



Демонстрация
Прикрепления: 9667933.png(2.9 Kb) · tresa.rar(2.4 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 04.05.2018, 18:19 | Сообщение 19
Администраторы
Сообщений:18094
Награды: 55


Вот прелоадер, применимый к компаниям для путешествий и аренды транспорта. Экран загрузки изменяет тип транспортного средства, сопровождаемого текстом, чтобы улучшить общее впечатление.

Предварительная загрузка



Демонстрация
Прикрепления: 3206707.png(11.3 Kb) · saxtunom.rar(12.3 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 04.05.2018, 18:26 | Сообщение 20
Администраторы
Сообщений:18094
Награды: 55


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

Автомобильный дрифтерный погрузчик



Демонстрация
Прикрепления: 9470730.png(6.9 Kb) · ajkg.rar(8.2 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 04.05.2018, 21:11 | Сообщение 21
Администраторы
Сообщений:18094
Награды: 55


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



HTML

Код
<div class='loader loader1'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader2'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader3'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader4'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


SCSS

Код
$grey: rgba(0, 0, 0, .5);
$blue: rgba(0, 0, 255, .5);

@keyframes rotate {
    0% {
  transform: rotate(0deg);
    }
    50% {
  transform: rotate(180deg);
    }
    100% {
  transform: rotate(360deg);
    }
}

@keyframes rotate2 {
    0% {
  transform: rotate(0deg);
  border-top-color: $grey;
    }
    50% {
  transform: rotate(180deg);
  border-top-color: $blue;
    }
    100% {
  transform: rotate(360deg);
  border-top-color: $grey;
    }
}

* {
    box-sizing: border-box;
}

body {
    background: #f9f9f9;
    padding-bottom: 100px;
}

h1, h3 {
    display: block;
    margin: 0px auto;
    text-align: center;
    font-family: 'Tahoma';
    font-weight: lighter;
    color: $grey;
    letter-spacing: 1.5px;
}

h1 {
    margin: 50px auto;
}

@mixin loaderDivMixin {
    border-radius: 50%;
    padding: 8px;
    border: 2px solid transparent;
    animation: rotate linear 3.5s infinite;
}

.loader {
    position: relative;
    margin: 75px auto;
    width: 150px;
    height: 150px;
    display: block;
    overflow: hidden;
    div {
  height: 100%;
    }
}

/* loader 1 */
.loader1, .loader1 div {
    @include loaderDivMixin;
    border-top-color: $grey;
    border-bottom-color: $blue;
}

/*loader 2  */
.loader2, .loader2 div {
    @include loaderDivMixin;
    border-top-color: $blue;
    border-left-color: $grey;
    border-right-color: $grey;
}

/*loader 3  */
.loader3, .loader3 div {
    @include loaderDivMixin;
    border-top-color: $grey;
    border-left-color: $blue;
    animation-timing-function: cubic-bezier(.55, .38, .21, .88);
    animation-duration: 3s;
}

/* loader 4 */
.loader4, .loader4 div {
    @include loaderDivMixin;
    border-radius: 50%;
    padding: 4px;
    animation: rotate2 4s infinite linear;
}

div:hover {
    animation-play-state: paused;
}

.loader, .loader * {
    will-change: transform;
}


Демонстрация
Прикрепления: 4854992.png(17.3 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Анимация и эффекты загрузки страниц сайта (Подборка лучших загрузчиков для сайта на CSS3)
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: