« Анимационная загрузка с частицами, вращающийся и импульсный эффект »

Описание материала:

Сегодня вы научитесь создавать погрузчик с вращающимся и импульсным эффектом. В основном, есть круговая вращающаяся анимация предварительного загрузчика с 3 кругами. Один круг большой, один маленький, а другой меньше. И у этих кругов только цвет заливки не полностью заполнен, две стороны кругов недоступны, что делает дизайн более креативным. Круги вращаются по часовой стрелке и против часовой стрелки многократно, и вращаются они в противоположном направлении друг от друга. В середине всех кружков находится текст «Загрузка», который имеет импульсный эффект. Также на заднем плане страницы есть анимация частиц.

Установка:

HTML код:

Код
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:700" rel="stylesheet">
<script src='https://code.jquery.com/jquery-3.2.1.js'></script>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
   
<body>
   
<div class="preloader">
  <div class="loader">
  <span class="text">Загрузка...</span>
  </div>
</div>
<div id="particleCanvas-Blue"></div>
<div id="particleCanvas-White"></div>
   
</body>


CSS код:
Код
body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  width: 100vw;
  height: 100vh;
  background: #222;
}

.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  width: 240px;
  height: 240px;
  border: 5px solid #00e676;
  border-radius: 120px;
  box-sizing: border-box;
}
.preloader:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  content: " ";
  display: block;
  background: #222;
  transform-origin: center;
  z-index: 0;
}
.preloader:after {
  width: 100px;
  height: 200%;
  -webkit-animation: outerRotate2 30s infinite linear;
  -moz-animation: outerRotate2 30s infinite linear;
  -o-animation: outerRotate2 30s infinite linear;
  animation: outerRotate2 30s infinite linear;
}
.preloader .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  width: 200px;
  height: 200px;
  color: #888;
  text-align: center;
  border: 5px solid #08ff87;
  border-radius: 100px;
  box-sizing: border-box;
  z-index: 20;
  text-transform: uppercase;
}
.preloader .loader:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  content: " ";
  display: block;
  background: #222;
  transform-origin: center;
  z-index: -1;
}
.preloader .loader:after {
  width: 100px;
  height: 106%;
  -webkit-animation: outerRotate1 15s infinite linear;
  -moz-animation: outerRotate1 15s infinite linear;
  -o-animation: outerRotate1 15s infinite linear;
  animation: outerRotate1 15s infinite linear;
}
.preloader .loader .text {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 130px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  -webkit-animation: textColour 1s alternate linear infinite;
  -moz-animation: textColour 1s alternate linear infinite;
  -o-animation: textColour 1s alternate linear infinite;
  animation: textColour 1s alternate linear infinite;
  display: block;
  width: 140px;
  height: 140px;
  text-align: center;
  border: 5px solid #05ff2d;
  border-radius: 70px;
  box-sizing: border-box;
  z-index: 20;
}
.preloader .loader .text:before, .preloader .loader .text:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  content: " ";
  display: block;
  background: #222;
  transform-origin: center;
  z-index: -1;
}
.preloader .loader .text:before {
  width: 110%;
  height: 40px;
  -webkit-animation: outerRotate2 3.5s infinite linear;
  -moz-animation: outerRotate2 3.5s infinite linear;
  -o-animation: outerRotate2 3.5s infinite linear;
  animation: outerRotate2 3.5s infinite linear;
}
.preloader .loader .text:after {
  width: 40px;
  height: 110%;
  -webkit-animation: outerRotate1 8s infinite linear;
  -moz-animation: outerRotate1 8s infinite linear;
  -o-animation: outerRotate1 8s infinite linear;
  animation: outerRotate1 8s infinite linear;
}

#particleCanvas-White {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  width: 100%;
  height: 50%;
  opacity: 0.1;
}

#particleCanvas-Blue {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  width: 300px;
  height: 300px;
}
@keyframes outerRotate1 {
  0% {
  transform: translate(-50%, -50%) rotate(0);
  }
  100% {
  transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes outerRotate2 {
  0% {
  transform: translate(-50%, -50%) rotate(0);
  }
  100% {
  transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes textColour {
  0% {
  color: #fff;
  }
  100% {
  color: #05ff2d;
  }
}


JS код:
Код
particlesJS("particleCanvas-Blue", {
  particles: {
  number: {
  value: 100,
  density: {
  enable: true,
  value_area: 800
  }
  },
  color: {
  value: "#00e676"
  },
  shape: {
  type: "circle",
  stroke: {
  width: 0,
  color: "#000000"
  },
  polygon: {
  nb_sides: 3
  },
  image: {
  src: "/img/github.svg",
  width: 100,
  height: 100
  }
  },
  opacity: {
  value: 0.5,
  random: false,
  anim: {
  enable: true,
  speed: 1,
  opacity_min: 0.1,
  sync: false
  }
  },
  size: {
  value: 10,
  random: true,
  anim: {
  enable: false,
  speed: 10,
  size_min: 0.1,
  sync: false
  }
  },
  line_linked: {
  enable: false,
  distance: 150,
  color: "#ffffff",
  opacity: 0.4,
  width: 1
  },
  move: {
  enable: true,
  speed: 0.5,
  direction: "none",
  random: true,
  straight: false,
  out_mode: "bounce",
  bounce: false,
  attract: {
  enable: false,
  rotateX: 394.57382081613633,
  rotateY: 157.82952832645452
  }
  }
  },
  interactivity: {
  detect_on: "canvas",
  events: {
  onhover: {
  enable: true,
  mode: "grab"
  },
  onclick: {
  enable: false,
  mode: "push"
  },
  resize: true
  },
  modes: {
  grab: {
  distance: 200,
  line_linked: {
  opacity: 0.2
  }
  },
  bubble: {
  distance: 1500,
  size: 40,
  duration: 7.272727272727273,
  opacity: 0.3676323676323676,
  speed: 3
  },
  repulse: {
  distance: 50,
  duration: 0.4
  },
  push: {
  particles_nb: 4
  },
  remove: {
  particles_nb: 2
  }
  }
  },
  retina_detect: true
});

particlesJS("particleCanvas-White", {
  particles: {
  number: {
  value: 250,
  density: {
  enable: true,
  value_area: 800
  }
  },
  color: {
  value: "#ffffff"
  },
  shape: {
  type: "circle",
  stroke: {
  width: 0,
  color: "#000000"
  },
  polygon: {
  nb_sides: 3
  },
  image: {
  src: "/img/github.svg",
  width: 100,
  height: 100
  }
  },
  opacity: {
  value: 0.5,
  random: true,
  anim: {
  enable: false,
  speed: 0.2,
  opacity_min: 0,
  sync: false
  }
  },
  size: {
  value: 15,
  random: true,
  anim: {
  enable: true,
  speed: 10,
  size_min: 0.1,
  sync: false
  }
  },
  line_linked: {
  enable: false,
  distance: 150,
  color: "#ffffff",
  opacity: 0.4,
  width: 1
  },
  move: {
  enable: true,
  speed: 0.5,
  direction: "none",
  random: true,
  straight: false,
  out_mode: "bounce",
  bounce: false,
  attract: {
  enable: true,
  rotateX: 3945.7382081613637,
  rotateY: 157.82952832645452
  }
  }
  },
  interactivity: {
  detect_on: "canvas",
  events: {
  onhover: {
  enable: false,
  mode: "grab"
  },
  onclick: {
  enable: false,
  mode: "push"
  },
  resize: true
  },
  modes: {
  grab: {
  distance: 200,
  line_linked: {
  opacity: 0.2
  }
  },
  bubble: {
  distance: 1500,
  size: 40,
  duration: 7.272727272727273,
  opacity: 0.3676323676323676,
  speed: 3
  },
  repulse: {
  distance: 50,
  duration: 0.4
  },
  push: {
  particles_nb: 4
  },
  remove: {
  particles_nb: 2
  }
  }
  },
  retina_detect: true
});

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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Формы | Просмотров: 393
Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
Войдите:
avatar