Autor Zpráva
Jakub Rychlý
Profil
Dobrý den,
ještě moc s JS neumím a chtěl bych se zeptat jak udělám hýbaní odstavců jako tomu je zde: servery.stylecraft.cz
Že tam vždy přiletí nějaká část textu. A další věcí je jak udělám to že když kliknu na kontakt tak mě to posune do určité častí stránky (index)
Díky ;)
leorond
Profil
Ahoj, já jsem na tyto animace použil WOW. Dobře použitelný a snadná aplikace

Na plynulí posuv na stránce používám JS

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});



Nebo můžeš použít jen CSS pro ty animace, to by myslím šlo také ale na co vymýšlet něco co už někdo vymyslel a funguje to dle mého názoru celkem dobře.


Ještě k tomu scriptu, pohybovat se poté můžeš tak že použiješ odkaz například

<a href="#paticka"></a>

Script tě plynule posune směrem dolů na tebou vybraný obsah.

Rychlost posuvu ovlivníš snadno

scrollTop: target.offset().top
        }, 1000);



Zde můžeš kouknout jak to poté vypadá v praxi HERE


Tady můžeš kouknout jaké to umí animace animate.css
Jakub Rychlý
Profil
leorond:
Ahoj ještě mám jednu otázku...jak zakomponuji to první do odstavců? Díky
leorond
Profil
Je to celkem jednoduché, tady máš menší návod + JS a CSS který používám já

Do hlavičky webu umístíš odkaz na animate.css => animate.css download <=

<link href="css/animate.css" rel="stylesheet" type="text/css">

do patičky umístíš odkaz na => wow.min.js download <=

        <script type="text/javascript" src="js/wow.min.js"></script>
        <script type="text/javascript">
           new WOW().init();
        </script>

poté umístíš někam kde potřebuješ toto

    <div data-wow-delay="0.5s" class="span3 wow fadeIn">
        <p>test</p>
    </div>

místo <p> paragrafu můžeš použít například <div> nebo nadpis, obrázek,...

data-wow-delay="0.5s" => čas po kterém se animace spustí
class="span3 wow fadeIn" => název animace -> animate.css


Bude ti to takto stačit?

Můžeš si to vyzkoušet třeba v živé ukázce ;) Živá ukázka
Jakub Rychlý
Profil
Zdravím,
ty efekty mi na webu nefungují a živá ukázka blbne

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: