BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 



           Küçük bir zaman içinde araştırdığım daktilo efekt yazı yapımı hakkında bir sitede bulduğum basit bir kodlama yapımı ile çalışan daktilo efekt kodunu ben türkçeleştirdim ve bazı değişiklikler yaparak hazırladım.

            Aşağıda nasıl yapıldığını sırası ile göstererek anlatmaya çalıştım.Burda li ekiteti kullanarak içeriklerimizi belirliyoruz.En önemlisi burda Jquery kodunu kullanmazsanız çalışmaz,bunun için Jquery çağırmamız gerekir.

   Jquery Kodu 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.4.2'></script>

    JavaScript Kodu


$(function() {
    var repeat = 1;    //Tekrarlama Ayaro 0 veya 1 olabilir.
    var ch = 0;       //Karakter sayısı, hangi karaktere gelince diğer satıra geçileceğini belirler. 0-100 gibi rakamsaldır.
    var item = 0;     //Listenin hangisinden başlanapını belirler 0 ilk <li> den başlar.
    var items = $('#caption li').length;
    var time = 1000;  // Görünecek Süre (milisaniye)
    var delay = 50;   // Gecikme (milisaniye)
    var wait = 4000   // Bekleme Süresi (Başlama için (milisaniye))
    $('#showCaption').css('width', ($('#caption').width() + 20));
    function tickInterval() {
        if(item < items) {
            var text = $('#caption li:eq('+item+')').text();
            type(text);
            text = null;
            var tick = setTimeout(tickInterval, time);
        } else {
            if(repeat == 1) {
                            ch = 0;
                            item = 0;
                            tickInterval();
                        } else {
                            clearTimeout(tick);
                        }
        }
    }
    function type(text) {
        time = delay;
        $('#showCaption').html(text.substr(0, ch++));
        if(ch > text.length) {
            item++;
            ch = 0;
            time = wait;
        }
    }
    var tick = setTimeout(tickInterval, time);
});
   
     Tabi bu kodun aktifleşmesi için showCaption   id'sine sahip div ve liste içeriklerini belirleyeceğimiz caption id'sine sahip bir <ul> liste başlangıcına ihtiyacımız var.Bu ihtiyacımız olan aşağıdaki gibidir.

   HTML İçeriği

<ul id="caption">
    <li>Birinci İçerik.</li>
    <li>İkinci İçerik.</li>
    <li>Üçüncü İçerik.</li>
    <li>Dördüncü İçerik.</li>
    <li>Beşinci İçerik.</li>
    <li>Altıncı İçerik.</li>
    <li>Yedinci İçerik.</li>
    <li>Sekizinci İçerik.</li>
    <li>Dokuzuncu İçerik.</li>
    <li>Onuncu İçerik.</li>
</ul>
    <div id="showCaption"></div>

   HTML içeriğini ekletikden sonra CSS öğelerine ihtiyacımız var şimdi.Tabiki ilk olarak caption tagını saklamalıyız.Caption tagını saklamamızın nedeni Jquery Kodu ShowCaption div'i içerisinde bu listeleri tek tek göstermesini sağlamamız gerekiyor.

    CSS


#caption {
    display: none;
}
#showCaption{
    font-family:Courier New;
    font-size:20px;
    color:#000;
    font-weight:bold;
    width:350px;
    min-width:350px;
}
/* İhtiyaca göre düzenlenmiş css dosyasıdır. Kendinize göre düzenleyebilirsiniz */

     Şimdi yukarda yapmış olduğumuz işlemin HTML kod sistemine alalım ve nasıl olacağını görelim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr_TR">
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>jQuery Daktilo Efekti ~ KaiseRCrazY.CoM</title>
            <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.4.2'></script>
            <script type='text/javascript'>
            $(function() {
                var repeat = 1;    //Tekrarlama Ayaro 0 veya 1 olabilir.
                var ch = 0;       //Karakter sayısı, hangi karaktere gelince diğer satıra geçileceğini belirler. 0-100 gibi rakamsaldır.
                var item = 0;     //Listenin hangisinden başlanapını belirler 0 ilk <li> den başlar.
                var items = $('#caption li').length;
                var time = 1000;
                var delay = 50;
                var wait = 4000
                $('#showCaption').css('width', ($('#caption').width() + 20));
                function tickInterval() {
                    if(item < items) {
                        var text = $('#caption li:eq('+item+')').text();
                        type(text);
                        text = null;
                        var tick = setTimeout(tickInterval, time);
                    } else {
                        if(repeat == 1) {
                                        ch = 0;
                                        item = 0;
                                        tickInterval();
                                    } else {
                                        clearTimeout(tick);
                                    }
                    }
                }
                function type(text) {
                    time = delay;
                    $('#showCaption').html(text.substr(0, ch++));
                    if(ch > text.length) {
                        item++;
                        ch = 0;
                        time = wait;
                    }
                }
                var tick = setTimeout(tickInterval, time);
            });
            </script>
            <style type="text/css">
                #caption {
                    display: none;
                }
                #showCaption{
                    font-family:Courier New;
                    font-size:20px;
                    color:#000;
                    font-weight:bold;
                    width:350px;
                    min-width:350px;
                }
                /* İhtiyaca göre düzenlenmiş css dosyasıdır. Kendinize göre düzenleyebilirsiniz */
            </style>
    </head>
    <body>
        <ul id="caption">
            <li>Birinci İçerik.</li>
            <li>İkinci İçerik.</li>
            <li>Üçüncü İçerik.</li>
            <li>Dördüncü İçerik.</li>
            <li>Beşinci İçerik.</li>
            <li>Altıncı İçerik.</li>
            <li>Yedinci İçerik.</li>
            <li>Sekizinci İçerik.</li>
            <li>Dokuzuncu İçerik.</li>
            <li>Onuncu İçerik.</li>
        </ul>
            <div id="showCaption"></div>
    </body>
</html>





Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



Yorum Gönder Blogger

 
Top