СТАТИЧЕСКАЯ АНИМИРОВАННАЯ СТРАНИЦА "ЗВЕЗДНАЯ ПЫЛЬ"


Очень привлекательная, живая, визуальная страница с текстом и эффектом "звездная пыль".
Данное решение можно применить для статических и отдельных страниц сайта. Также будет смотреться в качестве стартовой (Главной) страницы или страницы ошибки 404. 

HTML

Код
<!DOCTYPE html> 

<html> 



<head> 

  <meta charset='UTF-8'> 

  <meta name="robots" content="noindex"> 

  <style type="text/css"> 

  @import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600"); 



  body { 

  margin: 0; 

  padding: 0; 

  overflow: hidden; 

  width: 100%; 

  height: 100%; 

  background: #000000; 

  } 



  .title { 

  z-index: 10; 

  position: absolute; 

  left: 50%; 

  top: 50%; 

  transform: translateX(-50%) translateY(-50%); 

  font-family: "Montserrat"; 

  text-align: center; 

  width: 100%; 

  } 



  .title h1 { 

  position: relative; 

  color: #FFF; 

  font-weight: 100; 

  font-size: 90px; 

  padding: 0; 

  margin: 0; 

  line-height: 1; 

  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d; 

  } 



  .title h1 span { 

  font-weight: 600; 

  padding: 0; 

  margin: 0; 

  color: #FFFFFF; 

  } 



  .title h3 { 

  font-weight: 200; 

  font-size: 20px; 

  padding: 0; 

  margin: 0; 

  line-height: 1; 

  color: #FFFFFF; 

  letter-spacing: 2px; 

  } 

  </style> 

</head> 



<body> 

  <div class="title"> 

  <h3>Online shop - 2018</h3> 

  <h1>ART-UCOZ</h1> 

  <h3>ЗВЕЗДНАЯ <strong> ПЫЛЬ</strong></h3> 

  </div> 



  <script type="text/javascript"> 

  "use strict"; 

  "object" != typeof window.AU && (window.AU = {}), window.AU.PenTimer = { 

  programNoLongerBeingMonitored: !1, 

  timeOfFirstCallToShouldStopLoop: 0, 

  _loopExits: {}, 

  _loopTimers: {}, 

  START_MONITORING_AFTER: 2e3, 

  STOP_ALL_MONITORING_TIMEOUT: 5e3, 

  MAX_TIME_IN_LOOP_WO_EXIT: 2200, 

  exitedLoop: function(o) { 

  this._loopExits[o] = !0 

  }, 

  shouldStopLoop: function(o) { 

  if (this.programKilledSoStopMonitoring) return !0; 

  if (this.programNoLongerBeingMonitored) return !1; 

  if (this._loopExits[o]) return !1; 

  var t = this._getTime(); 

  if (0 === this.timeOfFirstCallToShouldStopLoop) returnthis.timeOfFirstCallToShouldStopLoop = t, !1; 

  var i = t - this.timeOfFirstCallToShouldStopLoop; 

  if (i < this.START_MONITORING_AFTER) return !1; 

  if (i > this.STOP_ALL_MONITORING_TIMEOUT) return this.programNoLongerBeingMonitored =!0, !1; 

  try { 

  this._checkOnInfiniteLoop(o, t) 

  } catch (o) { 

  return this._sendErrorMessageToEditor(), this.programKilledSoStopMonitoring = !0, !0 

  } 

  return !1 

  }, 

  _shouldPostMessage: function() { 

  return document.location.href.match(/boomerang/) 

  }, 

  _findAroundLineNumber: function() { 

  var o = new Error, 

  t = 0; 

  if (o.stack) { 

  var i = o.stack.match(/boomerang\S+:(\d+):\d+/); 

  i && (t = i[1]) 

  } 

  return t 

  }, 

  _getTime: function() { 

  return +new Date 

  } 

  }, window.AU.shouldStopExecution = function(o) { 

  var t = window.AU.PenTimer.shouldStopLoop(o); 

  return t === !0 && console.warn(), t 

  }, window.AU.exitedLoop = function(o) { 

  window.AU.PenTimer.exitedLoop(o) 

  }; 

  </script> 

  <script src='http://art-ucoz.ru/.s/src/jquery-1.10.2.js'></script> 

  <script> 

  var _createClass = function() { 

  function defineProperties(target, props) { 

  for (var i = 0; i < props.length; i++) { 

  if (window.AU.shouldStopExecution(1)) { 

  break; 

  } 

  var descriptor = props[i]; 

  descriptor.enumerable = descriptor.enumerable || false; 

  descriptor.configurable = true; 

  if ("value" in descriptor) descriptor.writable = true; 

  Object.defineProperty(target, descriptor.key, descriptor); 

  } 

  window.AU.exitedLoop(1); 

  } 

  return function(Constructor, protoProps, staticProps) { 

  if (protoProps) defineProperties(Constructor.prototype, protoProps); 

  if (staticProps) defineProperties(Constructor, staticProps); 

  return Constructor; 

  }; 

  }(); 



  function _classCallCheck(instance, Constructor) { 

  if (!(instance instanceof Constructor)) { 

  throw new TypeError("Cannot call a class as a function"); 

  } 

  } 



  var particles = []; 

  var microparticles = []; 



  var c1 = createCanvas({ 

  width: $(window).width(), 

  height: $(window).height() 

  }); 



  var tela = c1.canvas; 

  var canvas = c1.context; 



  // $("body").append(tela); 

  $("body").append(c1.canvas); 



  var Particle = function() { 

  function Particle(canvas) { 

  _classCallCheck(this, Particle); 



  this.random = Math.random(); 

  this.random1 = Math.random(); 

  this.random2 = Math.random(); 

  this.progress = 0; 

  this.canvas = canvas; 

  this.life = 1000 + Math.random() * 3000; 



  this.x = $(window).width() / 2 + (Math.random() * 20 - Math.random() * 20); 

  this.y = $(window).height(); 

  this.s = 2 + Math.random(); 

  this.w = $(window).width(); 

  this.h = $(window).height(); 

  this.direction = this.random > .5 ? -1 : 1; 

  this.radius = 1 + 3 * this.random; 

  this.color = "#ff417d"; 



  this.ID = setInterval(function() { 

  microparticles.push(new microParticle(c1.context, { 

  x: this.x, 

  y: this.y 

  })); 

  }.bind(this), this.random * 20); 



  setTimeout(function() { 

  clearInterval(this.ID); 

  }.bind(this), this.life); 

  } 



  _createClass(Particle, [{ 

  key: "render", 

  value: function render() { 

  this.canvas.beginPath(); 

  this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); 

  // this.canvas.lineWidth = 2; 

  this.canvas.shadowOffsetX = 0; 

  this.canvas.shadowOffsetY = 0; 

  // this.canvas.shadowBlur = 6; 

  this.canvas.shadowColor = "#000000"; 

  this.canvas.fillStyle = this.color; 

  this.canvas.fill(); 

  this.canvas.closePath(); 

  } 

  }, { 

  key: "move", 

  value: function move() { 

  this.x -= this.direction * Math.sin(this.progress / (this.random1 * 430)) * this.s; 

  this.y -= Math.cos(this.progress / this.h) * this.s; 



  if (this.x < 0 || this.x > this.w - this.radius) { 

  clearInterval(this.ID); 

  return false; 

  } 



  if (this.y < 0) { 

  clearInterval(this.ID); 

  return false; 

  } 

  this.render(); 

  this.progress++; 

  return true; 

  } 

  }]); 



  return Particle; 

  }(); 



  var microParticle = function() { 

  function microParticle(canvas, options) { 

  _classCallCheck(this, microParticle); 



  this.random = Math.random(); 

  this.random1 = Math.random(); 

  this.random2 = Math.random(); 

  this.progress = 0; 

  this.canvas = canvas; 



  this.x = options.x; 

  this.y = options.y; 

  this.s = 2 + Math.random() * 3; 

  this.w = $(window).width(); 

  this.h = $(window).height(); 

  this.radius = 1 + this.random * 0.5; 

  this.color = "#4EFCFE"; //this.random > .5 ? "#a9722c" : "#FFFED7" 

  } 



  _createClass(microParticle, [{ 

  key: "render", 

  value: function render() { 

  this.canvas.beginPath(); 

  this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); 

  this.canvas.lineWidth = 2; 

  this.canvas.fillStyle = this.color; 

  this.canvas.fill(); 

  this.canvas.closePath(); 

  } 

  }, { 

  key: "move", 

  value: function move() { 

  this.x -= Math.sin(this.progress / (100 / (this.random1 - this.random2 * 10))) *this.s; 

  this.y += Math.cos(this.progress / this.h) * this.s; 



  if (this.x < 0 || this.x > this.w - this.radius) { 

  return false; 

  } 



  if (this.y > this.h) { 

  return false; 

  } 

  this.render(); 

  this.progress++; 

  return true; 

  } 

  }]); 



  return microParticle; 

  }(); 



  var random_life = 1000; 



  setInterval(function() { 

  particles.push(new Particle(canvas)); 

  random_life = 2000 * Math.random(); 

  }.bind(this), random_life); 



  function clear() { 

  var grd = canvas.createRadialGradient(tela.width / 2, tela.height / 2, 0, tela.width / 2, tela.height / 2, tela.width); 

  grd.addColorStop(0, "rgba(82,42,114,1)"); 

  grd.addColorStop(1, "rgba(26,14,4,0)"); 

  // Fill with gradient 

  canvas.globalAlpha = 0.16; 

  canvas.fillStyle = grd; 

  canvas.fillRect(0, 0, tela.width, tela.height); 

  } 



  function blur(ctx, canvas, amt) { 

  // ctx.filter = `blur(${amt}px)` 

  // ctx.drawImage(canvas, 0, 0) 

  // ctx.filter = 'none' 

  } 



  function update() { 

  clear(); 

  particles = particles.filter(function(p) { 

  return p.move(); 

  }); 

  microparticles = microparticles.filter(function(mp) { 

  return mp.move(); 

  }); 

  requestAnimationFrame(update.bind(this)); 

  } 



  function createCanvas(properties) { 

  var canvas = document.createElement('canvas'); 

  canvas.width = properties.width; 

  canvas.height = properties.height; 

  var context = canvas.getContext('2d'); 

  return { 

  canvas: canvas, 

  context: context 

  }; 

  } 

  update(); 

  </script> 

</body> 



</html>


Источник: http://art-ucoz.ru Демо
Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Поиск по сайту
Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473