Smoke Effect in Your Name

Smoke Effect in Your Name

Are you ready to add a touch of mystery and allure to your web page? In this post, we'll explore how to create a captivating smoke effect surrounding your name or any text using the power of HTML and CSS. This tutorial will not only teach you the technical aspects but also help you unleash your creativity to make your website more enchanting than ever.

📜 About That:

Smoke effects are a popular way to give your webpage an ethereal, mesmerizing, and visually appealing touch. Imagine introducing yourself with your name shrouded in a swirling cloud of smoke, adding an extra layer of sophistication to your online presence. It's an eye-catching way to engage your visitors and leave a memorable impression.

In this tutorial, we will guide you through the steps to achieve this stunning smoke effect. Even if you are a beginner, don't worry. We will break it down into easy-to-follow segments. By the end of this guide, you'll have the skills and knowledge to implement this captivating effect on your website. Plus, it's a great opportunity to delve into the creative aspects of web development.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="smoke.css">
    <title>smoke effect on Name</title>
</head>
<body>
    <section>
        <video src="smoke.mp4" autoplay muted ></video>
        <h1>
            <span>T</span>
            <span>R</span>
            <span>I</span>
            <span>N</span>
            <span>E</span>
            <span>T</span>
            <span>R</span>
            <span>A</span>
        </h1>
    </section>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

video{
    object-fit: cover;
}

section{
    background:#000 ;
}

h1{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    letter-spacing: 1rem;
    text-transform: uppercase;
    color: #f5f5f5;
    font-size: 5em;
    font-family: sans-serif;
}

h1 span{
    display: inline-block;
    animation: animate 1s  ease-in-out;

}

@keyframes animate{
    0%{
        opacity: 0%;
        transform: rotateY(90deg);
        filter: blur(10px);
    }
    100%{
        opacity: 1;
        transform: rotateY(0deg);
        filter: blur(0px);
}
}
h1 span:nth-child(1)
{
    animation-delay: 0.6s;
}
h1 span:nth-child(2)
{
    animation-delay: 1s;
}
h1 span:nth-child(3)
{
    animation-delay: 1.7s;
}
h1 span:nth-child(4)
{
    animation-delay: 2.3s;
}
h1 span:nth-child(5)
{
    animation-delay: 2.7s;
}
h1 span:nth-child(6)
{
    animation-delay: 3.2s;
}
h1 span:nth-child(7)
{
    animation-delay: 3.7s;
}
h1 span:nth-child(8)
{
    animation-delay: 4s;
}

🖥️ What You Will Learn:

The basics of HTML and CSS: If you're new to web development, don't fret. We'll start from the ground up, explaining HTML and CSS concepts as we go along.

Creating a container: We'll show you how to set up a container for your text and prepare it for the smoke effect.

CSS animations: Dive into the world of CSS animations to make the smoke swirl and dance around your text.

Customization: Make the smoke effect your own by tweaking colors, opacity, and other parameters.

Tips and Tricks: Learn some tips and tricks to optimize your code and enhance the overall experience.

🎨 Get Creative:

Beyond the technicalities, we encourage you to get creative with this effect. Experiment with different color schemes, fonts, and background images to make your web page truly unique. This post will not only give you the tools to create a smoke effect but also inspire you to think outside the box.

🚀 Let's Get Started:

Now that you're intrigued, let's dive right into the tutorial. By the end of this journey, you'll have a stunning smoke effect greeting your visitors on your web page. Get ready to impress and mesmerize with your newfound skills in web development.

Are you ready to add a touch of mystique and elegance to your online presence? Follow along and start creating the captivating "Smoke Effect in Your Name."

Stay tuned, and let's bring some smoke to your web pages!

Click here to download the Source Code ---> DOWNLOAD NOW

🌐 #HTML #CSS #WebDevelopment #SmokeEffect #Creativity #Tutorial

Thank you for using Dev.Trinetra.

Facebook SDK (Plugin)