Diskuze: "Slide in" obsahu
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Neaktivní uživatel:16.4.2016 18:54
Dle meho nazoru to postav asi takhle, nakde na strance musis mit element, co bude mit libovolnou vysku ale na sirku musi byt pozicovan tak, aby prilehal na alespon jednu stranu okna, z te strany ze ktere bude neco vyjizdet, nastav mu overflow hidden, abys mohl slidovat i z prava a neroztahovalo ti to obrazovku scrollem.... pak si musis udelat eventlistener na scrollovani po obrazovce, v te funkci na scroll budes jen kontrolovat jestli jsi uz doscrolloval do pozice, ve ktere se objevi napriklad prvnich X pixelu toho slidovaciho DIVu ...
Tak a ted jak urcis pozici toho slidovaciho DIVu, pouzijes vlastnost offsetTop - pozor ale na to, ze ta vraci pouze offset k parentovi ... tedy pokud rodicem slidovaciho divu nebude body, neurcis to spravne, chce to teda napsat rekurzivni funkci, ktera se propocita offsetama az na offset posledniho rodice, co je zaroven potomkem body ... snad je to srozumitelne.
Diky tomuhle ziskas pozici horniho rohu slidovaciho DIVu (muzes k tomu pricist treba tretinu vysky toho divu, aby to neslidovalo moc brzo).
Pomoci vlastnosti window.scrollY zase zjistis kolik uz uzivatel nascrolloval.
Takze jinak receno, jakmile nascrolluje tolik, aby se to shodovalo s offsetem (absolutnim) toho tveho elementu, spustis nejakou smycku a zacnes posouvat obsah slidu do obrazovky, muzes pouzit requestAnimationFrame, setInterval (ten spis ne), nebo setTimeout(ten spis, ale ta prvni moznost je mnohem lepsi)...
Samo ze jQuery ma na tohle svoje funkce a property, ale to verim, uz zvladnes dohledat v dokumentaci nebo pomoci googlu.
Pokud bys chtel neco vic rozebrat jen napis. 
Neaktivní uživatel:17.4.2016 22:46
https://jsfiddle.net/…ll/y6ewa6n2/ - zascrolluj hodne dolu
Snad tohle bude stacit, je to jen pro ukazku, pokud to myslis vazne, budes muset
mit jeste spoustu veci na doplneni, napriklad, jakmile vyjedu zase nahoru (byt
jenom o kousek), chce to vsechny slidery, ktery uz jsou zase dole pod obrazovkou
postavit na svoji defaultni pozici, aby pak mohli zase prijet donekonecna ... a
podobne.
Ja tam delam dve zajimavy veci:
- getComputedStyle - tim ziskavam styly ze stylopisu, protoze inline style neni nastaveny, tak si ho prenastavim, aby se mi s tim dobre pracovalo.
- overflow : hidden ... u sliderovaciho obalu je to nutnost, pokud budes prijizdet zprava, tak abys schoval element za pravej ram obrazovky a pak ho posunul doleva, na to urcite potrebujes zakazat overflow... on by ti jinak napravo a dole, roztahnul body, zejo... a to nechces.
Pokud ale chces nasadit tuhle vec na skutecnej web a ocekavat od toho vykon a spolehlivost, sahni po uexistujicim pluginu knhovne .. treba ja jsem narazil na tohle http://codepen.io/…ne/pen/KiHDa ... a na gitHubu jich budou desitky, ale ja mam pocit, ze tebe spis zajimalo, jak si to udelat po svem ... takze have fun
+20 Zkušeností
+2,50 Kč
Zobrazeno 4 zpráv z 4.