Valentine's Day | Heart Shape (CSS) & Confetti Animation

Project here:
https://the-best-codes.github.io/projects/vdayHeart/

Not working?

Hey everyone! Happy Valentine's Day! As a developer, what better way to celebrate than with some creative code? Today, I'm excited to share a fun project I made: a pulsating, clickable heart shape in CSS, complete with heart-shaped confetti on click! This project is all about playing with different web technologies and having a little fun along the way.

Why This Project?

Sometimes, code is more than just functionality. It can be a canvas for expression, a playground for experimentation, and a way to explore the possibilities of web development. This project embodies that spirit. Here's why I created it:

• CSS creativity: Pushing the limits of what's possible with CSS is always fun. This project uses gradients, clip-paths, and animations to create a unique heart shape that feels dynamic and engaging.
• JavaScript for interactivity: While the heart itself is made with CSS, JavaScript adds a layer of interactivity. Clicking the heart reveals a hidden message and triggers a burst of heart-shaped confetti, making the experience more engaging.
• Learning with fun: Let's be honest, coding can be challenging. But when you tie it to a fun theme and creative outcome, it becomes more enjoyable and motivating. This project is a reminder that learning can be playful and fulfilling.

How It Works:

Let's delve into the code and see how the magic happens:

The Heart Shape:

• CSS magic: The .heart class uses a radial gradient to create a red circle, clipped into a heart shape using clip-path. clip-path docs
• Animation: The background gradient animates with animation: moveGradient to add a subtle, pulsating effect.
• Interactive JS: Clicking the heart toggles the clicked class, scaling it up and revealing a hidden message inside.

Heart-Shaped Confetti:

• Third-party library: The canvas-confetti library simplifies confetti creation.
• Customizing the hearts: The confetti.shapeFromText function creates heart-shaped confetti using an emoji.
• Triggering the celebration: Clicking the heart fires the createConfetti function, filling the screen with lovey-dovey confetti.

A deeper look at the code

Now, let's dive deeper into the code and explain its inner workings:

HTML Structure:

• The HTML consists of a basic structure with a div.center containing the heart element (div.heart) and its hidden message (p#textInner).
• The confetti script (<script src="..."></script>) is included after the main content.

CSS Styling:

• The .heart class:
  • display: inline-block: Ensures the heart stays within the flow of the content.
  • width: 200px; aspect-ratio: 1;: Sets the size and aspect ratio of the heart.
  • border-image: Creates a radial gradient that transitions from red to black, forming the heart shape.
  • clip-path: Defines the heart shape by clipping away unwanted areas from the gradient.
  • transition: transform 0.3s ease;: Enables smooth scaling animation on hover and click.
• The .heart:hover state:
  • transform: scale(1.2);: Scales the heart up slightly on hover for a subtle highlight.
• The .heart.clicked state:
  • transform: scale(1.3);: Scales the heart up further on click for emphasis.
  • p#textInner.clicked > .heart-text { color: white !important; }: Forces the hidden message text to white when clicked, ensuring visibility against the red background.
• The .heart-text class:
  • Styles the hidden message text within the heart.
  • transition: all 0.3s ease;: Enables smooth opacity transition when the message is revealed.
• The .instructions class:
  • Styles the instructions text that appears on hover.
  • opacity: 0;: Initially hides the instructions.
  • The .heart:hover .instructions state:
    • transform: translate(0, -20px); opacity: 1;: Reveals the instructions on hover.
  • The .heart.clicked .instructions state:
    • opacity: 0;: Hides the instructions again when the heart is clicked.

JavaScript Functionality:

• The toggle function:
  • Takes a clicked heart element as input.
  • Toggles the clicked class on the element, triggering the visual changes based on the CSS styles.
  • If clicked, shows the hidden message and triggers confetti.
  • If unclicked, hides the message.
• The createConfetti function:
  • Creates a canvas element and gets its drawing context.
  • Defines a heart-shaped emoji using the confetti.shapeFromText function.
  • Calls the confetti function with various options:
    • particleCount: Number of confetti particles (adjust for performance).
    • scalar: Size of the confetti particles.
    • angle: Angle of the confetti launch.
    • spread: Spread of the confetti launch.
    • startVelocity: Initial velocity of the confetti particles.
    • decay: Decay rate of the confetti particles' movement.
    • shapes: Array containing the heart-shaped emoji.
    • origin: Where the confetti originates from (within the heart).
    • zIndex: Ensures the confetti appears behind the heart element.

Pro tip:

Add the CSS declaration filter: drop-shadow(0 -10px 25px rgb(255, 255, 255)); to the .center class to add a blurred shadow to the heart.
Experiment with different blur radii and colors!

Conclusion:

This project demonstrates that code can be both functional and artistic. It highlights the power of combining CSS, JavaScript, and third-party libraries to create engaging and interactive experiences. While this code serves as a fun Valentine's Day project, remember that the core principles of CSS animation, interactivity, and creativity can be applied to various web development endeavors. So, experiment, explore, and most importantly, have fun coding!

All codes in this post are by BestCodes. No more than 60% of the post content is AI generated. (I did use AI a bit on this one. I needed some help putting my code into words. 😆)

By BestCodes

💜 I love you, DEV! 💜