Comment avoir ce background animé en css et javascript ?

santinisantini Membre
11 mai modifié dans Entraide

Bonjour,

Je voudrais avoir ce fond animé sur mon site :

https://codepen.io/JuanFuentes/pen/rgazjZ

J'ai changer la party body du CSS avec le CSS de l'animation

J'ai créer un fichier bg.js avec le contenue javascript del'animation

Et dans le fichier "header.php" j'ai ajouté la ligne ci-dessous:

<script src="<?php $plxShow->template(); ?>/js/bg.js"></script>


et sa ne marche pas... j'ai juste un fond bleu


merci de votre aide :)

Réponses

  • P3terP3ter Responsable de PluXml
    8 mai modifié

    Bonjour,

    Est-ce que tu peux nous indiquer l'URL de ton site, stp ?

  • santinisantini Membre
    11 mai modifié

    Coucou,

    Oui par contre j'ai retiré les modif car sa avais foirer tout le design :s

    http://buzz-local.fr/

    merci de ton aide :)

    Edit: en attendant j'essai de voir si j'arrive a trouver la solution aussi de mon coter*

  • santinisantini Membre
    11 mai modifié

    Le fichier style.css du script:

    body{
     padding: 0;
     margin: 0;
     overflow: hidden;
     background: rgb(32,49,124);
     background: -moz-radial-gradient(center, ellipse cover, rgba(32,49,124,1) 0%, rgba(64,165,232,1) 100%);
     background: -webkit-radial-gradient(center, ellipse cover, rgba(32,49,124,1) 0%,rgba(64,165,232,1) 100%);
     background: radial-gradient(ellipse at center, rgba(32,49,124,1) 0%,rgba(64,165,232,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20317c', endColorstr='#40a5e8',GradientType=1 );
     background-attachment: fixed;
    }
    canvas {
     position: absolute;
     left: 0;
     top: 0;
    }
    

    Le code dans le fichier INDEX du script :

    <script src="js/index.js"></script>
    

    Le contenu du fichier .JS

    var PI2 = Math.PI * 2;
    Math.dist = function(a, b) {
       var dx = a.x - b.x;
       var dy = b.y - b.y;
       return Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
    }
    var Stars = function(args) {
       if (args === undefined) args = {};
       var time = new Date().getTime();
       var _scope = this;
    
       this.stars = [];
       this.velocity = args.velocity || 1;
       this.radius = args.radius || 1;
       this.trail = true;
       this.alpha = 0.01;
       this.starsCounter = args.stars || 200;
       var center = {
           x: window.innerWidth / 2,
           y: window.innerHeight / 2
       };
       var maxDistance = Math.sqrt(Math.pow(center.x, 2), Math.pow(center.y, 2));
       this.init = function() {
           this.canvas = document.createElement("canvas");
           document.body.appendChild(this.canvas);
           this.context = this.canvas.getContext("2d");
           this.start();
           this.resize();
           // 
           window.addEventListener("resize", this.resize.bind(this));
       }
    
       this.start = function() {
           this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
           this.stars = [];
           for (var i = 0; i < this.starsCounter; i++) {
               this.stars.push(new Star());
           }
       }
    
       this.resize = function() {
           this.canvas.width = window.innerWidth;
           this.canvas.height = window.innerHeight;
           center.x = this.canvas.width / 2;
           center.y = this.canvas.height / 2;
       }
    
       this.animate = function() {
           window.requestAnimationFrame(this.animate.bind(this));
           this.render();
       }
       this.render = function() {
           time = new Date().getTime() * 0.00015;
           if (this.trail) {
               this.context.fillStyle = 'rgba(1, 4, 35, ' + this.alpha + ')';
               this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
           } else {
               this.context.fillStyle = 'rgb(1, 4, 35)';
               this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
           }
           for (var i = 0; i < this.stars.length; i++) this.stars[i].draw(this.context);
       }
    
       var Star = function() {
           this.offset = Math.random() * maxDistance;
           this.velocity = Math.random() * _scope.velocity;
           this.coords = {
               x: center.x + this.offset,
               y: center.y + this.offset
           };
           var dist2Center = Math.dist(this.coords, center);
           this.alpha = (dist2Center / maxDistance);
           this.radius = Math.random() * _scope.radius;
           this.fillColor = "rgba(255," + ~~(Math.random() * 160) + "," + ~~(Math.random() * 255) + "," + this.alpha + ")";
           this.draw = function(context) {
               var val = time * this.velocity;
               this.coords = {
                   x: center.x + Math.sin(val) * this.offset,
                   y: center.y + Math.cos(val) * this.offset
               };
               context.fillStyle = this.fillColor;
               context.beginPath();
               context.arc(this.coords.x, this.coords.y, this.radius, 0, PI2);
               context.fill();
               context.closePath();
           }
           return this;
       }
       this.init();
       this.animate();
       return this;
    }
    
    var _stars = new Stars();
    var gui = new dat.GUI();
    gui.add(_stars, 'trail');
    gui.add(_stars, 'alpha', 0.01, 0.3);
    gui.add(_stars, 'starsCounter', 50, 500).onChange(_stars.start.bind(_stars));
    gui.add(_stars, 'radius', 1, 5).onChange(_stars.start.bind(_stars));
    gui.add(_stars, 'velocity', 1, 5).onChange(_stars.start.bind(_stars));
    


  • Kube17Kube17 PluXml Staff
    11 mai modifié

    Je passe juste pour rappeler que les blocs de codes se trouvent, lors de la création d'un message, juste à gauche sur le symbole paragraphe, puis code

    <?php
      $ca = fait('de jolis' . $codes);
      et($ca = rends) {
        $tout = $ca + $lisible;
      }
    ?>
    


    MP - Mail - unkorneglosk.fr - Twitter - Je suis modérateur, je dois donc modérater. Ou modérationner. Ou je sais plus. Mais je le fais.

Connectez-vous ou Inscrivez-vous pour répondre.