Let’s create a Stickers of Cartoon Characters Slider Background Animation using HTML, CSS, and JavaScript! ✨ This project will feature stylish stickers of cartoon characters with smooth animations that respond to user interaction or load automatically.
We’ll use:
- HTML to build the Stickers of Cartoon Characters structure.
- CSS to design and animate parts like wires, speakers, and pulses.
- JavaScript to trigger animations or sound-like effects when interacting.
This project is great for anyone looking to improve their front-end animation skills and add a modern, tech-inspired element to their portfolio or landing page.
HTML:
This HTML code creates a stylish Stickers of Cartoon Characters Slider Background Animation product showcase page with a logo, heading, product description, price, social icons, and a set of Stickers of Cartoon Characters images in different colors. Each Stickers of Cartoon Characters image corresponds to a matching animated radial gradient background, likely controlled by JavaScript for smooth transitions, giving users an engaging visual experience when viewing the product.
<!DOCTYPE html>
<html lang="en" >
<head> <meta charset="UTF-8"> <title>Stickers of Cartoon Characters Slider Background Animation | Tech4code</title> <link rel="stylesheet" href="./style.css">
</head>
<body>
<body>
<section class="slider-main"> <div class="container"> <div class="slider-content-wrap"> <div class="slider-content"> <h2 class="heading-style-2" style="color: #000;">Stickers of Cartoon Characters Slider Background Animation</h2> <div class="social-icons"> <a href="#"><img src="Images/instagram.svg" alt="instagram"></a> <a href="#"><img src="Images/facebook.svg" alt="facebook"></a> <a href="#"><img src="Images/twitter.svg" alt="twitter"></a> </div> </div> </div> </div> <div class="slider-images"> <img class="slider-image" src="Images/C1.png" alt="Tech4code image"> <img class="slider-image" src="Images/C2.png" alt="Tech4code image"> <img class="slider-image" src="Images/C3.png" alt="Tech4code image"> <img class="slider-image" src="Images/C4.png" alt="Tech4code image"> </div> <div id="backgrounds"> <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D7D7D7 0%, #979797 100%);"></div> <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D7D7D7 0%, #A55EFF 100%);"></div> <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D7D7D7 0%, #487BF9 100%);"></div> <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D7D7D7 0%, #D82727 100%);"></div> </div>
</section>
</body> <script src="./script.js"></script>
</body>
</html>CSS:
This CSS file styles a Stickers of Cartoon Characters product showcase with a responsive and animated layout. It defines a clean, modern look using the Montserrat font, sets up a split layout with product info on one side and stickers of cartoon character images on the other, and creates smooth image transitions using blur and opacity for animation. Backgrounds are layered behind the content using gradients, and social icons are neatly styled. Media queries ensure the layout adapts well across all screen sizes from desktop to mobile, keeping the design visually appealing and functional.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box;
}
html { overflow-x: hidden;
}
img { user-select: none;
}
body { overflow-x: hidden; position: relative; font-family: "Montserrat", sans-serif; height: 100svh;
}
a { display: inline-block;
}
.heading-style-2 { color: #fff; font-size: 50px; font-weight: 900; line-height: 50px; margin-bottom: 40px;
}
p { color: #fff; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 400; line-height: 35px; margin-bottom: 28px;
}
.slider-main { min-height: 700px; background: radial-gradient(50% 50% at 50% 50%, #c7f6d0 0%, #7cb686 92.19%); display: flex; justify-content: space-between; align-items: center; height: 100%; overflow: hidden; position: relative; z-index: 1;
}
#backgrounds { position: absolute; width: 100%; height: 100%; top: 0; z-index: -1;
}
.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease-in-out;
}
.container { position: relative; left: calc(50% - (1140px / 2)); width: 50%; padding-block: 100px; max-width: 525px; height: 100%;
}
/* content */
.slider-content-wrap { display: flex; flex-direction: column; justify-content: center; height: 100%;
}
/* social media */
.social-icons { display: flex; align-items: center; gap: 16px;
}
.social-icons a { border: 2px solid #fff; border-radius: 50%; width: 45px; height: 45px; display: inline-block; display: flex; justify-content: center; align-items: center;
}
.social-icons img { width: 22px; height: 22px;
}
/* images */
.slider-images > img.next { opacity: 1; transition: 2s; filter: blur(35px); left: 100%; top: 10%; transform: translate(-50%, -50%) scale(0.3);
}
.slider-images > img.active { opacity: 1; transform: scale(1); transition: 2s; filter: blur(0px); left: 0; top: 50%; transform: translateY(-50%); z-index: 1;
}
.slider-images > img.previous { opacity: 1; transition: 2s; filter: blur(25px); left: 95%; top: 90%;
}
.slider-images > img.inactive { opacity: 0; transition: 2s; filter: blur(35px); left: 100%; top: 100%; transform: translate(10%, 10%) scale(0.3);
}
.slider-images { position: relative; width: 50%; height: 100%; top: 0;
}
.slider-images > img { position: absolute; top: 0%; left: 100%; filter: blur(25px); transform: translate(-50%, -50%) scale(0.3); transition: opacity 3s; object-fit: cover; max-width: 593px; max-height: 779px; height: 100%; min-height: 320px;
}
/* ========================= media query ============================== */
@media screen and (max-width: 1199px) { .logo a img { width: 230px; } .heading-style-2 { font-size: 40px; line-height: 45px; margin-bottom: 30px; } p { font-size: 17px; line-height: 28px; margin-bottom: 22px; } .container { left: calc(50% - (920px / 2)); padding-block: 80px; max-width: 475px; } .slider-images > img { width: 453px; height: auto; aspect-ratio: 1/1.3; }
}
@media screen and (max-width: 991px) { .logo a img { width: 210px; } .heading-style-2 { font-size: 35px; line-height: 43px; margin-bottom: 22px; } p { font-size: 16px; line-height: 26px; margin-bottom: 18px; } .container { left: calc(50% - (720px / 2)); padding-block: 70px; max-width: 405px; } .slider-images { width: 45%; } .slider-images > img { width: 340px; aspect-ratio: 1/1.3; }
}
@media screen and (max-width: 767px) { .logo a img { width: 200px; } .logo a { margin-bottom: 20px; } .slider-main { flex-direction: column; min-height: 900px; } .social-icons a { width: 35px; height: 35px; } .social-icons img { width: 16px; height: 16px; } .container { position: unset; padding-block: 70px; max-width: 540px; width: 100%; } .slider-images { width: 100%; } .slider-images > img { height: 380px; aspect-ratio: 1/1.3; width: auto; } .slider-images > img.active { top: 45%; left: 20%; }
}
@media screen and (max-width: 575px) { .logo a img { width: 180px; } .logo a { margin-bottom: 18px; } .heading-style-2 { font-size: 30px; line-height: 40px; margin-bottom: 20px; } p { font-size: 15px; line-height: 24px; margin-bottom: 16px; } .social-icons a { width: 32px; height: 32px; } .social-icons img { width: 15px; height: 15px; } .container { padding: 50px 20px 50px 20px; max-width: 100%; } .slider-images > img { height: 100px; } .slider-images > img.active { top: 50%; left: 5%; } .slider-images > img.previous { top: 100%; }
}JavaScript:
This JavaScript code powers the Stickers of Cartoon Characters slider animation by cycling through images and background gradients every 3 seconds. It assigns classes like active, next, previous, and inactive to each image for visual effects (like blur and transitions) and fades in the matching background using opacity. The slider loops infinitely by updating the imageIndex, ensuring smooth automatic transitions between the stickers of cartoon characters colors and their background styles.
var backgrounds = document.querySelectorAll('.background');
const slider = document.querySelector('.slider-images');
const images = Array.from(slider.children);
let imageIndex = 0;
function updateSlider() { images.forEach(image => { image.classList.remove('active', 'previous', 'next', 'inactive'); }); images[imageIndex].classList.add('active'); if (imageIndex - 1 >= 0) { images[imageIndex - 1].classList.add('previous'); } else { images[images.length - 1].classList.add('previous'); } if (imageIndex + 1 < images.length) { images[imageIndex + 1].classList.add('next'); } else { images[0].classList.add('next'); } images.forEach((image, index) => { if (index !== imageIndex && index !== (imageIndex - 1 + images.length) % images.length && index !== (imageIndex + 1) % images.length) { image.classList.add('inactive'); } }); backgrounds.forEach((background) => { background.style.opacity = 0; }); if (images[imageIndex].classList.contains('active')) { backgrounds[imageIndex].style.opacity = 1; } imageIndex = (imageIndex + 1) % images.length;
}
updateSlider();
setInterval(updateSlider, 3000);
images[1].classList.add('next');
images[2].classList.add('inactive');
images[3].classList.add('inactive');
images[4].classList.add('previous');
images[0].classList.add('active');If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
