Blogger Metin Efekti

"Blogger Metin Efekti"

Metin Efekti kodlarını aşağıda ki gibi sitenize ekleyebilirsiniz. Öncelikle HTML Kodu Ekleyelim.

1234567891011121314151617181920212223242526272829
 <!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" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="typewriter-effect-container">
      <h2>Merhabalar</h2>
      <span class="typewriter-effect">
        <p class="text-1">Windows 10</p>
        <p class="text-2">Windows 11</p>
        <p class="text-3">Microsoft</p>
      </span>
    </div>

    <script src="main.js"></script>
  </body>
</html>

Şimdi ise CSS kodlarını ekleyelim.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
 {
  margin: 0;
}

.typewriter-effect-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
  box-sizing: border-box;
  font-family: "Arial", arial;
}

.typewriter-effect-container h2 {
  margin: 0;
  font-size: 40px;
  color: #0091EA;
}

.typewriter-effect {
  position: relative;
}

.typewriter-effect p {
  font-size: 50px;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  margin-top: 20px;
}

.typewriter-effect p::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background: #fff;
}

.typewriter-effect p::after {
  content: "";
  top: 0;
  left: 0;
  height: 110%;
  background: #000;
  width: 2px;
  position: absolute;
}

@keyframes blinkAnim {
  100% {
    opacity: 0;
  }
}

.typewriter-effect p.text-1::before {
  animation: typeAnim 2s steps(8) infinite alternate;
}

.typewriter-effect p.text-1::after {
  animation: typeAnim 2s steps(8) infinite alternate,
    blinkAnim 1000ms linear infinite;
}

.typewriter-effect p.text-2::before {
  animation: typeAnim 2s steps(13) infinite alternate;
}

.typewriter-effect p.text-2::after {
  animation: typeAnim 2s steps(13) infinite alternate,
    blinkAnim 1000ms linear infinite;
}

.typewriter-effect p.text-3::before {
  animation: typeAnim 2s steps(12) infinite alternate;
}

.typewriter-effect p.text-3::after {
  animation: typeAnim 2s steps(12) infinite alternate,
    blinkAnim 1000ms linear infinite;
}

@keyframes typeAnim {
  60% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.typewriter-effect p.active {
  opacity: 1;
}

Son olarak JavaScript kodlarını ekleyelim.

12345678910111213141516171819202122232425
 const textAll = document.querySelectorAll(".typewriter-effect p");
let textNo = 1;

const removeTextClasses = () => {
  textAll.forEach((t) => {
    t.classList.remove("active");
  });
};

textAll[0].classList.add("active");

setInterval(() => {
  removeTextClasses();

  console.log("hi");

  if (textNo > textAll.length - 1) {
    textNo = 0;
  }

  textAll[textNo].classList.add("active");
  textNo++;
}, 4000);