Jak zrobić animację pojawiający się tekst ?

pytanie zadane 24 sierpnia 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Witam, Jest tekst, którego czcionkę zaimpletowałem jako <link="adres>" i skopiowałem kody css i jest czcionka jaką chciałem. Problem pojawia się wówczas, gdy chcę zrobić animację tekstu (pojawia się powoli po uruchomieniu przeglądarki). Mianowicie wstawiłem do @keyframes parametry koloru (tak dla próby) i zamiast animacji zmiany koloru tekstu mam animację całego pudełka div w którym ów tekst się znajduje. Co można zrobić by animacja dotyczyła tylko liter tekstu a nie tla czy pudełka (jak kto woli).

komentarz 24 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Może umieść te litery w jeszcze jednym pudełku (przeźroczystym) i niech animacja wykonuje się na tym właśnie zagnieżdżonym pudełku.

komentarz 24 sierpnia 2016 przez DariuszH Gaduła (3,100 p.)

spoko działa. Dzięki. Wiesz może jak opóżnienie pojawiającego tekstu zrobić w css (wspomnę, że funkcja animation-delay:x sek. nie działa)

komentarz 24 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod HTML i CSS.

Albo możesz w JavaScript nadać klasę z animacją wewnątrz setTimeout(), co umożliwi opóźnienie jej wykonania.

komentarz 24 sierpnia 2016 przez DariuszH Gaduła (3,100 p.)

<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption|Sigmar+One" rel="stylesheet">

</HEAD>
<BODY>

<div id="main">
<div id="text">Q FORMIE </div>

</div>
<div id="centrum"></div>

</BODY>
</HTML>

-----------------------------------------------------------------------------------------------------------------------------------

#text{

    padding-top:29vh;
    color:white;
    font-family: 'PT Sans Caption', sans-serif;
    text-align:center;
    font-size:22vh;
    animation-name: example;
    animation-duration: 3.5s;


}
@keyframes example {
    from {opacity:0;}
    to {opacity:1;}
}

komentarz 24 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Hmm... nie wiem dlaczego nie działa - nie jestem dobry w animacjach CSS.

Natomiast ja bym zrobił coś takiego: http://codepen.io/ChrissP92/pen/grNwKK

Nie wiem czy to jest dobre rozwiązanie - pewnie najlepiej to zrobić w samym CSS - ale (póki nie znajdziesz lepszego) działa.

komentarz 1 września 2016 przez DariuszH Gaduła (3,100 p.)

Dobre i to. Ale wyszedłem z założenia, iż robiąc strony najpierw i w ogóle najlepiej nauczyć sie najprostrzych rozwiązań i sposobów :) Tzn. Jak najmniej programowania (w tym przypadku JS). Nie znaczy to, że unikam nauki języków :)

1	komentarz 1 września 2016 przez Czort Nałogowiec (32,500 p.) visibility też można animować + do opóźnienia animacji służy animation-delay Demo: http://codepen.io/anon/pen/mAdJpX

komentarz 3 września 2016 przez DariuszH Gaduła (3,100 p.)

Czy wiesz może jak zrobić by klikając w ikonkę wyskakiwał w tym samym miejscu film, Gdy kliknę pompki to pojawia się film z pompkami w tym samym miejscu na tej samej stronie i analogicznie z brzuszkami, przysiadami :)

1 odpowiedź

odpowiedź 3 września 2016 przez dawid9692 Nowicjusz (160 p.)

Proponuje rozwiązanie jQuery

zmienna string - tekst ktory bedzie sie pojawiac

zmienna dest do jakiego diva na stronie będzie on wrzucany

        var string = "Hello World";
        var q = jQuery.map(string.split(''), function (letter) {
            return $('<span>'+letter+'</span>');
        });

        var dest = $('#idDiv');
                var c = 0;
                var i = setInterval(function () {
                    q[c].appendTo(dest).hide().fadeIn(500);
                    c += 1;
                    if (c >= q.length) clearInterval(i);
                }, 150);