Autor Zpráva
hypot
Profil
Chtěl bych napodobit to, co mají na sciencemag.cz (v článcích, ne na hlavní stránce): když se odroluje stránka téměř až dolů, v dolní části obrazovky zpoza pravého okraje vyjede okénko (s obrázkem a odkazem na jiný článek) a když se stránkou roluje zpět nahoru, okénko zase zajede za pravý okraj.
Mně se podařilo dosáhnout jen poloviny oné funkčnosti: po odrolování o určitou vzdálenost dolů vyjede zprava obrázek, ale když posunuju obsah stránky zpět nahoru, obrázek zmizí bez animace. Technicky to mám takto: v dolním pravém rohu mám přišpendlený DIV (position: fixed; right: 5px; bottom: 5px) a v něm obrázek, který má visibility: hidden. Objevení obrázku je řízeno touto animací:
@keyframes vyjet {0% {transform: translateX(110%);} 100% {transform: translateX(0%);}}
a ta animace je spuštěna po odrolování stránky o 350 pixelů přidáním třídy vyjet (v níž je (totožné) jméno animace a visibility: visible):
window.onscroll = function() {document.getElementById("obr").className = ((document.body.scrollTop || document.documentElement.scrollTop) > 350 ? "vyjet" : "")}
Předpokládám, že logické by bylo animované skrytí zařídit přidáním jiné třídy, která bude obsahovat odkaz na jinou animaci stejnou jako ta předchozí, jen s přehozenými číselnými hodnotami, čili {0% {transform: translateX(0%);} 100% {transform: translateX(110%);}}. Jenže nevím, jak takovou třídu přiřadit, to znamená jak její přiřazení podmínit, aby se projevila jen při rolování zpět nahoru pod hranici 350 px, nikoly od výchozího načtení (kdy scrollTop == 0) po 350px. Nebo jsem to udělal moc složitě a šlo by to jednodušeji? Děkuji za radu.
Chamurappi
Profil
Reaguji na hypota:
Proč používáš animation a ne transition? Chceš animovat jakoukoliv změnu transformu, ne? Takže tvořit nějaké speciální animační scénáře je poměrně ukecaný kanon na vrabce.
Nebo jsem špatně pochopil zadání.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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