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

Surprise Iframe

le 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


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>
puis mettez le code au même endroit que précédemment dans le template.

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