WN - Delay på text via CSS

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Delay på text via CSS (https://www.wn.se/forum/showthread.php?t=1060274)

Mr.Bennet

2013-12-25 21:55

Delay på text via CSS

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:

Kod:

-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

2013-12-25 22:04

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

Mr.Bennet

2013-12-25 22:10

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

2013-12-25 22:37

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

Mr.Bennet

2013-12-25 22:50

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

2013-12-26 01:50

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

Kod:

.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

2013-12-26 12:29

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

2013-12-26 13:19

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

2013-12-26 13:27

Hej Björn!

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

altruixm

2013-12-26 14:47

Citat:

Ursprungligen postat av Mr.Bennet (Inlägg 20483630)

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

Alla tider är GMT +2. Klockan är nu 08:11.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida