Autor Zpráva
marian80
Profil
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
marian80:
Zafixovaný objekt se dá velmi jednoduše vyrobit s position: fixed;
Ukázka
Kód
marian80
Profil
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
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
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
ďakujem za rady. Už som to urobil.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0