Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Isy le 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!
avatar

Isy
Nouveau membre

Messages : 18
Inscrit(e) le : 07/05/2011

Voir le profil de l'utilisateur http://forumstests.forumgratuit.be/
Isy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Modification de template] Ajouter une animation Javascript dans le background

Message par Isy le Ven 26 Avr 2019 - 16:46

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

Isy
Nouveau membre

Messages : 18
Inscrit(e) le : 07/05/2011

Voir le profil de l'utilisateur http://forumstests.forumgratuit.be/
Isy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Modification de template] Ajouter une animation Javascript dans le background

Message par Adam_sfp le 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.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Modification de template] Ajouter une animation Javascript dans le background

Message par Chacha le Jeu 2 Mai 2019 - 9:48

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

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 »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 64150
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Modification de template] Ajouter une animation Javascript dans le background

Message par Isy le 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.
avatar

Isy
Nouveau membre

Messages : 18
Inscrit(e) le : 07/05/2011

Voir le profil de l'utilisateur http://forumstests.forumgratuit.be/
Isy a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum