Autor | Zpráva | ||
---|---|---|---|
marian80 Profil |
#1 · Zasláno: 3. 1. 2020, 22:48:50
Je možné pomocou JS a CSS urobiť efekt ako je v mobilných aplikáciách:
Napr. je zobrazený detail reštaurácie, hore obrázok, niekde cezeň názov a adresa, pod ním popis. Keď sa prstom posúva popis hore, postupne sa obrázok schováva a názov sa presúva hore na obrazovku. Nie je to skokovo, ale hladko-na základe toho ako sa posúva prstom po obrazovke, ak sa posúva smerom dole, tak zase sa obrázok postupne zobrazuje (opacity) a názov sa opäť postupne posúva na svoje pôvodné miesto. Je vôbec niečo také možné urobiť za pomoci javascriptu a css? Ďakujem. |
||
Keeehi Profil |
#2 · Zasláno: 3. 1. 2020, 23:47:05
|
||
marian80 Profil |
#3 · Zasláno: 4. 1. 2020, 08:07:11
Keeehi:
Áno, to viem. Ide mi o iné, ako postupne posúvať objekt alebo ho postupne schovávať na základe ťahania po obrazovke z roka hore. |
||
lopik Profil |
#4 · Zasláno: 4. 1. 2020, 08:45:43
marian80 [#1]:
Cez CSS sa dá ten plynulý pohyb urobiť cez vlastnosť transition (www.w3schools.com/css/tryit.asp?filename=trycss3_transition1) avšak na to, aby sa Vám menil výzor nejakého divu, potrebuje mať JS, ktorý Vám zmení class daného id prvku. Ukážka nižšie: window.onscroll = function() {myFunction()}; var header = document.getElementById("rt-top"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } v tomto prípade má div id="rt-top", class="header" keď odscrolujete zmení class na "header sticky" |
||
marian80 Profil |
#5 · Zasláno: 4. 1. 2020, 09:42:31
lopik:
Aj toto chápem a vedel by som urobiť. Neviem ale ako skombinovať transition s pohybom po obrazovke - scrolovaním. Ak použijem Váš kód, tak ak sa posunie obrazovka tak sa zmení class prvku hneď naraz (aj keď plynule). Asi bude najlepšie ukázať príklad ako je to v aplikácii v mobile: www.perpex.eu/video.mp4 Chcem vytvoriť podobný efekt posunu headeru, menu, schovanie obrázku - podľa toho ako budem posúvať obrazovku prstom (myšou). |
||
marian80 Profil |
#6 · Zasláno: 4. 1. 2020, 13:30:49
ďakujem za rady. Už som to urobil.
|
||
Časová prodleva: 4 roky
|
0