ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект загрузки страницы с мячами на CSS

Эффект загрузки страницы с мячами на CSS

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

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

Это аналогичный эффект, созданный с помощью CSS3, где 5 цветных шаров жонглируют автоматически. Основная идея состоит в том, чтобы изменить положение шаров, и когда все шары меняют свое положение одновременно, создается эффект жонглирования. CSS использует после и перед селекторами для каждого шара и использует различные правила @keyframe для масштабирования, переводит на оси x и y и использует эффект постепенного уменьшения.

Приступаем к установке:

HTML

Код

CSS

Код

#tukolsa-tomakib {
  width: 194px;
  height: 48px;
  position: absolute;
  top: calc(49% + 49px);
  left: calc(49% + 49px);
  opacity: 0;
  animation: fadeIn 1s 1;
  animation-fill-mode: forwards;
  -webkit-animation: fadeIn 1s 1;
  -webkit-animation-fill-mode: forwards;
}

.butaking-itomesay {
  animation: translateX 1000ms infinite ease-in-out alternate;
  -webkit-animation: translateX 1000ms infinite ease-in-out alternate;
  position: absolute;
}

.lavidiawould-poslaunch {
  width: 51px;
  height: 51px;
  box-shadow: -6.25px -6.25px 0 rgba(0, 0, 0, 0.1) inset;
  background-color: #397BF9;
  border-radius: 50%;
  animation: translateY 500ms infinite ease-in-out alternate;
  -webkit-animation: translateY 500ms infinite ease-in-out alternate;
}

.butaking-itomesay:after {
  content: '';
  width: 50px;
  height: 7.5px;
  background: #eee;
  position: absolute;
  bottom: 0;
  top: 70px;
  border-radius: 87%;
  animation: scale 500ms infinite ease-in-out alternate;
  -webkit-animation: scale 500ms infinite ease-in-out alternate;
}

#butaking-itomesay2,
#lavidiawould-poslaunch2,
#butaking-itomesay2:after {
  animation-delay: -400ms;
  -webkit-animation-delay: -400ms;
}

#butaking-itomesay3,
#lavidiawould-poslaunch3,
#butaking-itomesay3:after {
  animation-delay: -800ms;
  -webkit-animation-delay: -800ms;
}

#butaking-itomesay4,
#lavidiawould-poslaunch4,
#butaking-itomesay4:after {
  animation-delay: -1200ms;
  -webkit-animation-delay: -1200ms;
}

#butaking-itomesay5,
#lavidiawould-poslaunch5,
#butaking-itomesay5:after {
  animation-delay: -1600ms;
  -webkit-animation-delay: -1600ms;
}

#lavidiawould-poslaunch2 {
  background-color: #e0a90f;
}

#lavidiawould-poslaunch3 {
  background-color: #dcd8d8;
}

#lavidiawould-poslaunch4 {
  background-color: #099853;
}

#lavidiawould-poslaunch5 {
  background-color: #d06860;
}

@keyframes translateX {
  100% {
  transform: translateX(-150px);
  }
}
@keyframes translateY {
  100% {
  transform: translateY(-187.5px);
  }
}
@keyframes scale {
  100% {
  transform: scale(0.85);
  }
}
@keyframes fadeIn {
  100% {
  opacity: 1;
  }
}

@-webkit-keyframes translateX {
  100% {
  transform: translateX(-150px);
  }
}
@-webkit-keyframes translateY {
  100% {
  transform: translateY(-187.5px);
  }
}
@-webkit-keyframes scale {
  100% {
  transform: scale(0.85);
  }
}
@-webkit-keyframes fadeIn {
  100% {
  opacity: 1;
  }
}

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

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

Демонстрация

28 Июля 2018 Просмотров: 1200 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0