Beautiful Blue Sky Animation with Floating Hearts & Butterflies – HTML, CSS & JavaScript

Create a stunning blue sky background animation with floating hearts and butterflies using HTML, CSS, and JavaScript. This lightweight and responsive animation enhances user engagement, improves SEO, and adds a visually appealing effect to your website. Get the full source code and customization tips now!

Friday, March 14, 2025
Beautiful Blue Sky Animation with Floating Hearts & Butterflies – HTML, CSS & JavaScript

Create a Stunning Blue Sky Animation with Floating Hearts and Butterflies Using HTML, CSS, and JavaScript

Introduction

Are you looking for an eye-catching animated background to enhance your website’s appearance? In this blog post, we will walk you through a fully responsive HTML, CSS, and JavaScript animation that creates a beautiful blue sky effect with floating hearts ❤️ and fluttering butterflies ?.

This animation can add a touch of romance, serenity, and nature to your website. Whether you are developing a personal blog, a wedding website, a nature-themed page, or a Valentine's Day project, this smooth and lightweight animation is perfect for any design.

What is This Animation About?

This background animation dynamically generates hearts and butterflies that smoothly rise and float across the screen. The elements move naturally, creating an elegant and peaceful blue sky atmosphere. The animation is made using pure HTML, CSS, and JavaScript, ensuring a lightweight and fast-loading experience for your visitors.

Why Use This Animation?

Adding animated elements to your website can improve user engagement, increase time spent on the page, and enhance the overall user experience. Below are some of the benefits of using this animation:

✅ Visually Appealing – Creates an elegant and relaxing effect on your webpage.
✅ Engages Users – Animated elements keep visitors interested and entertained.
✅ Responsive Design – Works smoothly on desktops, tablets, and mobile devices.
✅ Lightweight & Optimized – No heavy frameworks, ensuring a fast website.
✅ Easy to Integrate – Simple code that can be easily added to any webpage.
✅ Customizable – You can modify the speed, size, and quantity of elements.

How This Animation Works

This animation is powered by CSS keyframes and JavaScript, which dynamically creates hearts and butterflies at random positions. These elements gradually move upward while fading out, creating a smooth and seamless floating effect.

Here’s a quick breakdown of how it works:

  1. JavaScript dynamically creates hearts and butterflies every few seconds.
  2. CSS keyframes handle the animations, making them float and fade.
  3. Random positioning ensures a natural look, with elements appearing at different points on the screen.
  4. Elements are removed automatically after animation ends, preventing lag or clutter.

Complete Source Code

Below is the full source code that you can copy and use for your website:

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./butterflies.css">
    <title>Animation butterflies Background</title>
  </head>

  <body>
    <div id="app">
      <div id="hero">
        <h1><span>?</span><br /></h1>
      </div>
    </div>

    <script type="module">
      import { butterfliesBackground } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'

const pc = butterfliesBackground({
  el: document.getElementById('app'),
  eventsEl: document.body,
  gpgpuSize: 18,
  background: 0x88CEFF,
  material: 'phong',
  lights: [
    { type: 'ambient', params: [0xffffff, 0.5] },
    { type: 'directional', params: [0xffffff, 1], props: { position: [10, 0, 0] } }
  ],
  materialParams: { transparent: true, alphaTest: 0.5 },
  texture: 'https://assets.codepen.io/33787/butterflies.png',
  textureCount: 4,
  wingsScale: [2, 2, 2],
  wingsWidthSegments: 16,
  wingsHeightSegments: 16,
  wingsSpeed: 0.75,
  wingsDisplacementScale: 1.25,
  noiseCoordScale: 0.01,
  noiseTimeCoef: 0.0005,
  noiseIntensity: 0.0025,
  attractionRadius1: 100,
  attractionRadius2: 150,
  maxVelocity: 0.1
})


    </script>

<script>
  function createHeart() {
      const heart = document.createElement("div");
      heart.innerHTML = "❤️"; 
      heart.classList.add("heart");

      document.body.appendChild(heart);

      // Random position and animation speed
      const randomSize = Math.random() * 20 + 10; // 10px to 30px
      const randomLeft = Math.random() * 100; // % across screen
      const randomDuration = Math.random() * 5 + 3; // 3s to 8s

      heart.style.left = `${randomLeft}%`;
      heart.style.fontSize = `${randomSize}px`;
      heart.style.animationDuration = `${randomDuration}s`;

      setTimeout(() => {
          heart.remove();
      }, randomDuration * 1000);
  }

  setInterval(createHeart, 500); // Create hearts every 500ms
</script>
<script type="module" src="main.js"></script>


  </body>
</html>

CSS Code

body, html, #app {
  margin: 0;
  width: 100%;
  height: 100%;
}

#app {
  overflow: hidden;
  touch-action: pan-up;
  color: #121111;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  text-shadow: 0 0 5px #000000, 0 0 20px #000;
  user-select: none;
}

#app h1 {
  --fontSize: 50px;
  --lineHeight: 70px;
  width: auto;
  height: calc(2 * var(--lineHeight));
  line-height: var(--lineHeight);
  margin: calc(50vh - var(--lineHeight)) auto 0;
  font-size: var(--fontSize);
	
}

#app a {
  margin-top: 10px;
  display: inline-block;
  text-decoration: none;
  color: #fff;
}

#app canvas {
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
}

@keyframes flap {
	0%, 20%, 80%, 100% {
		transform: scaleX(1) rotate(5deg);
	}
	50% {
		transform: scaleX(0.7) rotate(7deg);
	}
}

h1 {
	text-align: center;
	font-size: 2rem;
}

h1 span {
	display: inline-block;
	animation: flap 0.75s infinite ease-in-out;
}

#controls {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
	display: flex;
	align-items: center;
}
.btn {
	background-color: rgba(0, 0, 0, 0.4);
	border: none;
	color: rgba(255, 255, 255, 0.4);
	padding: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 2px 2px;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
}
.btn:hover {
	background-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 0, 1);
}
#fullscreenBtn {
	font-size: 20px;
	z-index: 100;
}

    body {
      background: linear-gradient(to bottom, #87CEFA, #B0E0E6);
      height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
    }

    h1 {
        color: white;
        font-size: 36px;
        font-weight: bold;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 2;
    }

    /* Heart Animation */
    .heart {
        position: absolute;
        color: red;
        font-size: 20px;
        opacity: 0.8;
        animation: floatUp linear infinite;
    }

    @keyframes floatUp {
        0% {
            transform: translateY(100vh) scale(1);
            opacity: 1;
        }
        100% {
            transform: translateY(-10vh) scale(1.5);
            opacity: 0;
        }
    }

JavaScript Code

    <script type="module">
      import { butterfliesBackground } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'

const pc = butterfliesBackground({
  el: document.getElementById('app'),
  eventsEl: document.body,
  gpgpuSize: 18,
  background: 0x88CEFF,
  material: 'phong',
  lights: [
    { type: 'ambient', params: [0xffffff, 0.5] },
    { type: 'directional', params: [0xffffff, 1], props: { position: [10, 0, 0] } }
  ],
  materialParams: { transparent: true, alphaTest: 0.5 },
  texture: 'https://assets.codepen.io/33787/butterflies.png',
  textureCount: 4,
  wingsScale: [2, 2, 2],
  wingsWidthSegments: 16,
  wingsHeightSegments: 16,
  wingsSpeed: 0.75,
  wingsDisplacementScale: 1.25,
  noiseCoordScale: 0.01,
  noiseTimeCoef: 0.0005,
  noiseIntensity: 0.0025,
  attractionRadius1: 100,
  attractionRadius2: 150,
  maxVelocity: 0.1
})



  function createHeart() {
      const heart = document.createElement("div");
      heart.innerHTML = "❤️"; 
      heart.classList.add("heart");

      document.body.appendChild(heart);

      // Random position and animation speed
      const randomSize = Math.random() * 20 + 10; // 10px to 30px
      const randomLeft = Math.random() * 100; // % across screen
      const randomDuration = Math.random() * 5 + 3; // 3s to 8s

      heart.style.left = `${randomLeft}%`;
      heart.style.fontSize = `${randomSize}px`;
      heart.style.animationDuration = `${randomDuration}s`;

      setTimeout(() => {
          heart.remove();
      }, randomDuration * 1000);
  }

  setInterval(createHeart, 500); // Create hearts every 500ms

PHP Code

NO Need
Show Result

How to Use This Code

  1. Copy the source code provided above.
  2. Paste it into an HTML file (e.g., sky-animation.html).
  3. Open the file in a web browser to see the animation in action.
  4. Customize the animation by modifying the size, speed, or frequency of elements.


Customization Options

You can easily modify this animation to suit your needs:

  • Change the Speed: Adjust the animation duration in animation: floatUp Xs linear infinite;
  • Modify the Frequency: Change the interval time in setInterval(() => { ... }, TIME);
  • Replace the Images: Use different image URLs for hearts and butterflies.
  • Adjust the Opacity: Modify opacity: 0.8; to make elements more or less visible.


? FAQs for Fast Google Ranking ?

❓ 1. How do I create a floating heart and butterfly animation in HTML & CSS?

? To create a beautiful floating heart and butterfly animation, use HTML to structure elements, CSS keyframes for smooth motion, and JavaScript to dynamically generate floating elements. ?? The full source code is provided in this blog post for easy implementation.

? 2. Will this animation work on mobile devices?

✅ Yes! This animation is fully responsive and works perfectly on desktops, tablets, and smartphones without affecting performance. ??

? 3. Can I customize the speed and size of hearts and butterflies?

?️ Absolutely! You can modify the animation duration in the @keyframes CSS or adjust the spawning interval in JavaScript to control the speed and size of the floating elements. ?‍♂️??

⚡ 4. Does this animation slow down my website?

? No, this animation is lightweight and optimized! It only uses CSS animations and JavaScript DOM manipulation, ensuring smooth performance with minimal impact on page load speed. ⚙️?

? 5. Can I use this background animation for any website?

? Yes! This animation is perfect for:
? Personal blogs ?
? Love-themed websites ❤️
? Wedding pages ?
? Creative web projects ?

? You can also replace hearts and butterflies with custom images to match your theme! ?️?️

✨ 6. How can I add more animation effects?

? You can enhance this animation by adding stars ⭐, bubbles ?, or falling leaves ?. Simply modify the JavaScript code to create additional floating elements! ??‍?

? 7. How do I make sure my website ranks higher on Google with this animation?

To improve SEO and rank higher on Google, follow these tips:

✅ Use optimized meta tags (title, description, keywords) ?
✅ Ensure fast page speed (this animation is lightweight) ⚡
✅ Include relevant content (like this blog post) ?
✅ Use proper heading tags (H1, H2, H3, etc.) ?
✅ Share your page on social media to get backlinks and traffic ?







Leave a Comment: 👇