Autor Zpráva
markusio
Profil
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
Profil
Přidejte odkaz na živou ukázku. Různé věci se mohou různě sekat v různých prohlížečích. Takže těžko obecně radit.

Jak jsem řekl na mozille je to perfektní na chromu a opeře se to seká.
Používejte prosím interpunkci.
markusio
Profil
Str4wberry

ukázka zde: http://michalbounla.cz/MB2.0-code/eng/
joe
Profil
markusio:
Pro začátek bych se podíval do JavaScriptů a začal správně používat jQuery.
Pak bych se podíval, co všechno škodlivého se děje při skrolování - proč animuješ s elementama, které nejsou vidět? Proč tam máš tolik zbytečně fixně pozicovaných elementů?

Mít v kódu něco jako PR     JECTS asi taky není ideální, myslíš, že vyhledávače si z toho vykouzlí slovo "projects"?


Ten web mi při skrolování v Chrome vytížil procesor na 70 %.
markusio
Profil
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
Profil
markusio:
Co se týká přidávání a odebírání tříd, tam problém nebude, zas tak jsem to nezkoumal. Zkrátka a jednoduše - zjednoduš to tak, aby se měnily a nastavovaly všechny vlasnosti na element až tehdy, kdy to je nutné. Tj. neměň CSS vlastnosti elementům, které nejsou ve viewportu.

fixně pozicované elementy myslíš konkrétně co?
Tím myslím elementy, které jsou pozicované fixně, tedy position: fixed;

Co se týká slov s  , je to tam na okrasu
Na okrasu to je ve výsledné stránce, v kódu to na okrasu rozhodně není. Nebo myslíš, že někdo bude hledat "Michal Bounla pr jects"? Proč nemáš v kódu slovo projects zapsáno normálně, ale máš tam pr  jects.
markusio
Profil
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
Profil
markusio:
Proč má #gear šířku 100 %? Když v tom máš jenom obrázek o daleko menší velikosti? A proč má řada elementů pod sebou (v kódu) fixní pozici. Nepřijde mi to vůbec šťastné řešení. Udělal bych fixní kontejner a ostatní prvky dal dovnitř, pak nemusí být fixní.

Je to problém, když mám tolik elementů fixních?
Podle mých zkušeností, v Chromu to problém docela je.

protože každé písmeno "o" je nahrazeno obrázkem toho kolečka
To vidím, ale "nahrazeno" má být až při zobrazení, v kódu bych ho stále nechal, není důvod mrvit slova jen proto, že mají ve výsledku vypadat jinak. Písmenko "o" můžeš JavaScriptem nahradit za něco jiného.
markusio
Profil
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:
AB<div id="gear" class="on"></div>UT

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
Profil
markusio:
Co se týká slov "projects" atd., jak na to budou reagovat prohlížeče, když tedy nahradím "o" za obrázek
Musíš to nahradit až JavaScriptem... Tzn. JavaScriptem si to dej třeba do takového stavu, jako jsi to měl předtím, než jsi to upravil teď :)

Tak, "#gear" divy opraveny, máš pravdu, je to lepší :)
Sice nemá šířku 100 %, ale pořád má fixní pozici. Lepší bude, když místo čarování a zkoušení, si přečteš jak se v CSS pozicuje a pak to změníš.
Chamurappi
Profil
Reaguji na markusia:
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)?
Proč by ne? Element <span> je řádkový, nezpůsobuje zlom ani mezeru, nečekal bych, že by s tím měl nějaký vyhledávač problém.


Reaguji na joa:
JavaScriptem si to dej třeba do takového stavu, jako jsi to měl předtím, než jsi to upravil teď :)
To mi přijde jako špatný nápad. Když si to označím a zkopíruji, nebo vytisknu, nebo nechám přečíst hlasovou čtečkou, jak to dopadne?

není důvod mrvit slova jen proto, že mají ve výsledku vypadat jinak
Ale <span> přeci slova nemrví.
markusio
Profil
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
Profil
Reaguji na markusia:
při visibility by místo zmizelo
Nezmizelo. Zopakovat základy. Vlastnost opacity nepodporují starší (dosud používané) prohlížeče.
Asi bych ten <span> spíš relativně odpozicoval doleva, daleko za hranice monitoru, tam ho už nikdo neuvidí, ale struktura textu zůstane neporušena.
markusio
Profil
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.
joe
Profil
Chamurappi:
span nebo jiný řádkový element samozřejmě stačí :-) už se mi to trochu smíchalo dohromady, na co jsem odpovídal a na co jsem měl odpovědět.

Tím JavaScriptem jsem myslel to, že bych z About udělal JavaScriptem Ab<span>o</span><span class="gear"></span>ut, ikdyž v tomto případě to je asi zbytečné a dá se to napsat rovnou.

markusio:
Ano, je to lepší, jinak ale element #introText má fixní pozici, proč další elementy uvnitř něj, máš opět fixní , když už, tak absolutní.
fiaales11
Profil
joe, Chamurappi:
Tak! Trochu jsem to upravil, nekoukejte teď hlavně na kód, ale spíš na to sekání. Zajímá mě, jestli se to u vás to rolování zlepšilo.

Vaše odpověď

Mohlo by se hodit

Příspěvky nesouvisející s webem budou odstraněny.

Prosím používejte diakritiku a interpunkci.

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