WN

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 18:04.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson