» »

Звездный фон с эффектом CSS параллакс

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

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



Установка:

HTML

Код
<canvas></canvas>

CSS

Код
body {
  background: radial-gradient(ellipse at bottom, #141e2b 0%, #0e0f15 100%);
  margin: 0;
  overflow: hidden;
}

JS

Код
// canvas setup
const canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

// watch for browser resizing, reinitialize stars
window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
});

function Star(x, y, width, speed) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.speed = speed;
  this.color = "#fff";
   
  this.draw = function() {
  ctx.fillStyle = this.color;
  ctx.fillRect(this.x, this.y, width, width);
  }

  this.update = () => {
  // check bounds
  if (this.x + this.width > innerWidth) {
  this.x = 0;
  }
  this.x += this.speed;

  this.draw();
  }
}

// Star dimensions and speed
const stars = {
  nearStar : {
  width : 3,
  speed : 0.2
  },
  midStar : {
  width : 2,
  speed : 0.1
  },
  farStar : {
  width : 1,
  speed : 0.025
  }
};

let starArray = [];

// clear starArray and generate 3 layers of stars randomly
function init() {

  starArray = [];
  // nearest stars
  for (let i=0; i < 50; ++i) {
  const x = Math.random() * (innerWidth - stars.nearStar.width);
  const y = Math.random() * (innerHeight - stars.nearStar.width);
  starArray.push(new Star(x, y, stars.nearStar.width, stars.nearStar.speed));
  }

  // mid-distance stars
  for (let i=0; i < 100; ++i) {
  const x = Math.random() * (innerWidth - stars.midStar.width);
  const y = Math.random() * (innerHeight - stars.midStar.width);
  starArray.push(new Star(x, y, stars.midStar.width, stars.midStar.speed));
  }

  // farthest stars
  for (let i=0; i < 350; ++i) {
  const x = Math.random() * (innerWidth - stars.farStar.width);
  const y = Math.random() * (innerHeight - stars.farStar.width);
  starArray.push(new Star(x, y, stars.farStar.width, stars.farStar.speed));
  }
}

// loop to call update function on each star
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, innerWidth, innerHeight);

  for (var star of starArray) {
  star.update();
  }
}

init();
animate();

Так как все исполнено и подключено CSS-эффект анимации, вы не получите интерактивную анимацию частиц. Но здесь уже можете добавить функции самостоятельно, ведь структура кода остается очень простой, поэтому настройка ее не будет проблемой для разработчика.

Демонстрация
2019-12-22 Загрузок: 1 Просмотров: 316 Комментарий: (0)

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

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

Оставь свой отзыв

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