• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды JavaScript » Анимация CSS3 для звездного ночного неба (Вот такой интересный анимационный эффект звезд на небе)
Анимация CSS3 для звездного ночного неба
Kosten
Дата: Суббота, 2020-03-07, 05:01 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29181
Награды: 62


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



HTML

Код
<canvas id="canvas">ZorNet.Ru — сайт для вебмастера</canvas>

CSS

Код
body {
  background-color: #222;
  overflow: hidden;
}

canvas {
  background: radial-gradient(ellipse at center, hsl(210, 68%, 10%) 0%, #000 100%);
  display: block;
  margin: 0 auto;
}

JS

Код
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = (canvas.width = window.innerWidth), cx = cw / 2;
var ch = (canvas.height = window.innerHeight), cy = ch / 2;
var m = { x: 0, y: 0 };
var target = { x: 0, y: 0 };
var speed = 0.0005;
var easing = 0.93;
var dragging = false;
var starsNumber = 1500;
var stars = [];
var vp = { x: cx, y: cy }; //vanishing point
var fl = cx; // focal length
var requestId = null;

ctx.globalAlpha =.5;

function Star(x, y, z) {
  this.r = 5;
  this.R = x - cx;
  // 3D position
  this.pos = { x: x, y: y, z: z };
  // 2D position
  this.x = x + cx;
  this.y = y + cy;
  

  this.a = { x: 0, y: 0 };
  this.scale = { x: 1, y: 1 };

  this.rotateX = function(angle) {
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    var y1 = this.pos.y * cos - this.pos.z * sin;
    var z1 = this.pos.z * cos + this.pos.y * sin;

    this.pos.y = y1;
    this.pos.z = z1;
  };

  this.rotateY = function(angle) {
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    var x1 = this.pos.x * cos - this.pos.z * sin;
    var z1 = this.pos.z * cos + this.pos.x * sin;

    this.pos.x = x1;
    this.pos.z = z1;
  };

  this.draw3D = function() {
    if (this.pos.z > -fl) {
      var scale = fl / (fl - this.pos.z);

      this.scale = { x: scale, y: scale };
      this.x = vp.x + this.pos.x * scale;
      this.y = vp.y + this.pos.y * scale;
      this.visible = true;
    } else {
      this.visible = false;
    }
  };

  this.draw2D = function() {
    
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.scale(this.scale.x, this.scale.y);
    ctx.beginPath();
    //ctx.arc(0, 0, this.r, 0, 2 * Math.PI);
    ctx.fillStyle = oGrd(this.r, 210);
    ctx.fillRect(0,0,2*this.r,2*this.r);
    ctx.restore();
  };
}

function starsGenerator(){
stars.length = 0;
for (var i = 0; i < starsNumber; i++) {
  var x = Math.random() * 2*cw - cw;
  var y = Math.random() * 2*ch - ch;
  var z = Math.random() * 1000 - 500;
  stars.push(new Star(x, y, z));
}
}

//starsGenerator();

function Draw() {
  requestId = window.requestAnimationFrame(Draw);
  ctx.clearRect(0, 0, cw, ch);
  txt();
  stars.map(function(s) {
    s.draw3D();
    
  });
  stars.sort(function(a, b) {
    return a.pos.z - b.pos.z;
  });

  target.x *= easing;
  target.y *= easing;

  stars.map(function(s) {
    s.rotateX(target.x);
    s.rotateY(target.y);
    if (s.visible) {
      s.draw2D();
    }
  });
}
//Draw();

canvas.addEventListener(
  "mousedown",
  function(evt) {
    dragging = true;
  },
  false
);
canvas.addEventListener(
  "mousemove",
  function(evt) {
    if (dragging) {
      m = oMousePos(canvas, evt);
      target.x = (m.y - vp.y) * speed;
      target.y = (m.x - vp.x) * speed;
    }
  },
  false
);
canvas.addEventListener(
  "mouseup",
  function(evt) {
    dragging = false;
  },
  false
);
canvas.addEventListener(
  "mouseoutp",
  function(evt) {
    dragging = false;
  },
  false
);

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

function oGrd(r, h) {
  grd = ctx.createRadialGradient(r,r,0,r,r,r);

  grd.addColorStop(0, "hsla(" + h + ",95%,95%, 1)");
  grd.addColorStop(0.4, "hsla(" + h + ",95%,45%,.5)");
  grd.addColorStop(1, "hsla(" + h + ", 95%, 45%, 0)");

  return grd;
}

function txt() {
  var t = "Click & drag".split("").join(" ");
  ctx.font = "1.5em Lucida Console";
  ctx.fillStyle = "hsla(210,95%,45%,.75)";
  ctx.textAlign="end";  
  ctx.fillText(t, cw*.95, ch*.95);
}

function Init() {
  if (requestId) {
    window.cancelAnimationFrame(requestId);
    requestId = null;
  }

  (cw = canvas.width = window.innerWidth), (cx = cw / 2);
  (ch = canvas.height = window.innerHeight), (cy = ch / 2);
  starsGenerator()

  var vp = { x: cx, y: cy }; //vanishing point
  var fl = cx; // focal length
  Draw();
}

window.setTimeout(function() {
  Init();
  window.addEventListener("resize", Init, false);
}, 15);

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

Демонстрация
Прикрепления: 4406318.jpg(20.6 Kb) · the-starry-sky-.zip(5.8 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-08, 17:45 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29181
Награды: 62


Фон для сайта, который создан под звёздное небо на чистом CSS.



HTML

Код
<header>
  <h1>Звёздное небо</h1>
  <small>Подзаголовок или текст</small>
</header>

CSS

Код
@import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Merienda');
html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  perspective: 1px;
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: 'IM Fell English SC', serif;
  font-family: 'Merienda', cursive;
  color: #fff;
}
header {
  box-sizing: border-box;
  min-height: 100vh;
  text-align: center;
  padding-top: 20%;
  transform-style: inherit;
  width: 100vw;
}
header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transform-origin: center;
  min-height: 100vh;
  background-image: url(https://images.unsplash.com/photo-1532140225690-f6d25ab4c891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=84cce292e58788c4a0f7e847dd88b490&auto=format&fit=crop&w=1350&q=80);
  background-repeat: no-repeat;
  background-size: cover;
  
  /*Paralax*/
  transform: translateZ(-1px) scale(2);
}
header {
  margin-top: -100px;
  font-size: 33px;
}


Демонстрация
Прикрепления: 0376499.jpg(224.7 Kb) · 2564019.jpg(56.0 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2020-03-11, 04:02 | Сообщение 3
Оффлайн
Администраторы
Сообщений:29181
Награды: 62


Еще один вариант под фон звездного неба, который идет без анимации, что на чистом CSS, где задействована ссылка, что закреплена под материалом.

HTML

Код
<div class="samipudsa"></div>
<div class="demilkus"></div>

CSS

Код
.samipudsa, .demilkus {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.samipudsa {
  background:#000 url(http://zornet.ru/Abavaga/stars.png) repeat top center;
  z-index:0;
}


Демонстрация
Прикрепления: 6222482.png(267.3 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды JavaScript » Анимация CSS3 для звездного ночного неба (Вот такой интересный анимационный эффект звезд на небе)
  • Страница 1 из 1
  • 1
Поиск: