WN - Delay på text via CSS

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

Mr.Bennet

2013-12-26 15:04

Hej igen,

Tack för alla svar.

Tror dock jag kör på CSS. Det är första folden och hemsidan laddar snabbt så tror det ska gå bra.

Vad säger du itisgood? Hur ändrar jag enligt senaste kriterierna?

God fortsättning!

Jimmit

2013-12-26 20:31

Känns onödigt att använda javascript när det inte behövs.

Här har du en tråd som svarar på din fråga: http://stackoverflow.com/questions/1...t-on-page-load

God fortsättning!

Mr.Bennet

2013-12-28 19:27

Den koden fungerade! Men hur gör jag så att fadein börjar efter x antal sekunder? Just nu börjar den bara direkt och tar 2 sekunder att få från 0 till 1 i opacity.

Tack!

Jimmit

2013-12-28 20:09

Snyggast är väl en animation-delay: https://developer.mozilla.org/en-US/...nimation-delay

Alla tider är GMT +2. Klockan är nu 22:41.