<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;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.