Rate this post

In the world of web design, the visual appeal of a website is crucial for capturing users’ attention and creating a memorable experience. One effective way to achieve this is through animated background effects. In this blog, we will dissect a sample HTML and CSS code that demonstrates how to create a stunning background cloud animation. This tutorial will help you understand each component of the code and how it contributes to the overall animation effect.

Table of Contents

HTML Structure for Cloud Animation

Let’s start by looking at the basic HTML structure of our animation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BACKGROUND CLOUD ANIMATION</title>
</head>
<body>
    <section class="mountain-banner">
        <div class="overlay-1"></div>
        <div class="overlay-2"></div>
        <div class="container">
            <div class="banner-text">
                <h1>Serenity</h1>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </section>
</body>
</html>

In this structure, we define a section with the class mountain-banner, which serves as the container for our animation. Inside this section, we have two overlay divs and a text container.

CSS Styling

The magic of the background animation is achieved through CSS. Let’s break down the CSS rules used in this example:

Body Styling

body {
    overflow: hidden;
}

Setting overflow: hidden on the body ensures that no scrollbars appear, which is particularly useful when dealing with animations that stretch beyond the viewport.

Mountain Banner

.mountain-banner {
    background: url(https://images.unsplash.com/photo-1627609243025-22613935dfa1?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 110vh;
    position: relative;
}

The .mountain-banner class styles the section to have a background image that covers the entire viewport, with a height of 110% of the viewport height (110vh). This makes sure that the banner is always larger than the viewport, providing a more immersive experience.

Overlay 1

.overlay-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        270deg,
        rgba(226, 224, 211, 0) 0%,
        rgba(0, 0, 0, 0.8687850140056023) 100%
    );
}

The .overlay-1 class creates a gradient overlay on top of the background image. The gradient starts from a fully transparent color to a semi-transparent dark color, which adds depth to the image and improves text readability.

Overlay 2 (Cloud Animation)

.overlay-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 250.625em;
    height: 23.8em;
    background: url(https://terriotech.com/cloud-overlay.png) 0 100% repeat-x;
    -webkit-animation: cloudLoop 80s linear infinite;
    animation: cloudLoop 80s linear infinite;
    z-index: 2;
    pointer-events: none;
    height: 43.75em;
}

The .overlay-2 class applies a cloud texture image as a background and animates it horizontally. The animation property is used to create a continuous scrolling effect. The -webkit-animation is for compatibility with older versions of WebKit browsers. The pointer-events: none ensures that the overlay doesn’t interfere with user interactions.

The animation itself is defined as:

@keyframes cloudLoop {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

This keyframe animation smoothly translates the cloud image horizontally from 0% to -50% of its width, creating a seamless cloud movement effect.

Banner Text

.banner-text {
    position: relative;
    color: #fff;
    text-align: center;
    padding: 10% 0 0 0;
}

.banner-text h1 {
    font-size: 50px;
    font-family: "Playfair Display", serif;
}

.banner-text p {
    font-family: "Dancing Script", cursive;
    font-size: 30px;
}

The .banner-text class styles the text content within the banner, centering it and applying a color that contrasts with the background. The h1 and p elements are styled with distinct fonts and sizes to make the text visually appealing.

Putting It All Together

Combining these CSS styles with the HTML structure results in a visually appealing section with a dynamic cloud animation overlay. The background image provides a scenic backdrop, while the cloud animation adds a layer of motion, making the design more engaging. The gradient overlay enhances text readability and ensures that the content remains prominent against the background.

This example demonstrates how CSS animations and background properties can be used to create captivating visual effects on a webpage. By adjusting the animation timing, image sources, and other styles, you can customize this effect to suit your specific design needs. Whether you’re creating a landing page, a portfolio site, or any other type of web project, this technique can add a professional and dynamic touch to your design.

ALSO GET KNOW ABOUT US AND KEEP LEARNING!

0 0 votes

Course Rating