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

1. Choose a button
2. Settings
3. Click + icon on Custom Attributes
4. Add data-trigger to Name
5. Add emoji to Value

In Elementor

1. Click button
2. Advanced
3. 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>

Final Thoughts

This can applied to Webflow, Elementor or any other page builder you use.