| Autor | Zpráva | ||
|---|---|---|---|
| Jakub Rychlý Profil |
#1 · Zasláno: 27. 2. 2016, 09:36:26
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 |
#3 · Zasláno: 27. 2. 2016, 13:31:29
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.cssBude ti to takto stačit? Můžeš si to vyzkoušet třeba v živé ukázce ;) Živá ukázka |
||
|
Časová prodleva: 1 měsíc
|
|||
| Jakub Rychlý Profil |
#5 · Zasláno: 7. 4. 2016, 20:08:49
Zdravím,
ty efekty mi na webu nefungují a živá ukázka blbne |
||
|
Časová prodleva: 9 let
|
|||
0