Autor Zpráva
dan55
Profil
Ahoj, potřeboval bych nakopnout, jak udělat to, co je vidět v ukázkové animaci na tomto odkazu: www.celtra.com/ad-formats, sekce SWELL.

To znamená jakoby nějaký element mít zobrazený z třetiny (horní a spodní část je trochu ořezána) a po scrollování (tapování) směrem dolů nebo nahoru se buď element zvětšuje nebo zmenšuje.

Pod čím to hledat? Jak postupovat? Nechci řešení, chci jen nakopnout jak nejlépe na to.

Díky moc za pomoc!
Chamurappi
Profil
Reaguji na dana55:
Pod čím to hledat?
JavaScript, základy práce s událostmi, změna stylů.

Jak postupovat?
Při onscroll určíš, jak má být banner vysoký.
Na mobilech podobné výmysly fungují většinou blbě – třeba Safari ve starším iOSu nehlásí onscroll dřív, než se rolování zabrzdí, takže to pak skáče.
A v chystaném iOS 9 bude nativní podpora pro adblocky, takže čím agresivnější reklamní formát vymyslíš, tím víc poškodíš celý trh s reklamou :-) (což je jeden z důvodů, proč bych to na místě provozovatele webu nedovolil nasadit)
Mimochodem, v mém telefonu nejde na celtra.com vůbec rolovat, takže jsem se na tu jejich nádheru ani nemohl podívat. Tyhle firmy fakt žijí v jiném světě…

po scrollování (tapování) směrem dolů
Tap je ťuknutí. Ještě jsem neslyšel, že by se rolování na mobilu říkalo jinak než na desktopu.
dan55
Profil
Chamurappi:
třeba Safari ve starším iOSu nehlásí onscroll dřív, než se rolování zabrzdí, takže to pak skáče.
Jojo, četl jsem, že to při scrollování uzamkne DOM, každopádně na novém iOS jsem to zkoušel a běží to v pohodě.

takže čím agresivnější reklamní formát vymyslíš
bohužel, nevymýšlím to já, je to nápad project managera, každopádně mi přijde lepší dát na web jeden takový banner než tři menší (což tak doposud bylo)

Tap je ťuknutí. Ještě jsem neslyšel, že by se rolování na mobilu říkalo jinak než na desktopu.
popletl jsem si to.. ten onscroll bude stačit

Kdyby někoho zajímalo, jak to vypadá, tak si spusťte v mobilu tohle: http://dev.tescz.eu/swell/main.html (zatím jsem to nějak neladil, jen přes ten simulátor mobilu v Chrome)
Chamurappi
Profil
Reaguji na dana55:
Kdyby někoho zajímalo, jak to vypadá, tak si spusťte v mobilu tohle
Nefunguje to úplně ideálně. Pokud se mi podaří přejet hranici, kdy má být banner celý vidět, výšku nezaktualizuješ.
A načítá to zbytečně jQuery. Bez něj by to šlo napsat cca takhle:
addEventListener("scroll", function()
{
  if(!window.reklama) return;
  var adSize = innerHeight - reklama.getBoundingClientRect().top - 20;
  reklama.style.height = Math.min(Math.max(adSize, 50), 610) + "px";
}, false);
dan55
Profil
Chamurappi:
Zkusím to ještě pomocí toho kódu, co jsi poslal ty. Ten funguje bezvadně! Díky moc :).

Jinak jQuery na webu stejně používám, tak o to by už nešlo.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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