Partial Text Fade In with no png shadow

Hmm pomysł podsunął mi kolega z pracy. Jak zrobić pojawianie się tekstu bez cienia w png, nie chodzi mi o pojawienie się całego tekstu naraz, tylko takie jak poniżej… Czasami się jeszcze zawiesz i trochę rozjeżdza, ale napisałem to w parę chwil bez większego rozmyślania nad tym ;]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rozwiązanie jest jednocześnie zawiłe i proste^^. Dzielimy tekst na pojedyńcze litery rozdzielając je spanami, a następnie każdy z nich po kolei animujemy za pomocą opacity. Kod źródłowy, oczywiście jeśli chcemy go użyć do własnych celów, musimy dostosować czas pojawiania się liter, który będzie różny dla różnych czcionek.

$j = jQuery.noConflict();

    text = $j('#content').html();
    newText = '';
    textLenght = 0;


    function makeNewStr(){
        for(p=0;p<textLenght;p++){
            newText += '<span>'+text.substr(p,1)+'</span>';
        }
        return newText;
    }

    function customFadeIn(p){
        $j('#content span:nth-child('+p+')').animate({
            opacity : 1
        }, 700);

        p++;

        if(p<=textLenght){
            fade =  setTimeout("customFadeIn("+p+")",200);
        } 

    }

    function customSlide(leftPos){
        $j('#content').attr('style','left:'+leftPos+'px')
        leftPos--;

        if(leftPos < -350){
            clearTimeout(fade);
            clearTimeout(slide);
            $j('#content span').css('opacity','0');
            leftPos = 190;
            customSlide(190);
            customFadeIn(1);
        } else 
        slide = setTimeout("customSlide("+leftPos+")",30);
    }

    $j(document).ready(function(){
        textLenght = text.length;
        newText= makeNewStr();
        $j('#content').html(newText);
        customSlide(190);
        customFadeIn(1);
    });

About the author

Logos

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>