CSS / JS-анимация не работает после связывания таблиц стилей
Я не знаю почему, но даже после того, как я свяжу свои файлы 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, я не смогу увидеть анимацию, которую намеревался увидеть.
Пожалуйста, предоставьте остальную часть кода. На данный момент мы не можем четко понять, как эта анимация должна работать.
@VishwasNavadaK здесь работает, но когда я пытаюсь открыть index.html, я не вижу анимации. Все файлы находятся в одной папке: codepen.io/nikrowell/pen/YXQoQE
А вот рабочий пример с использованием html-кода: jsfiddle.net/fe4n1Lam
вы пропустили файл sketch.min.js, щелкните значок js в ручке кода, чтобы увидеть используемые внешние ресурсы. так что загрузите файл js из cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0.0/sketch.min.js и используйте его
@CoderDisorder Вы проверяли консоль браузера на наличие ошибок? похоже, проблема с отсутствующим файлом.
@VishwasNavadaK Я получаю следующее: "site.js: 1 Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Включите код для скетча или скрипт для sketch.js У меня все заработало после включения скетча JS
Привет мужик! Даже если рабочий пример работает, когда я использую файлы, это не так. Что может вызвать это?
Сделайте так, чтобы вы включали свои скрипты после включения скетча js скрипта
Вот полный скрипт в одном файле jsfiddle.net/4hazv3nf/1
Спасибо! Ваше последнее решение (весь сценарий в одном файле) наконец-то сработало. Это также не повлияет на производительность, потому что это своего рода подарок другу, поэтому ... никто не будет проверять код. Большое тебе спасибо!
предоставьте полный код в jsfiddle, чтобы мы могли помочь.