Blogger Metin Efekti
"Blogger Metin Efekti"
Şimdi ise CSS kodlarını 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>
Son olarak JavaScript 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; }
12345678910111213141516171819202122232425const 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);