[Mr.Bennet]

Hej!

Hur gör man så att text syns med x antal sekunder/millisekunders delay? Från det att hemsidan laddas.

Har relativt bra koll på CSS, men detta är nytt och konstigt nog hittar jag inget om det på G. Måste vara något jag missar.

Provade:

-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;
-webkit-transition: -webkit-transform 500ms ease;
transition: -webkit-transform 500ms ease;
-webkit-font-smoothing: antialiased;

Har ni något förslag?

Over and out

[Tsarraz]

Först varför?
Sen borde det vara enklast med javascript typ jquery

[Mr.Bennet]

Varför vad? Varför jag ska köra CSS?

Jquery har jag ingen direkt kunskap av själv, de är begränsade till php, html och css.

Jag kör med Wordpress. Något förslag på hur man gör?

[Tsarraz]

Nej varför du behöver en delay på css:n förståss

[Mr.Bennet]

Hej igen,

Det är att texten ska falla in för besökaren med en viss delay. Som du kan se här http://xn--vskoronline-l8a.com/damvaskor/

[pelmered]

Du får göra det med custom-annimation och keyframes. T.ex. såhär:

.delayed-fading-text {
        opacity: 0;
        animation: fadeIn 3s linear 5s;
        -webkit-animation: fadeIn 3s linear 5s;
}

@keyframes fadeIn
{
    0%  {opacity: 0;}
    100%  {opacity: 1;}
}
@-webkit-keyframes fadeIn
{
    0%  {opacity: 0;}
    100%  {opacity: 1;}
}

Med den här koden är animationens längd 10 sekunder vilket gör att texten börjar fadea in efter 5 sekunder och har når 100% opacitet på 3 sekunder, vilket innebär att texten får 100% opacitet 8 sekunder efter att sidan laddades.

Notera att koden är otestad skriven ur minnet, men den bör fungera.

[Mr.Bennet]

Hej!

Strålande, tack!

Jag vill dock inte att texten ska försvinna efter en viss tid. Utan jag vill att texten ska komma in efter 1 sekund och att själva fadein tar ca 500ms. Försökte mixtra till mig detta men fick det inte att fungera, kanske inte fick rätt på cachen.

[Björn]

Känns som det här är bättre att använda javascript som tidigare nämnt, så du kan se när resterande element laddats och få det i rätt tid för besökarens upplevelse.

[Mr.Bennet]

Hej Björn!

Om man kör Wordpress. Hur ska man göra då? Har ingen kunskap om javascript.

[altruixm]

Ursprungligen postat av Mr.Bennet

Om man kör Wordpress. Hur ska man göra då? Har ingen kunskap om javascript.

Lägg koden i någon av temafilerna t.ex. home.php