Autor Zpráva
joe
Profil
Ahoj,

chci vytvořit stránku, kde budou obdelníky, plno obdélníků a budou se stále načítat další (pokud se bude skrolovat). Pro představu, něco jako Pinterest. Při najetí na každou položku, se má zobrazit nějaký element - nejlépe animací (podobné to je i na tom Pnterestu, ty tři tlačítka).

Otázka ale je, jak to udělat co nejefetivněji, ten vyjížděcí element nemusí být nutně přímo v HTML každé položky (může být jeden, pro všechny a bude se měnit jeho pozice podle toho, na jaké položce je kurzor).

Ať si s tím hraju jak chci, nemám pořád výsledek, který bych chtěl (nějaká ta plynulost), a i když jsem tady někde psal, že nativní transitions budou rychlejší, teď se mi to tak moc nejeví.

Co tedy zvolit a jak změřit/zjistit, co bude nejefektivnější (na každém PC se mi to totiž chová jinak).

- transitions (na každé položce pro daný element, není to moc efektivní a zpomaluje to skrolování)
- JS hover na každou položku
- JS hover na parenta a položku zjišťovat přes target element?
- JS hover na položku a absolutně pozicovat a přepisovat ten element, co se zanimuje?
- JS hover na parent a absolutně pozicovat a přepisovat ten element, co se zanimuje, podle toho na jaké jsme položce?

Díky :)
Str4wberry
Profil
Jako že na některém PC je rychlejší CSS přechod (animace) a někde JS?

Docela by se hodila živá ukázka, třeba je zrada někde jinde.
joe
Profil
Dobrá, dostal jsem se k napsání příkladů (fungují trochu odlišně):

Který z příkladů vám funguje nejrychleji (mimo ten první:))

1 - bez animací
2 - CSS transitions
3 - JavaScript pro každou položku zvlášť
4 - JavaScript pro parenta (sleduje každé "šustnutí myši" :))

---

Zároveň připojím ještě otázku, jak by se 3 dala napsat jinak, aby se při každém hoveru nevytvářel jQuery objekt, resp. jinak efektivněji? (Přes funkci each?)
Str4wberry
Profil
Zkoušel jsi povolit :hover jenom v případě, že se zrovna neroluje? Ušetřily by se tím zbytečné pokusy o animace a i zřejmě výkonově náročné situace, kdy se roluje a zároveň se do toho má něco animovat.
joe
Profil
Str4wberry:
Díky za tip, jsem trochu skeptický při používání časovače, ale tady to asi zdá se hodně pomohlo. Mohl by někdo prosím vyzkoušet?

CSS transitions

VS.

CSS transitions jen pokud se neskroluje

Na výkonějších PC asi nebude rozdíl moc znát, ale třeba na tom mém poznat je.
Chamurappi
Profil
Reaguji na joe:
Mohl by někdo prosím vyzkoušet?
V Exploreru to nefunguje, takže je to úplně k ničemu.

Použil bych na všechny současně běžící animace jeden časovač, tím odpadne režie s mnoha oddělenými animacemi (která je pravděpodobně vyšší, než rozdíl mezi variantami 3 a 4). Místo měnění margin-top bych vyzkoušel měnit hodnotu (oprefixovaného) transform: translateY().
joe
Profil
Chamurappi:
V Exploreru (v novém taky už transitions fungují) to přece funguje, jen tím, že někdo přijde o efekt, se použitelnost nesníží.

Použil bych na všechny současně běžící animace jeden časovač
Teď přesně nevím, jak bych to měl realizovat a možná ani nechápu jak to myslíš.
Mít stále spuštěný jeden časovač, který bude animovat položky, na které přijedu a zase odjedu?
Nebo jeden časovač jen do doby, dokud všechny animace neskončí a pak vytvářet časovač nový?

transform: translateY()
Tím odříznu Explorer 8 a nižší, pro které bych zase musel použít třeba ten margin.
.
Chamurappi
Profil
Reaguji na joa:
V Exploreru (v novém taky už transitions fungují) to přece funguje, jen tím, že někdo přijde o efekt, se použitelnost nesníží.
V Exploreru nefunguje efekt, který chceš od nás testovat.
Vymlouvat se na nesníženou použitelnost je sice o něco lepší, než tvrdit, že tím prokazuješ uživatelům Exploreru službu, ale pořád je to jen chabá omluva za zbytečnou nekompatibilitu.

Nebo jeden časovač jen do doby, dokud všechny animace neskončí a pak vytvářet časovač nový?
Takhle.

bych zase musel použít třeba ten margin
Ano. To už je jeden if
Netvrdím, že transform bude jistojistě rychlejší, jen říkám, že bych ho na tvém místě zkusil.
joe
Profil
Chamurappi:
V Exploreru nefunguje efekt, který chceš od nás testovat.
Nepsal jsem otestovat v Exploreru, ale ani jsem to nevyvrátil :-) V tomto případě mi o IE nešlo.

Vymlouvat se na nesníženou použitelnost...
Ale kuš :-) Kdo IE má, efekt neuvidí, kdo ne, pravděpodobně ho uvidí, není v tom žádná věda.

(oprefixovaného) transform: translateY()
To vlákno s tím hexagonem jsem hledal, protože teďkon doporučuješ něco moc užvaněného

Takhle.
Pokusím se to dát dohromady, také díky za tip.
Chamurappi
Profil
Reaguji na joa:
Kdo IE má, efekt neuvidí, kdo ne, pravděpodobně ho uvidí, není v tom žádná věda.
Je to zbytečně nedokonalé. Kdybys sám používal Explorer, hodnotil bys situaci stejně? Byl bys rád, že animace nevidíš? Pochybuju. Osobní preference tvůrce webu by neměly poškozovat výsledek.

protože teďkon doporučuješ něco moc užvaněného
Užvanění se jednorázově setře cyklem, který do proměnné dá název vlastnosti s prefixem, pak už budeš používat jen element.style[proměnná] = "…".
joe
Profil
Chamurappi:
Nebo jeden časovač jen do doby, dokud všechny animace neskončí a pak vytvářet časovač nový?
Pochopil jsem z toho, že si musím sám zařídit ono animování?

Kdybys sám používal Explorer, hodnotil bys situaci stejně?
Kdybych používal Explorer, vůbec bych nevěděl, že tam nějaké animace mají být :-) Ve Windows 8 už ty CSS 3 animace jsou, myslím, že pokud je projekt pro mladší generaci, není s tím už pak moc problém.
Ale jinak ano, nebyl bych rád, že tam animace nejsou...


Užvanění se jednorázově setře cyklem
To se setře i v normálním CSS, pokud se používají chytré metody při vývoji.
Chamurappi
Profil
Reaguji na joa:
Pochopil jsem z toho, že si musím sám zařídit ono animování?
Ano. To je přeci snadné.

Kdybych používal Explorer, vůbec bych nevěděl, že tam nějaké animace mají být
Jako tvůrce stránky bys to věděl, když jsi je tam napsal. Vadilo by ti, že tvé dílo nefunguje dokonale v tvém oblíbeném prohlížeči?

myslím, že pokud je projekt pro mladší generaci, není s tím už pak moc problém
Další výmluva. Bereš si na řešení obecného technického problému demografické statistiky…

pokud se používají chytré metody při vývoji
Tyhle „chytré“ metody nejsou standardizované a kdyby se z jedné z nich stal de facto standard (do čehož mají stále hodně daleko), zbrzdí evoluci CSS, protože odstraní symptomy choroby a přestane být nutné ji vyléčit.
joe
Profil
Chamurappi:
Ano.
Dobrá, jen si ještě doplňuji informace k tomu, abych věděl jak přesně na to. Jdu se pustit do toho příkladu.

Jako tvůrce stránky bys to věděl
Ano, ale psal jsem to z pohledu kdybych ty stránky netvořil.

Další výmluva.
Žádná výmluva, to je realita. Je třeba brát situaci takovou, jaká je, nesmíme se pořád ohlížet dozadu, jinak bychom nedali šanci žádné nové technologii a všechno by zůstalo při starém. Bez takového myšlení bychom třeba ještě dnes chodili se starýma mobilama se čtverečkovaným displejem místo dnešních chytrých telefonů.

Tyhle ‚chytré‘ metody nejsou standardizované
Proč by měly být standardizované? Jen ti to usnadní spoustu práce a výsledek je stejný jako normální CSS, jen by ses s ním psal déle :-) Takže žádné užvaněné kódy, ale hezky všechno přehledné a místo
-webkit-transform: rotateY(10px);
-moz-transform: rotateY(10px);
-o-transform: rotateY(10px);
-webkit-transform: rotateY(10px);

napíšeme například jen .rotate(10px); ale ve výsledku získáme ty čtyři řádky a to je cíl ;-)
Chamurappi
Profil
Reaguji na joa:
ale psal jsem to z pohledu kdybych ty stránky netvořil
Na tenhle pohled jsem se tě ovšem neptal.

nesmíme se pořád ohlížet dozadu
Já se přeci ohlížím na současnost, beru situaci takovou, jaká je, ne jaká (někdy možná) bude. Zmiňuješ Windows 8, ten má šestkrát méně lidí než Explorer 7. Zmiňuješ mladou generaci, ale úměra „čím starší uživatelé, tím víc Explorerů“ universálně neplatí. Z té reality si musíš vypíchnout jen menší vzorek, aby odpovídal očekáváním. A vypichuješ ho pravděpodobně podle svého osobního vztahu k prohlížečům a kvůli chuti uplatnit v současnosti nepříliš užitečné vědomosti (znáš transition).

jinak bychom nedali šanci žádné nové technologii a všechno by zůstalo při starém
Technologie není fotbalový tým, ani politická partaj, nepotřebuje bezhlavou loajalitu k tomu, aby uspěla. Nevím, proč bych měl u technologií zvažovat, jestli je nová nebo stará, rozhoduji se jen podle toho, jestli ji potřebuji a jestli může fungovat pokud možno všem. Dávám šanci všemu, co existuje, důležitý je jen výsledek (ve všech prohlížečích).

Bez takového myšlení bychom třeba ještě dnes chodili se starýma mobilama
Vážně? Mně připadá, že rozmach chytrých telefonů má úplně jiné příčiny.
Podobné obecné ódy na moderní myšlení pěli velmi dlouho i zastánci XHTML, včetně extrémně silného přesvědčení, že jejich nadbíhání budoucnosti je pro zářivou budoucnost nutné. Očividně nebylo. Ti, co nadbíhali nejoddaněji, si akorát škodili.

ale ve výsledku získáme ty čtyři řádky a to je cíl ;-)
Definitivní cíl je mít jeden řádek, který bude fungovat všude. Cesta k tomuto cíli vede přes rozšířenou nespokojenost se stavem prefixů v CSS, ne přes rozšířenou spokojenost s CSS preprocesorem. Proto závislost na preprocesorech nepropaguji. (Sám bych je ovšem používal, kdybych si myslel, že mi opravdu usnadní práci.)
joe
Profil
Chamurappi:
Tak nějak nevím s těma animacema, chvíli jsem si s tím hrál, ale jak napojit jeden časovač na více prvků... myslím, že to je trošku složitější, je třeba uchovávat prvky, na které jsem najel a kontrolovat, jestli se animace na tom konkrétním prvku ještě stihne v tom daném časovaci, případně vytvořit nový. Spíš bych z toho vytvořil něco, co by bylo daleko méně efektivní, než ty příklady nahoře :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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