Comment avoir ce background animé en css et javascript ?

santinisantini Member
mai 2019 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 PluXml Project Manager
    mai 2019 modifié

    Bonjour,

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

    Site : p3ter.fr - Twitter : @P3terFr

  • santinisantini Member
    mai 2019 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 Member
    mai 2019 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
    mai 2019 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;
      }
    ?>
    


    FR/EN 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. En ce moment j'ai des problèmes d'accès à internet je peux mettre du temps à répondre.

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