Problème html background javascript
MasterRedoxs
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
premièrement j'ai une question. Est-il possible de mettre du javascript ( animation ) comme background dans une page html? Si oui j'aimerais le savoir, car j'ai une animation que j'ai vu et je voudrais la mettre comme background.
Voici le script de la page(avec les javascript) :
<!DOCTYPE html>
<html>
<head>
<style>
canvas
{
background:black;
width:959px;
}
</style>
<link rel="stylesheet" href="css/horizontal.css"/>
</head>
<body>
<header>
</header>
<nav>
</nav>
<div id="contenu">
<canvas>
</canvas>
<script style='display: none;'>var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src='http://acauamontiel.com.br/mantis.js'></script>
<script>// No jQuery (using Mantis.js)
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
color = 'rgba(255, 255, 255, .2)';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.display = 'block';
ctx.fillStyle = color;
ctx.lineWidth = .2;
ctx.strokeStyle = 'rgba(255, 0, 0, .2)';
var mousePosition = {
x: 30 * canvas.width / 100,
y: 30 * canvas.height / 100
};
var dots = {
nb: 200,
distance: 200,
d_radius: 300,
array: []
};
function Dot(){
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = -.1 + Math.random();
this.vy = -.1 + Math.random();
this.radius = Math.random() * 1;
}
Dot.prototype = {
create: function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
},
animate: function(){
for(i = 0; i < dots.nb; i++){
var dot = dots.array[i];
if(dot.y < 0 || dot.y > canvas.height){
dot.vx = dot.vx;
dot.vy = - dot.vy;
}
else if(dot.x < 0 || dot.x > canvas.width){
dot.vx = - dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
},
line: function(){
for(i = 0; i < dots.nb; i++){
for(j = 0; j < dots.nb; j++){
i_dot = dots.array[i];
j_dot = dots.array[j];
if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
ctx.beginPath();
ctx.moveTo(i_dot.x, i_dot.y);
ctx.lineTo(j_dot.x, j_dot.y);
ctx.stroke();
ctx.closePath();
}
}
}
}
}
};
function createDots(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(i = 0; i < dots.nb; i++){
dots.array.push(new Dot());
dot = dots.array[i];
dot.create();
}
dot.line();
dot.animate();
}
$('canvas').on('mousemove', function(e){
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
});
setInterval(createDots, 1000/60);
$(window).on('resize', function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = color;
ctx.strokeStyle = 'rgba(255, 0, 0, .2)';
});//@ sourceURL=pen.js
</script>
</div>
<footer>
</footer>
</body>
</html>
_____________________________________________________________
merci d'avance
premièrement j'ai une question. Est-il possible de mettre du javascript ( animation ) comme background dans une page html? Si oui j'aimerais le savoir, car j'ai une animation que j'ai vu et je voudrais la mettre comme background.
Voici le script de la page(avec les javascript) :
<!DOCTYPE html>
<html>
<head>
<style>
canvas
{
background:black;
width:959px;
}
</style>
<link rel="stylesheet" href="css/horizontal.css"/>
</head>
<body>
<header>
</header>
<nav>
</nav>
<div id="contenu">
<canvas>
</canvas>
<script style='display: none;'>var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src='http://acauamontiel.com.br/mantis.js'></script>
<script>// No jQuery (using Mantis.js)
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
color = 'rgba(255, 255, 255, .2)';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.display = 'block';
ctx.fillStyle = color;
ctx.lineWidth = .2;
ctx.strokeStyle = 'rgba(255, 0, 0, .2)';
var mousePosition = {
x: 30 * canvas.width / 100,
y: 30 * canvas.height / 100
};
var dots = {
nb: 200,
distance: 200,
d_radius: 300,
array: []
};
function Dot(){
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = -.1 + Math.random();
this.vy = -.1 + Math.random();
this.radius = Math.random() * 1;
}
Dot.prototype = {
create: function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
},
animate: function(){
for(i = 0; i < dots.nb; i++){
var dot = dots.array[i];
if(dot.y < 0 || dot.y > canvas.height){
dot.vx = dot.vx;
dot.vy = - dot.vy;
}
else if(dot.x < 0 || dot.x > canvas.width){
dot.vx = - dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
},
line: function(){
for(i = 0; i < dots.nb; i++){
for(j = 0; j < dots.nb; j++){
i_dot = dots.array[i];
j_dot = dots.array[j];
if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
ctx.beginPath();
ctx.moveTo(i_dot.x, i_dot.y);
ctx.lineTo(j_dot.x, j_dot.y);
ctx.stroke();
ctx.closePath();
}
}
}
}
}
};
function createDots(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(i = 0; i < dots.nb; i++){
dots.array.push(new Dot());
dot = dots.array[i];
dot.create();
}
dot.line();
dot.animate();
}
$('canvas').on('mousemove', function(e){
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
});
setInterval(createDots, 1000/60);
$(window).on('resize', function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = color;
ctx.strokeStyle = 'rgba(255, 0, 0, .2)';
});//@ sourceURL=pen.js
</script>
</div>
<footer>
</footer>
</body>
</html>
_____________________________________________________________
merci d'avance
1 réponse
-
Bonjour
faire un background css en javascript n'est pas possible.
pour animer un background en css il y a 2 solutions
mettre ton background sous forme de gif animé mais ca pèse vite assez lourd
ou
utiliser @keyframes en csss3
sinon mettre ton anim dans un div onpage qui prend toute la page et une position absolute ou fixed et la mettre en dessous de tout le reste avec z-index.
pense aussi qu'un background trop animé peut ruiner le contenu et va vite te faire zapper
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
