Emoji Confetti

Web design can also be about the little surprises, and Emoji Confetti is one of them.

Let's learn how to create each scenario and how to customize it. Just copy and paste to your site.

2 JavaScript libraries I like, JS Confetti and Emojisplosion, are fun examples for:

A “thank you” page with emoji confetti.
surprise emoji explosion on a button.
troll your visitors with Emoji explosions on every click

Fill a “thank you” page with emoji confetti on load

Let's use JS confetti for this one

Copy this code to the end your thank you page:

<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

Optional customization

You can also make it use a specific emoji. You can add just one, or as many as you'd like.

<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
jsConfetti.addConfetti({
   emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'],
})

Surprise emoji explosion on click with JS Confetti

This code is take from the Webflow Marketplace demo Emoji Button by Dhruv Sachdev.

Step 1: Add script

Add this script to the bottom of you page/site:

<script async src="https://unpkg.com/emojisplosion/lib/easy.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('[data-trigger="emoji"]');

    const cumulativeOffset = (element) => {
        let top = 0,
            left = 0;
        do {
            top += element.offsetTop || 0;
            left += element.offsetLeft || 0;
            element = element.offsetParent;
        } while (element);

        return {
            top: top,
            left: left
        };
    };

    button.addEventListener("click", function() {
        emojisplosion({
            physics: {
                fontSize: 28,
                initialVelocities: {
                    rotation: {
                        max: 28,
                        min: -28
                    }
                },
                rotationDecelaration: 1.01
            },

            position() {
                const offset = cumulativeOffset(button);

                return {
                    x: offset.left + button.clientWidth / 2,
                    y: offset.top + button.clientHeight / 2
                };
            }
        });
    });
});

</script>

Step 2: Add trigger

Add a custom attribute of data-trigger with the value of emoji.

In Webflow

Choose a button
Settings
Click + icon on Custom Attributes
Add data-trigger to Name
Add emoji to Value

In Elementor

Click button
Advanced
Under Attributes add this data-trigger|emoji

Troll your visitors with Emoji explosions on every click

Source for this code on Code Sandbox.

<!-- Source: https://codesandbox.io/p/sandbox/emoji-explosion-on-click-forked-xc82ld?file=%2Fsrc%2Findex.ts -->
<script src="https://unpkg.com/emojisplosion/lib/global.js"></script>
<script>
const emoji = "⚡️";//🍿
const emojiNumber = 8;
const emojiSize = 48;

document.addEventListener("click", (event) => {
  const x = event.clientX;
  const y = event.clientY;

  emojisplosion({
    emojiCount: emojiNumber,
    emojis: [emoji],

    physics: {
      initialVelocities: {
        rotation: 0,
        x: {
          min: -6,
          max: 6,
        },
        y: {
          min: -10,
          max: -2,
        },
      },

      fontSize: emojiSize,
    },

    position: () => ({ x, y }),
  });
});
</script>