Problème html background javascript

Fermé

MasterRedoxs - 26 mai 2014 à 19:26
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 27 mai 2014 à 03:53

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

A voir également:

Problème html background javascript
Telecharger javascript - Télécharger - Langages
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
Br html ✓ - Forum Webmastering
/Var/www/html/index.html ✓ - Forum Linux / Unix

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 27/05/2014 à 03:57

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.

Discussions similaires

&nbsp ; Quelle Fonction ?

Espace en HTML

la balise <br> ou <br />

Javascript Arrondi à 2 chiffres après la virgule

Image cliquable dans html

Discussions similaires

Newsletters