PhiLosAdmin-Dunedain
- Messages : 26
Silmarils : 58 
Surprise Iframe
Ven 10 Nov - 20:46
Surprise Iframe
Essayez en iframe
Création d'une page html en mode avancé
Mettez tout ce code en faisant vos réglages dans la partie script.
puis validez
Récupérez l'adresse de la page
Mettez la en iframe
Pour finir CSS
Cdt.[/quote]
Essayez en iframe
Création d'une page html en mode avancé
Mettez tout ce code en faisant vos réglages dans la partie script.
puis validez
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>PARTICULES EFFECT Original script by Rachel Schmidt </title>
<style type="text/css">
body {
background-color: transparent;
}
canvas {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 300px;
transform: rotate(-10deg);
z-index: 990;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
(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 * 30, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgba(43,222,242," + _this.alpha + ")";
ctx.fill();
};
}
})();
});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</div>
</body>
</html>
Récupérez l'adresse de la page
Mettez la en iframe
- Code:
<iframe src="Adresse de votre page" id="myframe"></iframe>
Pour finir CSS
- Code:
#myframe {
position: absolute;
top: 0px;
left: 0px;
height: 350px;
width: 800px;
border: 0px;
z-index: 999;
}
Cdt.[/quote]
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|