CSS / JS анимация не работает после связывания таблиц стилей - PullRequest
Новая
       39

CSS / JS анимация не работает после связывания таблиц стилей

0 голосов
/ 17 декабря 2018

Не знаю почему, но даже после того, как я связал свои файлы CSS / JS с моим HTML, я не вижу анимацию.Это код (я вижу только h1): 

var stats,
  particles = [];

Math.range = function(min, max) {
  if (!max) {
    max = min;
    min = 0;
  }
  return min + Math.random() * (max - min);
};

Math.chance = function(probability) {
  if (!probability) {
    probability = 0.5;
  }
  return Math.random() < probability;
};

function toRGB(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function Particle() {
  this.isActive = (Math.chance(0.5));
}

Particle.COLORS = ['#ff0000', '#daede6', '#a3d9cc', '#738076', '#734357', '#f5496b', '#e3b1be'];

Particle.prototype.init = function() {
  this.radius = 1;
  this.color = toRGB(Particle.COLORS[Math.round(Math.random() * (Particle.COLORS.length - 1))]);
  this.alpha = 1;
  this.fade = Math.range(0.005, 0.25);
  this.grow = (this.fade > 0.01) ? Math.range(0.25, 0.5) : Math.range(0.05, 0.4);

  if (!this.isActive) {
    this.x += Math.range(-10, 10);
    this.y += Math.range(-10, 10);
  }
};

Particle.prototype.update = function() {
  if (this.isActive) {
    this.alpha -= this.fade;
    this.radius += this.grow;
  }
  if (this.alpha <= 0) {
    this.init();
  }
};

Particle.prototype.draw = function(ctx) {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.alpha + ')';
  ctx.fill();
};
* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ebe9e1;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #FFFFFF), color-stop(100%, #ebe9e1));
  background: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: -ms-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: radial-gradient(ellipse at center, #FFFFFF 0%, #ebe9e1 100%);
}

#stats {
  position: absolute;
  z-index: 10;
  left: 10px;
  top: 10px;
}

h1 {
  text-align: center;
  margin-top: 5%;
  font-family: 'Kaushan Script', cursive;
  font-size: 30px;
  text-transform: uppercase;
}
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Major+Mono+Display|Montserrat|Permanent+Marker" rel="stylesheet">
  <script type="text/javascript" src="site.js"></script>
</head>

Я включил только тег заголовка, потому что остальное не так важно для решения моей проблемы.Что я могу сделать, чтобы отобразить анимацию?Если я открою страницу index.html, я не смогу увидеть анимацию, которую намеревался увидеть.

1 Ответ

0 голосов
/ 17 декабря 2018

Включите код для эскиза или включите скрипт для sketch.js Я получил его после включения эскиза JS

...