| Autor | Zpráva | ||
|---|---|---|---|
| joe Profil |
#1 · Zasláno: 9. 1. 2013, 09:15:56
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 |
#2 · Zasláno: 9. 1. 2013, 18:09:34
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 |
#4 · Zasláno: 10. 1. 2013, 09:06:24
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 |
#5 · Zasláno: 11. 1. 2013, 10:50:22
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 |
#6 · Zasláno: 11. 1. 2013, 11:11:23
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 |
#7 · Zasláno: 11. 1. 2013, 12:01:58
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 |
#8 · Zasláno: 11. 1. 2013, 13:13:57
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 |
#9 · Zasláno: 11. 1. 2013, 13:49:46
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 |
#10 · Zasláno: 11. 1. 2013, 15:19:45
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 |
#12 · Zasláno: 11. 1. 2013, 15:48:49
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 |
#13 · Zasláno: 11. 1. 2013, 16:03:57
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 |
#15 · Zasláno: 11. 1. 2013, 18:18:18
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 :) |
||
|
Časová prodleva: 11 let
|
|||
0