Full page Javascript confetti not working












1















I want to create a webpage with a full page confetti effect.
I have tried to make it full page but if I put text on the page the confetti effect will move to the bottom.
I have tried to change this in HTML/CSS but so far I couldn't get it fixed.
Would someone be able to help me with this?
Thanks in advance?






var maxParticleCount = 70; //set max confetti count
var particleSpeed = 1; //set the particle animation speed
var startConfetti; //call to start confetti animation
var stopConfetti; //call to stop adding confetti
var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
var removeConfetti; //call to stop the confetti animation and remove all confetti immediately

(function() {
startConfetti = startConfettiInner;
stopConfetti = stopConfettiInner;
toggleConfetti = toggleConfettiInner;
removeConfetti = removeConfettiInner;
var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
var streamingConfetti = false;
var animationTimer = null;
var particles = ;
var waveAngle = 0;

function resetParticle(particle, width, height) {
particle.color = colors[(Math.random() * colors.length) | 0];
particle.x = Math.random() * width;
particle.y = Math.random() * height - height;
particle.diameter = Math.random() * 10 + 5;
particle.tilt = Math.random() * 10 - 10;
particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
particle.tiltAngle = 0;
return particle;
}

function startConfettiInner() {
var width = window.innerWidth;
var height = window.innerHeight;
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 16.6666667);
};
})();
var canvas = document.getElementById("confetti-canvas");
if (canvas === null) {
canvas = document.createElement("canvas");
canvas.setAttribute("id", "confetti-canvas");
canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}, true);
}
var context = canvas.getContext("2d");
while (particles.length < maxParticleCount)
particles.push(resetParticle({}, width, height));
streamingConfetti = true;
if (animationTimer === null) {
(function runAnimation() {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
if (particles.length === 0)
animationTimer = null;
else {
updateParticles();
drawParticles(context);
animationTimer = requestAnimFrame(runAnimation);
}
})();
}
}

function stopConfettiInner() {
streamingConfetti = false;
}

function removeConfettiInner() {
stopConfetti();
particles = ;
}

function toggleConfettiInner() {
if (streamingConfetti)
stopConfettiInner();
else
startConfettiInner();
}

function drawParticles(context) {
var particle;
var x;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
context.beginPath();
context.lineWidth = particle.diameter;
context.strokeStyle = particle.color;
x = particle.x + particle.tilt;
context.moveTo(x + particle.diameter / 2, particle.y);
context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
context.stroke();
}
}

function updateParticles() {
var width = window.innerWidth;
var height = window.innerHeight;
var particle;
waveAngle += 0.01;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
if (!streamingConfetti && particle.y < -15)
particle.y = height + 100;
else {
particle.tiltAngle += particle.tiltAngleIncrement;
particle.x += Math.sin(waveAngle);
particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
particle.tilt = Math.sin(particle.tiltAngle) * 15;
}
if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
if (streamingConfetti && particles.length <= maxParticleCount)
resetParticle(particle, width, height);
else {
particles.splice(i, 1);
i--;
}
}
}
}
})();

 body, html {
height: 100%;
}
body {
height: 100%;
background-color:#ff5abd;
background-image: url("../img/bg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
font-family: Roboto;
overflow: hidden;

}

<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="description" content="">
<meta name="author" content="">

<title></title>


<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style-1.css" />

</head>


<body onload="startConfetti()">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>

</div>

<script src="js/confetti.js"></script>

</body>
</html>












share|improve this question





























    1















    I want to create a webpage with a full page confetti effect.
    I have tried to make it full page but if I put text on the page the confetti effect will move to the bottom.
    I have tried to change this in HTML/CSS but so far I couldn't get it fixed.
    Would someone be able to help me with this?
    Thanks in advance?






    var maxParticleCount = 70; //set max confetti count
    var particleSpeed = 1; //set the particle animation speed
    var startConfetti; //call to start confetti animation
    var stopConfetti; //call to stop adding confetti
    var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
    var removeConfetti; //call to stop the confetti animation and remove all confetti immediately

    (function() {
    startConfetti = startConfettiInner;
    stopConfetti = stopConfettiInner;
    toggleConfetti = toggleConfettiInner;
    removeConfetti = removeConfettiInner;
    var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
    var streamingConfetti = false;
    var animationTimer = null;
    var particles = ;
    var waveAngle = 0;

    function resetParticle(particle, width, height) {
    particle.color = colors[(Math.random() * colors.length) | 0];
    particle.x = Math.random() * width;
    particle.y = Math.random() * height - height;
    particle.diameter = Math.random() * 10 + 5;
    particle.tilt = Math.random() * 10 - 10;
    particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
    particle.tiltAngle = 0;
    return particle;
    }

    function startConfettiInner() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
    return window.setTimeout(callback, 16.6666667);
    };
    })();
    var canvas = document.getElementById("confetti-canvas");
    if (canvas === null) {
    canvas = document.createElement("canvas");
    canvas.setAttribute("id", "confetti-canvas");
    canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
    document.body.appendChild(canvas);
    canvas.width = width;
    canvas.height = height;
    window.addEventListener("resize", function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    }, true);
    }
    var context = canvas.getContext("2d");
    while (particles.length < maxParticleCount)
    particles.push(resetParticle({}, width, height));
    streamingConfetti = true;
    if (animationTimer === null) {
    (function runAnimation() {
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
    if (particles.length === 0)
    animationTimer = null;
    else {
    updateParticles();
    drawParticles(context);
    animationTimer = requestAnimFrame(runAnimation);
    }
    })();
    }
    }

    function stopConfettiInner() {
    streamingConfetti = false;
    }

    function removeConfettiInner() {
    stopConfetti();
    particles = ;
    }

    function toggleConfettiInner() {
    if (streamingConfetti)
    stopConfettiInner();
    else
    startConfettiInner();
    }

    function drawParticles(context) {
    var particle;
    var x;
    for (var i = 0; i < particles.length; i++) {
    particle = particles[i];
    context.beginPath();
    context.lineWidth = particle.diameter;
    context.strokeStyle = particle.color;
    x = particle.x + particle.tilt;
    context.moveTo(x + particle.diameter / 2, particle.y);
    context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
    context.stroke();
    }
    }

    function updateParticles() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    var particle;
    waveAngle += 0.01;
    for (var i = 0; i < particles.length; i++) {
    particle = particles[i];
    if (!streamingConfetti && particle.y < -15)
    particle.y = height + 100;
    else {
    particle.tiltAngle += particle.tiltAngleIncrement;
    particle.x += Math.sin(waveAngle);
    particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
    particle.tilt = Math.sin(particle.tiltAngle) * 15;
    }
    if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
    if (streamingConfetti && particles.length <= maxParticleCount)
    resetParticle(particle, width, height);
    else {
    particles.splice(i, 1);
    i--;
    }
    }
    }
    }
    })();

     body, html {
    height: 100%;
    }
    body {
    height: 100%;
    background-color:#ff5abd;
    background-image: url("../img/bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    font-family: Roboto;
    overflow: hidden;

    }

    <html>
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>


    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style-1.css" />

    </head>


    <body onload="startConfetti()">
    <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>

    </div>

    <script src="js/confetti.js"></script>

    </body>
    </html>












    share|improve this question



























      1












      1








      1








      I want to create a webpage with a full page confetti effect.
      I have tried to make it full page but if I put text on the page the confetti effect will move to the bottom.
      I have tried to change this in HTML/CSS but so far I couldn't get it fixed.
      Would someone be able to help me with this?
      Thanks in advance?






      var maxParticleCount = 70; //set max confetti count
      var particleSpeed = 1; //set the particle animation speed
      var startConfetti; //call to start confetti animation
      var stopConfetti; //call to stop adding confetti
      var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
      var removeConfetti; //call to stop the confetti animation and remove all confetti immediately

      (function() {
      startConfetti = startConfettiInner;
      stopConfetti = stopConfettiInner;
      toggleConfetti = toggleConfettiInner;
      removeConfetti = removeConfettiInner;
      var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
      var streamingConfetti = false;
      var animationTimer = null;
      var particles = ;
      var waveAngle = 0;

      function resetParticle(particle, width, height) {
      particle.color = colors[(Math.random() * colors.length) | 0];
      particle.x = Math.random() * width;
      particle.y = Math.random() * height - height;
      particle.diameter = Math.random() * 10 + 5;
      particle.tilt = Math.random() * 10 - 10;
      particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
      particle.tiltAngle = 0;
      return particle;
      }

      function startConfettiInner() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      window.requestAnimFrame = (function() {
      return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
      return window.setTimeout(callback, 16.6666667);
      };
      })();
      var canvas = document.getElementById("confetti-canvas");
      if (canvas === null) {
      canvas = document.createElement("canvas");
      canvas.setAttribute("id", "confetti-canvas");
      canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
      document.body.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
      window.addEventListener("resize", function() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      }, true);
      }
      var context = canvas.getContext("2d");
      while (particles.length < maxParticleCount)
      particles.push(resetParticle({}, width, height));
      streamingConfetti = true;
      if (animationTimer === null) {
      (function runAnimation() {
      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
      if (particles.length === 0)
      animationTimer = null;
      else {
      updateParticles();
      drawParticles(context);
      animationTimer = requestAnimFrame(runAnimation);
      }
      })();
      }
      }

      function stopConfettiInner() {
      streamingConfetti = false;
      }

      function removeConfettiInner() {
      stopConfetti();
      particles = ;
      }

      function toggleConfettiInner() {
      if (streamingConfetti)
      stopConfettiInner();
      else
      startConfettiInner();
      }

      function drawParticles(context) {
      var particle;
      var x;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      context.beginPath();
      context.lineWidth = particle.diameter;
      context.strokeStyle = particle.color;
      x = particle.x + particle.tilt;
      context.moveTo(x + particle.diameter / 2, particle.y);
      context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
      context.stroke();
      }
      }

      function updateParticles() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      var particle;
      waveAngle += 0.01;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      if (!streamingConfetti && particle.y < -15)
      particle.y = height + 100;
      else {
      particle.tiltAngle += particle.tiltAngleIncrement;
      particle.x += Math.sin(waveAngle);
      particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
      particle.tilt = Math.sin(particle.tiltAngle) * 15;
      }
      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
      if (streamingConfetti && particles.length <= maxParticleCount)
      resetParticle(particle, width, height);
      else {
      particles.splice(i, 1);
      i--;
      }
      }
      }
      }
      })();

       body, html {
      height: 100%;
      }
      body {
      height: 100%;
      background-color:#ff5abd;
      background-image: url("../img/bg.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      font-family: Roboto;
      overflow: hidden;

      }

      <html>
      <head>
      <meta charset="utf-8">
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="">
      <meta name="author" content="">

      <title></title>


      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/style-1.css" />

      </head>


      <body onload="startConfetti()">
      <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>

      </div>

      <script src="js/confetti.js"></script>

      </body>
      </html>












      share|improve this question
















      I want to create a webpage with a full page confetti effect.
      I have tried to make it full page but if I put text on the page the confetti effect will move to the bottom.
      I have tried to change this in HTML/CSS but so far I couldn't get it fixed.
      Would someone be able to help me with this?
      Thanks in advance?






      var maxParticleCount = 70; //set max confetti count
      var particleSpeed = 1; //set the particle animation speed
      var startConfetti; //call to start confetti animation
      var stopConfetti; //call to stop adding confetti
      var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
      var removeConfetti; //call to stop the confetti animation and remove all confetti immediately

      (function() {
      startConfetti = startConfettiInner;
      stopConfetti = stopConfettiInner;
      toggleConfetti = toggleConfettiInner;
      removeConfetti = removeConfettiInner;
      var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
      var streamingConfetti = false;
      var animationTimer = null;
      var particles = ;
      var waveAngle = 0;

      function resetParticle(particle, width, height) {
      particle.color = colors[(Math.random() * colors.length) | 0];
      particle.x = Math.random() * width;
      particle.y = Math.random() * height - height;
      particle.diameter = Math.random() * 10 + 5;
      particle.tilt = Math.random() * 10 - 10;
      particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
      particle.tiltAngle = 0;
      return particle;
      }

      function startConfettiInner() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      window.requestAnimFrame = (function() {
      return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
      return window.setTimeout(callback, 16.6666667);
      };
      })();
      var canvas = document.getElementById("confetti-canvas");
      if (canvas === null) {
      canvas = document.createElement("canvas");
      canvas.setAttribute("id", "confetti-canvas");
      canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
      document.body.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
      window.addEventListener("resize", function() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      }, true);
      }
      var context = canvas.getContext("2d");
      while (particles.length < maxParticleCount)
      particles.push(resetParticle({}, width, height));
      streamingConfetti = true;
      if (animationTimer === null) {
      (function runAnimation() {
      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
      if (particles.length === 0)
      animationTimer = null;
      else {
      updateParticles();
      drawParticles(context);
      animationTimer = requestAnimFrame(runAnimation);
      }
      })();
      }
      }

      function stopConfettiInner() {
      streamingConfetti = false;
      }

      function removeConfettiInner() {
      stopConfetti();
      particles = ;
      }

      function toggleConfettiInner() {
      if (streamingConfetti)
      stopConfettiInner();
      else
      startConfettiInner();
      }

      function drawParticles(context) {
      var particle;
      var x;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      context.beginPath();
      context.lineWidth = particle.diameter;
      context.strokeStyle = particle.color;
      x = particle.x + particle.tilt;
      context.moveTo(x + particle.diameter / 2, particle.y);
      context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
      context.stroke();
      }
      }

      function updateParticles() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      var particle;
      waveAngle += 0.01;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      if (!streamingConfetti && particle.y < -15)
      particle.y = height + 100;
      else {
      particle.tiltAngle += particle.tiltAngleIncrement;
      particle.x += Math.sin(waveAngle);
      particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
      particle.tilt = Math.sin(particle.tiltAngle) * 15;
      }
      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
      if (streamingConfetti && particles.length <= maxParticleCount)
      resetParticle(particle, width, height);
      else {
      particles.splice(i, 1);
      i--;
      }
      }
      }
      }
      })();

       body, html {
      height: 100%;
      }
      body {
      height: 100%;
      background-color:#ff5abd;
      background-image: url("../img/bg.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      font-family: Roboto;
      overflow: hidden;

      }

      <html>
      <head>
      <meta charset="utf-8">
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="">
      <meta name="author" content="">

      <title></title>


      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/style-1.css" />

      </head>


      <body onload="startConfetti()">
      <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>

      </div>

      <script src="js/confetti.js"></script>

      </body>
      </html>








      var maxParticleCount = 70; //set max confetti count
      var particleSpeed = 1; //set the particle animation speed
      var startConfetti; //call to start confetti animation
      var stopConfetti; //call to stop adding confetti
      var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
      var removeConfetti; //call to stop the confetti animation and remove all confetti immediately

      (function() {
      startConfetti = startConfettiInner;
      stopConfetti = stopConfettiInner;
      toggleConfetti = toggleConfettiInner;
      removeConfetti = removeConfettiInner;
      var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
      var streamingConfetti = false;
      var animationTimer = null;
      var particles = ;
      var waveAngle = 0;

      function resetParticle(particle, width, height) {
      particle.color = colors[(Math.random() * colors.length) | 0];
      particle.x = Math.random() * width;
      particle.y = Math.random() * height - height;
      particle.diameter = Math.random() * 10 + 5;
      particle.tilt = Math.random() * 10 - 10;
      particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
      particle.tiltAngle = 0;
      return particle;
      }

      function startConfettiInner() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      window.requestAnimFrame = (function() {
      return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
      return window.setTimeout(callback, 16.6666667);
      };
      })();
      var canvas = document.getElementById("confetti-canvas");
      if (canvas === null) {
      canvas = document.createElement("canvas");
      canvas.setAttribute("id", "confetti-canvas");
      canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
      document.body.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
      window.addEventListener("resize", function() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      }, true);
      }
      var context = canvas.getContext("2d");
      while (particles.length < maxParticleCount)
      particles.push(resetParticle({}, width, height));
      streamingConfetti = true;
      if (animationTimer === null) {
      (function runAnimation() {
      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
      if (particles.length === 0)
      animationTimer = null;
      else {
      updateParticles();
      drawParticles(context);
      animationTimer = requestAnimFrame(runAnimation);
      }
      })();
      }
      }

      function stopConfettiInner() {
      streamingConfetti = false;
      }

      function removeConfettiInner() {
      stopConfetti();
      particles = ;
      }

      function toggleConfettiInner() {
      if (streamingConfetti)
      stopConfettiInner();
      else
      startConfettiInner();
      }

      function drawParticles(context) {
      var particle;
      var x;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      context.beginPath();
      context.lineWidth = particle.diameter;
      context.strokeStyle = particle.color;
      x = particle.x + particle.tilt;
      context.moveTo(x + particle.diameter / 2, particle.y);
      context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
      context.stroke();
      }
      }

      function updateParticles() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      var particle;
      waveAngle += 0.01;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      if (!streamingConfetti && particle.y < -15)
      particle.y = height + 100;
      else {
      particle.tiltAngle += particle.tiltAngleIncrement;
      particle.x += Math.sin(waveAngle);
      particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
      particle.tilt = Math.sin(particle.tiltAngle) * 15;
      }
      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
      if (streamingConfetti && particles.length <= maxParticleCount)
      resetParticle(particle, width, height);
      else {
      particles.splice(i, 1);
      i--;
      }
      }
      }
      }
      })();

       body, html {
      height: 100%;
      }
      body {
      height: 100%;
      background-color:#ff5abd;
      background-image: url("../img/bg.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      font-family: Roboto;
      overflow: hidden;

      }

      <html>
      <head>
      <meta charset="utf-8">
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="">
      <meta name="author" content="">

      <title></title>


      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/style-1.css" />

      </head>


      <body onload="startConfetti()">
      <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>

      </div>

      <script src="js/confetti.js"></script>

      </body>
      </html>





      var maxParticleCount = 70; //set max confetti count
      var particleSpeed = 1; //set the particle animation speed
      var startConfetti; //call to start confetti animation
      var stopConfetti; //call to stop adding confetti
      var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
      var removeConfetti; //call to stop the confetti animation and remove all confetti immediately

      (function() {
      startConfetti = startConfettiInner;
      stopConfetti = stopConfettiInner;
      toggleConfetti = toggleConfettiInner;
      removeConfetti = removeConfettiInner;
      var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
      var streamingConfetti = false;
      var animationTimer = null;
      var particles = ;
      var waveAngle = 0;

      function resetParticle(particle, width, height) {
      particle.color = colors[(Math.random() * colors.length) | 0];
      particle.x = Math.random() * width;
      particle.y = Math.random() * height - height;
      particle.diameter = Math.random() * 10 + 5;
      particle.tilt = Math.random() * 10 - 10;
      particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
      particle.tiltAngle = 0;
      return particle;
      }

      function startConfettiInner() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      window.requestAnimFrame = (function() {
      return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
      return window.setTimeout(callback, 16.6666667);
      };
      })();
      var canvas = document.getElementById("confetti-canvas");
      if (canvas === null) {
      canvas = document.createElement("canvas");
      canvas.setAttribute("id", "confetti-canvas");
      canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
      document.body.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
      window.addEventListener("resize", function() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      }, true);
      }
      var context = canvas.getContext("2d");
      while (particles.length < maxParticleCount)
      particles.push(resetParticle({}, width, height));
      streamingConfetti = true;
      if (animationTimer === null) {
      (function runAnimation() {
      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
      if (particles.length === 0)
      animationTimer = null;
      else {
      updateParticles();
      drawParticles(context);
      animationTimer = requestAnimFrame(runAnimation);
      }
      })();
      }
      }

      function stopConfettiInner() {
      streamingConfetti = false;
      }

      function removeConfettiInner() {
      stopConfetti();
      particles = ;
      }

      function toggleConfettiInner() {
      if (streamingConfetti)
      stopConfettiInner();
      else
      startConfettiInner();
      }

      function drawParticles(context) {
      var particle;
      var x;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      context.beginPath();
      context.lineWidth = particle.diameter;
      context.strokeStyle = particle.color;
      x = particle.x + particle.tilt;
      context.moveTo(x + particle.diameter / 2, particle.y);
      context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
      context.stroke();
      }
      }

      function updateParticles() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      var particle;
      waveAngle += 0.01;
      for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      if (!streamingConfetti && particle.y < -15)
      particle.y = height + 100;
      else {
      particle.tiltAngle += particle.tiltAngleIncrement;
      particle.x += Math.sin(waveAngle);
      particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
      particle.tilt = Math.sin(particle.tiltAngle) * 15;
      }
      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
      if (streamingConfetti && particles.length <= maxParticleCount)
      resetParticle(particle, width, height);
      else {
      particles.splice(i, 1);
      i--;
      }
      }
      }
      }
      })();

       body, html {
      height: 100%;
      }
      body {
      height: 100%;
      background-color:#ff5abd;
      background-image: url("../img/bg.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      font-family: Roboto;
      overflow: hidden;

      }

      <html>
      <head>
      <meta charset="utf-8">
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="">
      <meta name="author" content="">

      <title></title>


      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/style-1.css" />

      </head>


      <body onload="startConfetti()">
      <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborump>

      </div>

      <script src="js/confetti.js"></script>

      </body>
      </html>






      javascript html css






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 24 '18 at 15:08









      Lucifer

      304211




      304211










      asked Nov 24 '18 at 14:05









      StefStef

      83




      83
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Hello Stef and welcome to the site. The JS script you provided will always "append" (read "add") the area where the confetti drops as the last part of your page. This area has an id of "confetti-canvas" which you can give styling to be adding a rule to the style section of your page:



          #confetti-canvas {
          position:absolute;
          top:0;
          }


          This will move the canvas to the top of your page, and it will ignore the regular page flow so it lies on top of your text.






          share|improve this answer
























          • Thanks a lot :)

            – Stef
            Nov 24 '18 at 15:08











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458965%2ffull-page-javascript-confetti-not-working%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          Hello Stef and welcome to the site. The JS script you provided will always "append" (read "add") the area where the confetti drops as the last part of your page. This area has an id of "confetti-canvas" which you can give styling to be adding a rule to the style section of your page:



          #confetti-canvas {
          position:absolute;
          top:0;
          }


          This will move the canvas to the top of your page, and it will ignore the regular page flow so it lies on top of your text.






          share|improve this answer
























          • Thanks a lot :)

            – Stef
            Nov 24 '18 at 15:08
















          0














          Hello Stef and welcome to the site. The JS script you provided will always "append" (read "add") the area where the confetti drops as the last part of your page. This area has an id of "confetti-canvas" which you can give styling to be adding a rule to the style section of your page:



          #confetti-canvas {
          position:absolute;
          top:0;
          }


          This will move the canvas to the top of your page, and it will ignore the regular page flow so it lies on top of your text.






          share|improve this answer
























          • Thanks a lot :)

            – Stef
            Nov 24 '18 at 15:08














          0












          0








          0







          Hello Stef and welcome to the site. The JS script you provided will always "append" (read "add") the area where the confetti drops as the last part of your page. This area has an id of "confetti-canvas" which you can give styling to be adding a rule to the style section of your page:



          #confetti-canvas {
          position:absolute;
          top:0;
          }


          This will move the canvas to the top of your page, and it will ignore the regular page flow so it lies on top of your text.






          share|improve this answer













          Hello Stef and welcome to the site. The JS script you provided will always "append" (read "add") the area where the confetti drops as the last part of your page. This area has an id of "confetti-canvas" which you can give styling to be adding a rule to the style section of your page:



          #confetti-canvas {
          position:absolute;
          top:0;
          }


          This will move the canvas to the top of your page, and it will ignore the regular page flow so it lies on top of your text.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 24 '18 at 14:25









          yinkenyinken

          25328




          25328













          • Thanks a lot :)

            – Stef
            Nov 24 '18 at 15:08



















          • Thanks a lot :)

            – Stef
            Nov 24 '18 at 15:08

















          Thanks a lot :)

          – Stef
          Nov 24 '18 at 15:08





          Thanks a lot :)

          – Stef
          Nov 24 '18 at 15:08




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458965%2ffull-page-javascript-confetti-not-working%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Create new schema in PostgreSQL using DBeaver

          Deepest pit of an array with Javascript: test on Codility

          Costa Masnaga