[Modification de template] Ajouter une animation Javascript dans le background

par Isy Dim 21 Avr 2019 - 15:40

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour chers amis du forumactif!
Je me permet de faire appel à vos connaissances pour une broutille. Le petit forum en phppb3 me sert de base teste. J’essaie misérablement d’implanter une animation Java script dans le Background.

Voici le fichier HTML que je me suis construit comme référence:

Code:: <html> <head> <style> html, body, div, span, canvas { margin:0; padding:0; } #container { overflow:hidden; position:relative; height: 100%; width: 100%; background:-o-linear-gradient(top, #000, #257eb7); background:-ms-linear-gradient(top, #000, #257eb7); background:-moz-linear-gradient(top, #000, #257eb7); background:-webkit-linear-gradient(top, #000, #021522); background:linear-gradient(top, #000, #257eb7); filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#040429', EndColorStr='#257eb7'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#040429', EndColorStr='#257eb7')"; } #pixie { z-index:10; position: absolute; top: 0; left: 0; } </style> <script src='https://code.jquery.com/jquery-3.4.0.slim.min.js'></script> <script> var WIDTH; var HEIGHT; var canvas; var con; var g; var pxs = new Array(); var rint = 50; $(document).ready(function(){ WIDTH = window.innerWidth; HEIGHT = window.innerHeight; $('#container').width(WIDTH).height(HEIGHT); canvas = document.getElementById('pixie'); $(canvas).attr('width', WIDTH).attr('height',HEIGHT); con = canvas.getContext('2d'); for(var i = 0; i < 50; i++) { pxs[i] = new Circle(); pxs[i].reset(); } setInterval(draw,rint); setInterval(draw,rint2); }); function draw() { con.clearRect(0,0,WIDTH,HEIGHT); for(var i = 0; i < pxs.length; i++) { pxs[i].fade(); pxs[i].move(); pxs[i].draw(); } } function Circle() { this.s = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true}; this.reset = function() { this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef); this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef); this.r = ((this.s.rmax-1)*Math.random()) + 1; this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1); this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1); this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax); this.rt = Math.random()*this.hl; this.s.rt = Math.random()+1; this.stop = Math.random()*.2+.4; this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1); this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1); } this.fade = function() { this.rt += this.s.rt; } this.draw = function() { if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt*-1; else if(this.rt >= this.hl) this.reset(); var newo = 1-(this.rt/this.hl); con.beginPath(); con.arc(this.x,this.y,this.r,0,Math.PI*2,true); con.closePath(); var cr = this.r*newo; g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr)); g.addColorStop(0.0, 'rgba(238,180,28,'+newo+')'); g.addColorStop(this.stop, 'rgba(238,180,28,'+(newo*.2)+')'); g.addColorStop(1.0, 'rgba(238,180,28,0)'); con.fillStyle = g; con.fill(); } this.move = function() { this.x += (this.rt/this.hl)*this.dx; this.y += (this.rt/this.hl)*this.dy; if(this.x > WIDTH || this.x < 0) this.dx *= -1; if(this.y > HEIGHT || this.y < 0) this.dy *= -1; } this.getX = function() { return this.x; } this.getY = function() { return this.y; } } </script> </head> <body> <div id="container"> <canvas id="pixie"></canvas> </div> </body> </html>

Dans FA:

- J'ouvre la feuille Template > General > overall_header

- En dessous de de body je met ma balise div avec le canvas, comme ceci:

Code:: <body id="phpbb"> <div id="container"> <canvas id="pixie"></canvas>

- Et bien sur le Style dans le couleur > CSS

Mais voila que les choses se corsent, je n'arrive pas a intégrer la partie Javascript. Que ce soit en collant dans la partie Header, ou dans le module Java.

Est-ce que quelqu'un à une solution?

Merci d'avance pour vos futurs réponses!

par Isy Ven 26 Avr 2019 - 16:46

Petit Up, personne n'a une idée ? ^^

par Adam_sfp Ven 26 Avr 2019 - 20:04

Bonsoir

Vous pourriez utiliser ce script plus facile à mettre en place ( avec un effet similaire )
https://github.com/motyar/firefly
il y a plusieurs versions avec images ou sans..

Cdt.

par **Chacha** Jeu 2 Mai 2019 - 9:48

[Modification de template] Ajouter une animation Javascript dans le background UmaslZ4

Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

par Isy Jeu 2 Mai 2019 - 23:43

Bonjour, merci d'avoir pris le temps de me répondre Adam, mais le code n'est pas celui que je voulais.
J'ai réussit a m en accommoder autrement en créant un HTML dans le module, et un import avec un ifram. Cela marche parfaitement.

Merci tout de même pour votre aide.

[Modification de template] Ajouter une animation Javascript dans le background