JavaScript: TimeInterval ile Kayan Yazı

HTML5 ile marquee desteği bitti. Javascript ve CSS yöntemleri ile marqueenin yaptığı işlemleri yapmak mümkün. Bu kısa örnekte timeInterval nesnesinin kullanılarak kayan bir yazı yapılmıştır. Hazırlanan örnek fonksiyon olarak hazırlanmıştır. Fonksiyona kayacak nesne ve zaman değerleri girilerek bütün yazılara uygulamak mümkündür.

HTML:

Merhaba Dünya

CSS:


<style>
            body{
                background: #2ecc71;
            }
            #yazi{
                margin:80px auto;
                padding:20px;
                width: 300px;
                font-size:25px;
                background: #34495e;
                color:#ecf0f1;
                border: solid 3px #16a085;
            }
        </style>

<style>

body{

background: #2ecc71;

}

#yazi{

margin:80px auto;

padding:20px;

width: 300px;

font-size:25px;

background: #34495e;

color:#ecf0f1;

border: solid 3px #16a085;

}

</style>

JavaScript:


<script>       
 /*KayanYazi fonksiyonunu 
        ekleyip daha esnek kullanılmasını sağlıyoruz.*/
        
    KayanYazi=function(nesne,zaman){
         let yaziNesne=nesne;
        
        setInterval(function(){
            let yazi  = yaziNesne.innerHTML;
            let harf  = yazi.substring(0,1);
            let kalan = yazi.substring(1,yazi.length);
            kalan=kalan+harf
            yaziNesne.innerHTML=kalan;
        }, zaman);
    }
        
    var nesne=document.getElementById("yazi"); 
    KayanYazi(nesne,750);  
</script>

/*KayanYazi fonksiyonunu

ekleyip daha esnek kullanılmasını sağlıyoruz.*/

KayanYazi=function(nesne,zaman){

let yaziNesne=nesne;

setInterval(function(){

let yazi = yaziNesne.innerHTML;

let harf = yazi.substring(0,1);

let kalan = yazi.substring(1,yazi.length);

kalan=kalan+harf

yaziNesne.innerHTML=kalan;

}, zaman);

}

var nesne=document.getElementById("yazi");

KayanYazi(nesne,750);

</script>

HTML+CSS+JS(Tüm Kodlar):


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript Örnekleri</title>
        <style>
            body{
                background: #2ecc71;
            }
            #yazi{
                margin:80px auto;
                padding:20px;
                width: 300px;
                font-size:25px;
                background: #34495e;
                color:#ecf0f1;
                border: solid 3px #16a085;
            }
        </style>
    </head>
    <body>
    <div id="yazi">Merhaba Dünya </div>  
    
    <script>
            /*KayanYazi fonksiyonunu 
        ekleyip daha esnek kullanılmasını sağlıyoruz.*/
        
    KayanYazi=function(nesne,zaman){
         let yaziNesne=nesne;
        
        setInterval(function(){
            let yazi  = yaziNesne.innerHTML;
            let harf  = yazi.substring(0,1);
            let kalan = yazi.substring(1,yazi.length);
            kalan=kalan+harf
            yaziNesne.innerHTML=kalan;
        }, zaman);
    }
        
    var nesne=document.getElementById("yazi"); 
    KayanYazi(nesne,750);  
        </script>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>JavaScript Örnekleri</title>