<main class="sky" id="top">
  <!-- buttons to scroll to bottom and top -->
  <a href="#bottom">Click to scroll 👇</a>
  <a href="#top" class="top">Back to top 👆</a>
  <!-- balloons are generated randomly via javascript 🧙🏻‍♂️ -->
</main>
<!-- Hidden div to allow bottom scrolling -->
<div id="bottom"></div>
/* This is all you need to create the smooth scrolling effect */
html {
  scroll-behavior: smooth;
}

/* To prevent horizontal scrolling if the ballons get wider than the width of the screen */
body {
  overflow-x: hidden;
}

/* Styles for links */
a {
  text-align: center;
  text-decoration: none;
  width: 100%;
  display: block;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  color: white;
  font-weight: 100;
  position: absolute;
}

a.top {
  bottom: 0;
}

#bottom {
  height: 0;
}

/* Styles for the sky and balloons */
.sky {
  background: linear-gradient(to bottom, #64b3f4, #c2e59c);
  height: 6000px;
  position: relative;
}

.balloon {
  position: absolute;
  width: 50px;
  height: 50px;
  -webkit-transform: rotate(-44deg);
  -moz-transform: rotate(-44deg);
  -ms-transform: rotate(-44deg);
  border-radius: 100px 100px 100px 0px;
}

/* Colors for balloons */

.red {
  background: rgba(182, 15, 97, 0.9);
  box-shadow: inset 5px 5px 5px rgba(135, 11, 72, 0.9);
}

.orange {
  background: rgba(242, 112, 45, 0.9);
  box-shadow: inset 5px 5px 5px rgba(222, 85, 14, 0.9);
}

.teal {
  background: rgba(45, 181, 167, 0.9);
  box-shadow: inset 5px 5px 5px rgba(35, 140, 129, 0.9);
}

.purple {
  background: rgba(190, 61, 244, 0.9);
  box-shadow: inset 5px 5px 5px rgba(173, 14, 240, 0.9);
}

.green {
  background: rgba(180, 224, 67, 0.9);
  box-shadow: inset 5px 5px 5px rgba(158, 206, 34, 0.9);
}

.yellow {
  background: rgba(242, 194, 58, 0.9);
  box-shadow: inset 5px 5px 5px rgba(234, 177, 15, 0.9);
}
// The Javascript here is just intended to add and position the balloons randomly on the page
const colorsArray = ["red", "orange", "teal", "purple", "green", "yellow"];
const sky = document.querySelector('main');

function addBalloon () { 
  for (let index = 0; index < Math.round(Math.random() * 1000); index++) {
    // Create a balloon element and add the class to it
    const balloon = document.createElement('div');
    balloon.classList.add('balloon');
    // Get a random color from the colors array and add it to the ballon
    const randomColor = colorsArray[Math.floor(Math.random()*colorsArray.length)];
    balloon.classList.add(randomColor);
    // Position them randomly on the page
    balloon.style.top = Math.round(Math.random() * sky.scrollHeight) + 'px';
    balloon.style.left = Math.round(Math.random() * sky.offsetWidth) + 'px';
    // Add the balloons to the sky
    sky.appendChild(balloon); 
  }
}

// Function to run and generate the balloons randomly
document.body.onload = addBalloon;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.