Lagy/sekaní při rolování (Chrome a opera)

Ahoj,
dělám na svém portfoliu, zatím je v testovací verzi.

Mám takový problém s rolování v opeře a chromu, seká se to nebo spíš trhá zatím co v exploreru to jde dobře a v mozille je to krásně plynulé. Mám tam samozřejmě pár scriptů (na parallax efekt), dále pak sepsanej script, který přidává nové třídy divům, pokud splní určité podmínky. Jak jsem řekl na mozille je to perfektní na chromu a opeře se to seká. Nevíte co s tím?

Str4wberry

ukázka zde: http://michalbounla.cz/MB2.0-code/eng/

joe:
Proto prosím o radu ;) Podle mě je problém hlavně s přidáváním tříd, že je to tam tak časté, proto se to seká. Ale nevím jak jinak úsporněji přidávat třídy, jako teď (podnímka, když "něco" tak se přidá třída...).

O těch elementech co se animujou vím, skusím něco udělat a fixně pozicované elementy myslíš konkrétně co?

Co se týká slov s  , je to tam na okrasu, mělo by to stejnýefekt jako kdyby to byl obrázek, ale samozřejmě můžu udělat tu mezeru pomocí CSS.

joe:
Ok, zjednodušil jsem to, odebral jsem pár java scriptů, a udělal jsem některé prvky tak, aby se neanimovali, když nejsou vidět.

Je to problém, když mám tolik elementů fixních? Chci, aby to fungovalo nějak takto, že se hezky jednotlivé contenty překrývají nebo znáš nějaký lepší způsob, jak to udělat, než přes fixed position?

protože každé písmeno "o" je nahrazeno obrázkem toho kolečka. Nevím jak to jinak udělat. Napadlo mě normálně napsat "projects" a písmeno "o" schovat pomocí CSS třeba ve <span> ale to také nebude potom brát slovo jako takové, že (pr<span>o</span>jects)?

joe:

Tak, "#gear" divy opraveny, máš pravdu, je to lepší :)

Takže pokud to chápu, chceš abych udělal jeden fixní 100% div a do toho vložit vše co chci, aby bylo fixní? Dobře, to by dalo smysl u některých divů, pak by nemuseli být všechyn fixní, ale co třeba ty co mám nastaveny tak, že mají absolutní hodnotu, ale jakmile se dostanou do viewpointu, tka se zmení na fixní? Jak to mám řešit tam?

Co se týká slov "projects" atd., jak na to budou reagovat prohlížeče, když tedy nahradím "o" za obrázek, už jsem něco zkusil a funguje, ale když se podívám do finálního zdrojového kódu, tak je to napsané takhle:

Jak to bude vyhledávače vyhledávat? Podle původního html, kde je ještě slovo celé oddělené od javascriptu nebo až to co se zobrazí uživateli?

Ještě poznámka: když to ten script nahradí to "O" tak se mi to slovo dá dohromady, takže to je například slovo ABOUT "ABUT", nevím jak udělat mezeru. Pokud je to tak, že vyhledávače hledají podle původního html, tak mě napadlo, že to bude takto: <div id="introText">ABOUT</div> a pomocí javascriptu se ten div změní na: <div id="introText"> AB &nbsp; <divid="gear"></div> &nbsp; UT</div> šlo by to?

joe, Chamurappi:

Teď nevím, co je tedy nejlepší.

Chamurappi:
Myslíš tedy, že nebude probém udělat: AB<span>O</span>UT a třeba pomocí opacity (aby tam stále zůstala mezera/místo na to kolečko, při visibility by místo zmizelo) a bylo by to v pořádku?

Chamurappi:
Ups! Omlouvám se, máte pravdu, špatně jsem se vyjádřil, měl jsem na mysli, že u opacity je jen neviditelný, ale je tam, zatím co u visibility obsah úplně zmizí, ale zabere tak místo, jak jste již psal, ale to teď není podstatné.


Udělal jsem to tedy na tom prvním "ABOUT", jestli se prosím můžete podívat, jestli je to tak v pořádku. Mám to napsané takhle:
<div id="introText">AB<span style="padding:0 20px; visibility:hidden;">O</span>UT</div> a potom dole ještě přidané to kolečko, šl oby to tak?

Dodatek: když zkouším vyhledat slovo "ABOUT", najde mi to.