Add Confetti to a page

Site URL: https://www.lukaseriksen.com/

So I really want to add a confetti animation to when someone purchases a product on my site. I have scoured the interwebs and have found some code which may let me do this, but I have no idea how i can integrate it into squarespace (https://codemyui.com/falling-confetti/) could anyone help me out with this? I would be super dooper thankful!

Thanks in advance!

Lukas

Can you describe in detail?

Doesn't matter I've figured it out already! I would however now know how i can have the script fade out over a 5 second period. What kind of code should I inject here?

The link is https://www.lukaseriksen.com/order-confirmed

@tuanphan could you help me out with this?

Which script?

On 8/9/2020 at 5:22 AM, LukasEriksen said:

Doesn't matter I've figured it out already! I would however now know how i can have the script fade out over a 5 second period. What kind of code should I inject here?

 

Hey Lukas – I'm looking to do the same! Would you mind sharing how you did it? 🙏 Thanks!

@des add a code block to the desired page, and make sure to set it as HTML so it renders. Then paste the following code:

<script src="https://www.wpromotions.eu/confetti.min.js"></script><script>confetti.start()</script>
 

@tuanphan this code: <script src="https://www.wpromotions.eu/confetti.min.js"></script><script>confetti.start()</script>

Not sure why but the announcement bar appears twice (stacked on top of one another) after I added the confetti code to the order confirmation code block. Can anyone help?

I'm so confused.

On 10/28/2021 at 1:02 AM, SSong said:

Not sure why but the announcement bar appears twice (stacked on top of one another) after I added the confetti code to the order confirmation code block. Can anyone help?

Can you share link to your site? We can check easier

On 10/30/2021 at 9:27 PM, tuanphan said:

Can you share link to your site? We can check easier

This is the link, not sure how you can get to the order confirmation page without placing an order though...

Are you able to target the confetti to a certain section?  @tuanphan

On 8/22/2023 at 1:50 AM, gretchenf said:

Are you able to target the confetti to a certain section?  @tuanphan

Not sure. You mean section in 7.1 or 7.0 version?

On 8/24/2023 at 12:34 AM, tuanphan said:

Not sure. You mean section in 7.1 or 7.0 version?

7.1!

On 8/25/2023 at 9:59 PM, gretchenf said:

7.1!

You can use this code to Code Injection > Footer

<script>
'use strict';

window.onload = function() {
  // Globals
  var random = Math.random,
    cos = Math.cos,
    sin = Math.sin,
    PI = Math.PI,
    PI2 = PI * 2,
    timer = undefined,
    frame = undefined,
    confetti = [];

  var particles = 10,
    spread = 40,
    sizeMin = 3,
    sizeMax = 12 - sizeMin,
    eccentricity = 10,
    deviation = 100,
    dxThetaMin = -.1,
    dxThetaMax = -dxThetaMin - dxThetaMin,
    dyMin = .13,
    dyMax = .18,
    dThetaMin = .4,
    dThetaMax = .7 - dThetaMin;

  var colorThemes = [
    function() {
      return color(200 * random()|0, 200 * random()|0, 200 * random()|0);
    },
    function() {
      var black = 200 * random()|0; return color(200, black, black);
    },
    function() {
      var black = 200 * random()|0; return color(black, 200, black);
    },
    function() {
      var black = 200 * random()|0; return color(black, black, 200);
    },
    function() {
      return color(200, 100, 200 * random()|0);
    },
    function() {
      return color(200 * random()|0, 200, 200);
    },
    function() {
      var black = 256 * random()|0; return color(black, black, black);
    },
    function() {
      return colorThemes[random() < .5 ? 1 : 2]();
    },
    function() {
      return colorThemes[random() < .5 ? 3 : 5]();
    },
    function() {
      return colorThemes[random() < .5 ? 2 : 4]();
    }
  ];

  function color(r, g, b) {
    return 'rgb(' + r + ',' + g + ',' + b + ')';
  }

  // Cosine interpolation
  function interpolation(a, b, t) {
    return (1-cos(PI*t))/2 * (b-a) + a;
  }

  // Create a 1D Maximal Poisson Disc over [0, 1]
  var radius = 1/eccentricity,
    radius2 = radius+radius;

  function createPoisson() {
    var domain = [radius, 1-radius],
      measure = 1-radius2,
      spline = [0, 1];
    while (measure) {
      var dart = measure * random(),
        i, l, interval, a, b, c, d;

      for (i = 0, l = domain.length, measure = 0; i < l; i += 2) {
        a = domain[i],
          b = domain[i+1],
          interval = b-a;
        if (dart < measure+interval) {
          spline.push(dart += a-measure);
          break;
        }
        measure += interval;
      }
      c = dart-radius,
        d = dart+radius;

      for (i = domain.length-1; i > 0; i -= 2) {
        l = i-1,
          a = domain[l],
          b = domain[i];
        if (a >= c && a < d)
          if (b > d) domain[l] = d;
          else domain.splice(l, 2);
        else if (a < c && b > c)
          if (b <= d) domain[i] = c;
          else domain.splice(i, 0, c, d);
      }

      for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
        measure += domain[i+1]-domain[i];
    }

    return spline.sort();
  }

  // Confetto constructor
  function Confetto(theme) {
    this.frame = 0;
    this.outer = document.createElement('div');
    this.inner = document.createElement('div');
    this.outer.appendChild(this.inner);

    var outerStyle = this.outer.style,
      innerStyle = this.inner.style;
    outerStyle.position = 'absolute';
    outerStyle.width = (sizeMin + sizeMax * random()) + 'px';
    outerStyle.height = (sizeMin + sizeMax * random()) + 'px';
    innerStyle.width = '100%';
    innerStyle.height = '100%';
    innerStyle.backgroundColor = theme();

    outerStyle.perspective = '50px';
    outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)';
  this.axis = 'rotate3D(' +
  cos(360 * random()) + ',' +
  cos(360 * random()) + ',0,';
this.theta = 360 * random();
this.dTheta = dThetaMin + dThetaMax * random();
innerStyle.transform = this.axis + this.theta + 'deg)';

var aboutUsRect = document.querySelector('section[data-section-id="675918dd2f453e28e490b808"]').getBoundingClientRect();
this.x = aboutUsRect.left + aboutUsRect.width * random();
this.y = aboutUsRect.top - deviation;
this.dx = sin(dxThetaMin + dxThetaMax * random());
this.dy = dyMin + dyMax * random();
outerStyle.left = this.x + 'px';
outerStyle.top = this.y + 'px';

// Create the periodic spline
this.splineX = createPoisson();
this.splineY = [];
for (var i = 1, l = this.splineX.length-1; i < l; ++i)
  this.splineY[i] = deviation * random();
this.splineY[0] = this.splineY[l] = deviation * random();

this.update = function(height, delta) {
  this.frame += delta;
  this.x += this.dx * delta;
  this.y += this.dy * delta;
  this.theta += this.dTheta * delta;

  // Compute spline and convert to polar
  var phi = this.frame % 7777 / 7777,
    i = 0,
    j = 1;
  while (phi >= this.splineX[j]) i = j++;
  var rho = interpolation(
    this.splineY[i],
    this.splineY[j],
    (phi-this.splineX[i]) / (this.splineX[j]-this.splineX[i])
  );
  phi *= PI2;

  outerStyle.left = this.x + rho * cos(phi) + 'px';
  outerStyle.top = this.y + rho * sin(phi) + 'px';
  innerStyle.transform = this.axis + this.theta + 'deg)';
  return this.y > aboutUsRect.bottom + deviation;
};
}

// Create the overarching container
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.top = '0';
container.style.left = '0';
container.style.width = '100%';
container.style.height = '100%';
container.style.overflow = 'visible';
container.style.zIndex = '9999';

document.querySelector('section[data-section-id="675918dd2f453e28e490b808"]').appendChild(container);

function poof() {
  if (!frame) {
    // Add confetti
    var theme = colorThemes[0],
      count = 0;
    (function addConfetto() {
      var confetto = new Confetto(theme);
      confetti.push(confetto);
      container.appendChild(confetto.outer);
      timer = setTimeout(addConfetto, spread * random());
    })(0);

    // Start the loop
    var prev = undefined;
    requestAnimationFrame(function loop(timestamp) {
      var delta = prev ? timestamp - prev : 0;
      prev = timestamp;
      var height = container.offsetHeight;

      for (var i = confetti.length-1; i >= 0; --i) {
        if (confetti[i].update(height, delta)) {
          container.removeChild(confetti[i].outer);
          confetti.splice(i, 1);
        }
      }

      if (timer || confetti.length)
        return frame = requestAnimationFrame(loop);

      // Cleanup
      container.parentNode.removeChild(container);
      frame = undefined;
    });
  }
}

poof();
};

</script>

Remember to replace Section ID 

Use this tool to find ID