| 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: 7 let
|
|||
0