avatar
Admin-Dunedain
Admin-Dunedain
Messages : 25
Silmarils : 55
Voir le profil de l'utilisateurhttp://onimatricorn.kanak.fr

Surprises oh yeah

le Jeu 9 Nov - 23:02
Adam_sfp a écrit:

HTML
A placer dans votre template overall_header  juste après
Code:
<body id="modernbb">
Mettez
Code:
 <canvas id="canvas"></canvas>

Enregistrez et publiez


CSS
Code:
/* START CANVAS HEADER */
/*  CHANGER LES VALEURS TOP ET LEFT POUR POSITIONNER LE CANVAS VOUS POUVEZ AUSSI CHANGER LA TAILLE WIDTH ET HEIGHT ET LA VALEUR ROTATE POUR L INCLINAISON  */

canvas {
    position: absolute;
    top: 0px;
    left: 100px;
    width: 440px;
    height: 360px;
    transform: rotate(-10deg);
    z-index: 999;
}
/* END CANVAS HEADER */

Et pour finir le script A placer dans gestion des codes javascript sur toutes les pages.
Code:
$(document).ready(function() {
  
 // Original script by Rachel Schmidt
  
            (function() {
                var width, height, canvas, ctx, circles, target, animateHeader = true;
                initHeader();
                addListeners();
                function initHeader() {
                    width = window.innerWidth;
                    height = window.innerHeight;
                    target = {
                        x: 0,
                        y: height
                    };
                  
                    canvas = document.getElementById("canvas");
                    canvas.width = width;
                    canvas.height = height;
                    ctx = canvas.getContext("2d");
                    circles = [];
                    for (var x = 0; x < width * 0.5; x++) {
                        var c = new Circle;
                        circles.push(c);
                    }
                    animate();
                }

                function addListeners() {
                    window.addEventListener("scroll", scrollCheck);
                    window.addEventListener("resize", resize);
                }

                function scrollCheck() {
                    if (document.body.scrollTop > height) {
                        animateHeader = false;
                    } else {
                        animateHeader = true;
                    }
                }

                function resize() {
                    width = window.innerWidth;
                    height = window.innerHeight;
                
                    canvas.width = width;
                    canvas.height = height;
                }

                function animate() {
                    if (animateHeader) {
                        ctx.clearRect(0, 0, width, height);
                        for (var i in circles) {
                            circles[i].draw();
                        }
                    }
                    requestAnimationFrame(animate);
                }

                function Circle() {
                    var _this = this;
                    (function() {
                        _this.pos = {};
                        init();
                        console.log(_this);
                    })();

                    function init() {
                        _this.pos.x = Math.random() * width;
                        _this.pos.y = height + Math.random() * 1000;
                        _this.alpha = 0.1 + Math.random() * 0.3;
                        _this.scale = 0.1 + Math.random() * 0.3;
                        _this.velocity = Math.random();
                    }
                    this.draw = function() {
                        if (_this.alpha <= 0) {
                            init();
                        }
                        _this.pos.y -= _this.velocity;
                        _this.alpha -= 0.0005;
                        ctx.beginPath();
                        ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 20, 0, 2 * Math.PI, false);
                        ctx.fillStyle = "rgba(43,222,242," + _this.alpha + ")";
                        ctx.fill();
                    };
                }
            })();
        });

Les modifications que vous pouvez faire dans le script:
Code:
_this.pos.y = height + Math.random() * 1000;
Pour avoir moins de particules changez la valeur 1000 par une valeur supérieure.

Code:
ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 20, 0, 2 * Math.PI, false);
Pour la taille changez la valeur 20

Code:
 ctx.fillStyle = "rgba(43,222,242," + _this.alpha + ")";
Pour la couleur changez les valeurs rgba

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