☰

» »

Konfeti demo

Konfeti demo

filip007 ::

Pozdrav, pri neki spam strani sem si sposodil konfete, pa ne znam spraviti v delujoče stanje, skripta je nespremenjena...

<!doctype html>
<html>
  <head>
    <title>Confetti demo</title>
  </head>
  
 <body onload="render()">

 Confetti demo
 
 <canvas id="canvas"></canvas>
  
 <script>
  
  // globals
    var canvas;
    var ctx;
    var W;
    var H;
    var mp = 75; //max particles
    var particles = [];
    var angle = 0;
    var tiltAngle = 0;
    var confettiActive = true;
    var animationComplete = true;
    var deactivationTimerHandler;
    var reactivationTimerHandler;
    var animationHandler;
		
    // colors
	var calypso = "#00a4bd";
    var sorbet = "#ff8f59";
    var lorax = "#ff7a59";
    var marigold = "#f5c26b";
    var candy_apple = "#f2545b";
    var norman = "#f2547d";
    var thunderdome = "#6a78d1";
    var oz = "00bda5";
    
    
    // objects


    var particleColors = {
        colorOptions: [
          calypso, 
          sorbet, 
          lorax, 
          marigold, 
          candy_apple, 
          norman, 
          thunderdome, 
          oz
        ],
        colorIndex: 0,
        colorIncrementer: 0,
        colorThreshold: 10,
        getColor: function () {
            if (this.colorIncrementer >= 10) {
                this.colorIncrementer = 0;
                this.colorIndex++;
                if (this.colorIndex >= this.colorOptions.length) {
                    this.colorIndex = 0;
                }
            }
            this.colorIncrementer++;
            return this.colorOptions[this.colorIndex];
        }
    }

    function confettiParticle(color) {
        this.x = Math.random() * W; // x-coordinate
        this.y = (Math.random() * H) - H; //y-coordinate
        this.r = RandomFromTo(10, 30); //radius;
        this.d = (Math.random() * mp) + 10; //density;
        this.color = color;
        this.tilt = Math.floor(Math.random() * 10) - 10;
        this.tiltAngleIncremental = (Math.random() * 0.07) + .05;
        this.tiltAngle = 0;

        this.draw = function () {
            ctx.beginPath();
            ctx.lineWidth = this.r / 2;
            ctx.strokeStyle = this.color;
            ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);
            ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));
            return ctx.stroke();
        }
    }

    $(document).ready(function () {
        SetGlobals();
        InitializeButton();
        //InitializeConfetti();

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

    });

    function InitializeButton() {
        function handler1() {
				  RestartConfetti();
          $(this).text('Cops are here!');
      		$(this).one("click", handler2);
  			}

        function handler2() {
           DeactivateConfetti();
          $(this).text('Celebrate!');   
          $(this).one("click", handler1);
        }
        $("button.control").one("click", handler1);
     };

    function SetGlobals() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        W = window.innerWidth;
        H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
    }

    function InitializeConfetti() {
        particles = [];
        animationComplete = false;
        for (var i = 0; i < mp; i++) {
            var particleColor = particleColors.getColor();
            particles.push(new confettiParticle(particleColor));
        }
        StartConfetti();
    }

    function Draw() {
        ctx.clearRect(0, 0, W, H);
        var results = [];
        for (var i = 0; i < mp; i++) {
            (function (j) {
                results.push(particles[j].draw());
            })(i);
        }
        Update();

        return results;
    }

    function RandomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }


    function Update() {
        var remainingFlakes = 0;
        var particle;
        angle += 0.01;
        tiltAngle += 0.1;

        for (var i = 0; i < mp; i++) {
            particle = particles[i];
            if (animationComplete) return;

            if (!confettiActive && particle.y < -15) {
                particle.y = H + 100;
                continue;
            }

            stepParticle(particle, i);

            if (particle.y <= H) {
                remainingFlakes++;
            }
            CheckForReposition(particle, i);
        }

        if (remainingFlakes === 0) {
            StopConfetti();
        }
    }

    function CheckForReposition(particle, index) {
        if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {
            if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes
            {
                repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 10);
            } else {
                if (Math.sin(angle) > 0) {
                    //Enter from the left
                    repositionParticle(particle, -5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
                } else {
                    //Enter from the right
                    repositionParticle(particle, W + 5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
                }
            }
        }
    }
    function stepParticle(particle, particleIndex) {
        particle.tiltAngle += particle.tiltAngleIncremental;
        particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 2;
        particle.x += Math.sin(angle);
        particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;
    }

    function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
        particle.x = xCoordinate;
        particle.y = yCoordinate;
        particle.tilt = tilt;
    }

    function StartConfetti() {
        W = window.innerWidth;
        H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
        (function animloop() {
            if (animationComplete) return null;
            animationHandler = requestAnimFrame(animloop);
            return Draw();
        })();
    }

    function ClearTimers() {
        clearTimeout(reactivationTimerHandler);
        clearTimeout(animationHandler);
    }

    function DeactivateConfetti() {
        confettiActive = false;
        ClearTimers();
    }

    function StopConfetti() {
        animationComplete = true;
        if (ctx == undefined) return;
        ctx.clearRect(0, 0, W, H);
    }

    function RestartConfetti() {
        ClearTimers();
        StopConfetti();
        reactivationTimerHandler = setTimeout(function () {
            confettiActive = true;
            animationComplete = false;
            InitializeConfetti();
        }, 100);

    }

    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            return window.setTimeout(callback, 1000 / 60);
        };
    })();
  
  </script>
 
  </body>
</html>
Palačinka z Ajvarjem in stopljenim sirom v mikrovalovki.

Ales ::

Takele klobase kode se ne daje kar direkt na forum, ni čitljivo...

Za prihodnje JavaScript čarovnije si poglej recimo codepen.io/pen ali jsfiddle.net ali kaj podobnega...

filip007 ::

Tukaj je za testiranje:

https://jsfiddle.net/75yzedru/
Palačinka z Ajvarjem in stopljenim sirom v mikrovalovki.

Greg91 ::

Izvoli: https://jsfiddle.net/2ju50gcv/

Potrebno je bilo dodati jquery knjižnico ter namesto funkcije render() v body onload poklicati funkcijo RestartConfetti().

filip007 ::

Hvala...
Kako pa dodam jquery knjižnico, mislim sem dal zraven, pa ni nič?
Palačinka z Ajvarjem in stopljenim sirom v mikrovalovki.

Zgodovina sprememb…

  • spremenil: filip007 ()

HotBurek :: 

<!doctype html>
<html>
  <head>
    <title>Confetti demo</title>
    <script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
  </head>
  
 <body onload="RestartConfetti();">

 Confetti demo
 
 <canvas id="canvas"></canvas>
  
 <script>
  
  // globals
    var canvas;
    var ctx;
    var W;
    var H;
    var mp = 75; //max particles
    var particles = [];
    var angle = 0;
    var tiltAngle = 0;
    var confettiActive = true;
    var animationComplete = true;
    var deactivationTimerHandler;
    var reactivationTimerHandler;
    var animationHandler;
		
    // colors
	var calypso = "#00a4bd";
    var sorbet = "#ff8f59";
    var lorax = "#ff7a59";
    var marigold = "#f5c26b";
    var candy_apple = "#f2545b";
    var norman = "#f2547d";
    var thunderdome = "#6a78d1";
    var oz = "00bda5";
    
    
    // objects


    var particleColors = {
        colorOptions: [
          calypso, 
          sorbet, 
          lorax, 
          marigold, 
          candy_apple, 
          norman, 
          thunderdome, 
          oz
        ],
        colorIndex: 0,
        colorIncrementer: 0,
        colorThreshold: 10,
        getColor: function () {
            if (this.colorIncrementer >= 10) {
                this.colorIncrementer = 0;
                this.colorIndex++;
                if (this.colorIndex >= this.colorOptions.length) {
                    this.colorIndex = 0;
                }
            }
            this.colorIncrementer++;
            return this.colorOptions[this.colorIndex];
        }
    }

    function confettiParticle(color) {
        this.x = Math.random() * W; // x-coordinate
        this.y = (Math.random() * H) - H; //y-coordinate
        this.r = RandomFromTo(10, 30); //radius;
        this.d = (Math.random() * mp) + 10; //density;
        this.color = color;
        this.tilt = Math.floor(Math.random() * 10) - 10;
        this.tiltAngleIncremental = (Math.random() * 0.07) + .05;
        this.tiltAngle = 0;

        this.draw = function () {
            ctx.beginPath();
            ctx.lineWidth = this.r / 2;
            ctx.strokeStyle = this.color;
            ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);
            ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));
            return ctx.stroke();
        }
    }

    $(document).ready(function () {
        SetGlobals();
        InitializeButton();
        //InitializeConfetti();

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

    });

    function InitializeButton() {
        function handler1() {
				  RestartConfetti();
          $(this).text('Cops are here!');
      		$(this).one("click", handler2);
  			}

        function handler2() {
           DeactivateConfetti();
          $(this).text('Celebrate!');   
          $(this).one("click", handler1);
        }
        $("button.control").one("click", handler1);
     };

    function SetGlobals() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        W = window.innerWidth;
        H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
    }

    function InitializeConfetti() {
        particles = [];
        animationComplete = false;
        for (var i = 0; i < mp; i++) {
            var particleColor = particleColors.getColor();
            particles.push(new confettiParticle(particleColor));
        }
        StartConfetti();
    }

    function Draw() {
        ctx.clearRect(0, 0, W, H);
        var results = [];
        for (var i = 0; i < mp; i++) {
            (function (j) {
                results.push(particles[j].draw());
            })(i);
        }
        Update();

        return results;
    }

    function RandomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }


    function Update() {
        var remainingFlakes = 0;
        var particle;
        angle += 0.01;
        tiltAngle += 0.1;

        for (var i = 0; i < mp; i++) {
            particle = particles[i];
            if (animationComplete) return;

            if (!confettiActive && particle.y < -15) {
                particle.y = H + 100;
                continue;
            }

            stepParticle(particle, i);

            if (particle.y <= H) {
                remainingFlakes++;
            }
            CheckForReposition(particle, i);
        }

        if (remainingFlakes === 0) {
            StopConfetti();
        }
    }

    function CheckForReposition(particle, index) {
        if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {
            if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes
            {
                repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 10);
            } else {
                if (Math.sin(angle) > 0) {
                    //Enter from the left
                    repositionParticle(particle, -5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
                } else {
                    //Enter from the right
                    repositionParticle(particle, W + 5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
                }
            }
        }
    }
    function stepParticle(particle, particleIndex) {
        particle.tiltAngle += particle.tiltAngleIncremental;
        particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 2;
        particle.x += Math.sin(angle);
        particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;
    }

    function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
        particle.x = xCoordinate;
        particle.y = yCoordinate;
        particle.tilt = tilt;
    }

    function StartConfetti() {
        W = window.innerWidth;
        H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
        (function animloop() {
            if (animationComplete) return null;
            animationHandler = requestAnimFrame(animloop);
            return Draw();
        })();
    }

    function ClearTimers() {
        clearTimeout(reactivationTimerHandler);
        clearTimeout(animationHandler);
    }

    function DeactivateConfetti() {
        confettiActive = false;
        ClearTimers();
    }

    function StopConfetti() {
        animationComplete = true;
        if (ctx == undefined) return;
        ctx.clearRect(0, 0, W, H);
    }

    function RestartConfetti() {
        ClearTimers();
        StopConfetti();
        reactivationTimerHandler = setTimeout(function () {
            confettiActive = true;
            animationComplete = false;
            InitializeConfetti();
        }, 100);

    }

    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            return window.setTimeout(callback, 1000 / 60);
        };
    })();
  
  </script>
 
  </body>
</html>
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

filip007 ::

Ja sem opazil, hvala, to je mislim zraven izvorne kode, ko sem dol prvotno posnel konfete in spregledal. Bom probal še tisto...

Treba bo še določiti velikost okna ali omejiti raztezanje, to imam že v mojem prvotnem demu, Lots of Text.

Moj amaterski demo bo tukaj, če bom uspel zmontirati še konfete noter.
https://ipristy.vivaldi.net/2020/05/21/...
Palačinka z Ajvarjem in stopljenim sirom v mikrovalovki.

HotBurek ::

V lotsoftext.html se pojavi error (vrstice 36):

var div = document.getElementById("hit");
var ctx = div.getContext("2d");


ker se funkcija render(); izvede na "body onload", in to je prede je canvas z IDjem "hit" zrendiran.

https://stackoverflow.com/questions/739...

Ena od rešitev je, da tisti del JS kode, ki jo imaš med title in style prestaviš nižje dol, malenkost nad zaprtim /body.
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

Zgodovina sprememb…

  • spremenilo: HotBurek ()

filip007 ::

Bom poskusil. Tisto je 3D merilec se mi zdi, mora biti na vrhu.

Zdaj sem vse združil, samo konfeti ne padajo čez celo vsebino ampak samo med glavo in okvirjem s tekstom.

Sem naložil vse skupaj na jsfiddle, samo pozor stran zelo počasi deluje.

https://jsfiddle.net/d37kav4q/
Palačinka z Ajvarjem in stopljenim sirom v mikrovalovki.

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

[Java - DN] Naključna števila

Oddelek: Šola		121279 (808) nyler
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč		8710506 (9244) lisjak
»

PHP in JS problem :(

Oddelek: Programiranje		81631 (1439) l0g1t3ch
»

Google odšteva

Oddelek: Novice / Omrežja / internet		295509 (3899) MrStein
»

JavaScript naloge za faks (ustni izpit)

Oddelek: Šola		182251 (1791) Lumix

Več podobnih tem