ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Звездный фон с эффектом CSS параллакс

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

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

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

Установка:

HTML

Код

CSS

Код

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

Код

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

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

22 Декабря 2019 Загрузок: 4 Просмотров: 1927 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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