PhiLosAdmin-Dunedain
- Messages : 26
Silmarils : 58 
Surprises oh yeah
Jeu 9 Nov - 23:02
Adam_sfp a écrit:
HTML
A placer dans votre template overall_header juste après
Mettez
- Code:
<body id="modernbb">
- 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:
Pour avoir moins de particules changez la valeur 1000 par une valeur supérieure.
- Code:
_this.pos.y = height + Math.random() * 1000;
Pour la taille changez la valeur 20
- Code:
ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 20, 0, 2 * Math.PI, false);
Pour la couleur changez les valeurs rgba
- Code:
ctx.fillStyle = "rgba(43,222,242," + _this.alpha + ")";
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|