1
0
Home  ›  Blogger  ›  Metin Efekti

Blogger Metin Efekti

Baca juga Blogger'da Daha Fazla Araç Bağlantı Listesi Sayfası Oluşturma

Baca juga Blogger'da Yapışkan Not Oluşturma Aracı

"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);
Serkan Gündoğdu
Bilgisayar ve Yazılım Programları Hakkında En Güncel Bilgiler Bu Blog'da Bizi Takip Etmeyi Unutmayın.
Related Post
Blogger Meta Etiket Oluşturucu
Blogger Meta Etiket Oluşturucu Her sitede olması gerektiği gibi Meta Tag Generator için aşağıda…
Blogger JavaScript Kullanarak Yazma Animasyonu ile Kullanım Koşulları Oluşturma Aracı
Blogger JavaScript Kullanarak Yazma Animasyonu ile Kullanım Koşulları Oluşturma Aracı Blogger sitenize JavaScript kodunu kullanarak Animasyon ile Kull…
Blogger'da Küçük Resim Oluşturma Aracı
Blogger Metin Boyutlandırma Özelliği Ekleme
Blogger Metin Boyutlandırma Özelliği Ekleme Metni yeniden boyutlandırma, görünüşte engelli olan müşterilerin, i…
Yorum Gönder
Additional JS