Avatar
adder
Člen
Avatar
adder:

Zdravím,

http://jsfiddle.net/8uLk6yb3/4/ mám problém s animation-delay. Nevím, jak to uspořádat tak, aby se každej box zobrazoval postupně. V 0s 1. box, v 1s 2. box a v 2s 3.box. Pokud budete vědět, tak děkuji za radu. Mám s tím celej den problém i každej prohlížeč si to dělá, jak se mu zachce, se mi zdá. :-D Hezkej večer přeji. :)

Odpovědět 8.9.2014 19:30
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na adder
Honza Bittner:

Nejdříve sem postni tvé verze - nevadí že je to špatně. Poté ti já, či někdo jiný, pravděpodobně poradí, co děláš špatně a navedem tě na správnou cestu. :)

Nahoru Odpovědět 8.9.2014 20:05
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
adder
Člen
Avatar
Odpovídá na Honza Bittner
adder:

http://www.homolamartin.cz/ btw. velká inspirace u tebe :) snad nevadí )

<body>
   <header>
      <h1>H</h1>
      <span id="m">M</span>
      <p>The whole web presentation is coming soon.</p>

      <div id="social-media">
         <a id="li" href="https://www.linkedin.com/in/homolamartin" target="_blank"><i class="fa fa-linkedin fa-3x"></i></a>
         <a id="fb" href="https://www.facebook.com/martihom1993" target="_blank"><i class="fa fa-facebook fa-3x"></i></a>
         <a id="tw" href="https://twitter.com/martihom1993" target="_blank"><i class="fa fa-twitter fa-3x"></i></a>
      </div>

   </header>

</body>
header {
        text-shadow: 2px 2px 3px rgba(22, 117, 171, .5);
        color: #133a51;
        width: 100%;
}
header > h1 {
        font-size: 15em;
        text-transform: uppercase;
        position: relative;
        -webkit-animation: showH 2s;
    -moz-animation: showH 2s;
    -o-animation: showH 2s;
    animation: showH 2s;
}
@-o-keyframes showH{
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
@-moz-keyframes showH{
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
@-webkit-keyframes showH{
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
@keyframes showH {
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
header > #m {
        font-size: 6em;
        position: relative;
        top: -140px;
        left: -3px;
        text-transform: uppercase;
        -webkit-animation: showM 2s;
    -moz-animation: showM 2s;
    -o-animation: showM 2s;
    animation: showM 2s;
}
@-webkit-keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
@-o-keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
@-moz-keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
@keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
header > p{
        position: relative;
        top: -150px;
        font-size: 1.4em;

        -webkit-animation: show 3s;
    -moz-animation: show 3s;
    -o-animation: show 3s;
    animation: show 3s;
}
@-webkit-keyframes show{
        from {opacity : 0;}
        to {opacity : 1;}
}
@-o-keyframes show{
        from {opacity : 0;}
        to {opacity : 1;}
}
@-moz-keyframes show{
        from {opacity : 0;}
        to {opacity : 1;}
}
@keyframes show {
        from {opacity : 0;}
        to {opacity : 1;}
}
div#social-media {
        margin: 0 auto;
        position: relative;
        top: -130px;
}
div#social-media a i.fa {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        display: inline-block;
}
div#social-media {
        -webkit-animation: show 3s;
        -moz-animation: show 3s;
        -o-animation: show 3s;
        animation: show 3s;

        -webkit-animation-delay: 2s;
        animation-delay: 2s;
}
a{
        color: #24272f;
        -webkit-transition: color 0.25s linear;
        -moz-transition: color 0.25s linear;
        -o-transition: color 0.25s linear
        transition: color 0.25s linear;
}

a#li:hover,
a#li:focus,
a#li:active {
        color: #1884bb;
}
a#fb:hover,
a#fb:focus,
a#fb:active {
        color: #3f5c9a;
}
a#tw:hover,
a#tw:focus,
a#tw:active {
        color: #55acee;
}
Nahoru Odpovědět 8.9.2014 21:02
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
adder
Člen
Avatar
adder:

ale tu mi to funguje, ale chtěl bych, aby se ikony sociálních medií zobrazovaly postupně.

Nahoru Odpovědět 8.9.2014 21:04
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na adder
Honza Bittner:

Nebude lepší to udělat v JS? CSS na to vhodné moc není, tím neříkám že to nelze, jelikož tam to je spíše pro účely jako hover etc... :P

Nahoru Odpovědět  +1 8.9.2014 22:07
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
adder
Člen
Avatar
adder:

Netuším, jestli to bude lepší(možná jednodušší).. :) ale chtěl jsem zkusit přes CSS :) jsem dnes viděl tohle. http://stuffandnonsense.co.uk/…dmanimation/ ještě se trochu pohrabu v kódu a zkusím to znova. :) ale díky, že ses na to mrknul :)

Nahoru Odpovědět 8.9.2014 22:29
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na adder
Honza Bittner:

Né tak jakože víš co - to JS by bylo prostě vhodnější použít a je pořád více jisté, že to půjde na více PC než u CSS3.. :P

Avšak jestli se nepletu, tak je nějaká vlastnost pro nastavení začátku animace, respektive zpoždění od 0... zkus to pogooglit.

Nahoru Odpovědět  +1 8.9.2014 22:57
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na adder
Samuel Illo :

na oneskorenie je animation-delay, či?

Nahoru Odpovědět 9.9.2014 12:12
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
adder
Člen
Avatar
adder:

ano, použil jsem to zde http://jsfiddle.net/…/8uLk6yb3/5/ , ale nefunguju je to tak, jak má. nejspíš špatně zapsané )

Nahoru Odpovědět 9.9.2014 13:52
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na adder
Honza Bittner:

Animaci aj delay máš dobře, avšak ty máš na počátku - načtení dokumentu - pořád ten div viditelný, poté nastane animace, která začíná od opacity 0, tudíž se ti zneviditelní a postupně přechází na opacity 1, kde už máš plnou viditelnost.

Musíš to tedy upravit tak, že divu nastavíš opacity 0 a ještě přidáš, že div po animaci zůstane tak, jak skončila...

Nahoru Odpovědět  +1 9.9.2014 14:54
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na adder
Denis Homolík (Alfonz):

Nejjednodušeji to uděláš tak, že postupně ty boxy budeš zobrazovat(změna display z none na display). A všem těm boxům dáš vlastnost

transition: 2s all;
Nahoru Odpovědět  +1 9.9.2014 16:04
Vše je možné, dokud si to myslíte!
Avatar
adder
Člen
Avatar
adder:

hehe, díky za navedení. :) už to jede - http://jsfiddle.net/…/8uLk6yb3/9/

Nahoru Odpovědět 9.9.2014 17:22
I’m going to lay this brick as perfectly as a brick can be laid.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.