Foggy Background animation with html and css

Cascading Style Sheets (CSS) can help you do more than just determine colors, fonts, or the positioning of certain elements. You can use CSS to create trendy animations and visual effects. You don't need to know JavaScript or even HTML and create different kinds of animations and environments on your website.

Our team has researched CSS animated background examples that can help you create fun websites. We want to share a few of our favorite ones with you. The CSS animated background examples from our site are suitable for different levels of developing skills, so we are sure everyone will find something.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Smoke</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="bg">
      <h2 id="text">Tutor Joes</h2>
      <div class="fog">
        <img src="images/fog1.png" style="--i: 1;" />
        <img src="images/fog2.png" style="--i: 2;" />
        <img src="images/fog3.png" style="--i: 3;" />
        <img src="images/fog4.png" style="--i: 4;" />
        <img src="images/fog5.png" style="--i: 5;" />
        <img src="images/fog1.png" style="--i: 10;" />
        <img src="images/fog2.png" style="--i: 9;" />
        <img src="images/fog3.png" style="--i: 8;" />
        <img src="images/fog4.png" style="--i: 7;" />
        <img src="images/fog5.png" style="--i: 6;" />
      </div>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.bg {
  position: relative;
  width: 100%;
  height: 130vh;
  background: url('../images/bg.jpg');
  background-size: cover;
  background-position: bottom;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg #text {
  position: relative;
  font-size: 120px;
  color: #fff;
  opacity: 0.6;
}
.bg .fog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.bg .fog img {
  position: absolute;
  bottom: 0;
  max-width: 100%;
  animation: fog_effect calc(3s * var(--i)) ease-in infinite;
}
@keyframes fog_effect {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  25%,
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

js/script.js

let text = document.getElementById("text");
window.addEventListener("scroll", function () {
	let value = window.scrollY;
	text.style.fontSize = value * 1 + "px";
});

Output