Autor Zpráva
Tolike
Profil
Dobrý den, chtěl jsem se zeptat zda by mi někdo neporadil jak realizovat šílený nápad který mi poslední dobou nedává pokoj..

S tvorbou stránek jsem začal nedávno a doposud jsem děla v html a css. Design se mi ale vždy povedl neživý, a tak jednoho dne jsem se rozhodl že bych se mohl pokusit vyrobit něco originálního na čem bych klidně dělal i delší dobu..
Chtěl bych pozornost návštěvníka, těchto stránek, upoutat dinamickým pozadím. Inspiroval jsem se klasickým kurzorem ve windowsech, jistě víte, že v nastavení lze zaškrtnout možnost "Zobrazovat stopu ukazatele" - za kurzorem se bude táhnout "ocas".Tím se dostáváme k jádru tohoto tématu, přál bych si aby prostřední vrstva poskytovala mlhovitou stopu kurzoru. ta první vrstva která bude umístěna nevíš by byla puntíkovaná aby stopa byla zajímavá ale zároveň by nebyla hlavní atrakcí, tím chci říct, že nechci aby mi tam chodili dětská a blbli si s tím, ale aby to mělo jenom tén nádech. No a ta poslední vrstva by byla jako podklad..



Asi by se do dalo udělat nějak jinak, ale snažil jsem se popsat svou mysl co nejpřesněji. Odpovědi jsou samozřejmě vítaný..
Nox
Profil
Nebude to spíše rušivé? Raději bych udělal zajímavý (a zároveň ne-nepraktický) design jako takový, než tam dávat blbůstky (a pokud už, tak spíš slaběj)... ale no, třeba to bude dobrý

Nevím jestli vrstvy charakterizovat jako 3d nebo co s tím má společného stopa (vrstvení má html/css úplně normálně, už jen prostým zanořováním, či z-index, -margin, position...)
------

No, přes HTML/CSS to nepůjde, bude muset JS

Dost možná na to už existují stejné nebo podobné skripty

Budeš mít kolekci elementů, které budeš neustále přesouvat k myši, s nějakým odstupem...a budeš asi muset uchovávat nějakou historii, abys věděl nejen pozici, ale i směr

Úplně rozmazané a kvalitní stopy asi nedostáhneš, ale rozmazané jednotlivé kurzory by šly poloprůhledným png
Chamurappi
Profil
Reaguji na Tolike:
Zajímavý nápad, mohlo by to vypadat hezky. Mlhu bude zapotřebí poskládat z obrázků, je otázka, zda se ti podaří přeskupovat je tak, aby to vypadalo podle původní představy.
DoubleThink
Profil *
Flash by mohl být řešením. Rastrové efekty už zvládá celkem uspokojivě. Pomenší SWF objekt bys mohl javascriptem táhnout za kurzorem a zobrazovat v něm stopu.
Tolike
Profil
a nedalo by se to udělat mnohem jednodušeji, přes css? kdybych tam dal přes celou plochu malé GIFy které by se spouštěli když na ně nevedete kurzorem a pomalu zhasinali až odjedete.. ale nevím jak to udělat aby to nebyl odkaz :(
jenikkozak
Profil
Spíše bych na pozadí dal malý obrázek jedné mlhy, javascriptem snímal polohu myši a podle té měnil hodnotu background-position té mlhy, na to by se mohlo umístit to druhé pozadí jako pozadí jiného elementu.
Edit: Ale tak by se nevytvořil obraz cesty, pouze stín ukazatele myši. Nestačilo by to? Při částečném překrytí druhým pozadím by rozdíl nebyl tak výrazný. Navíc nemá-li toto vylepšení být rušivé, muselo by být málo výrazné. Přijde mi poněkud zbytečné kvůli takto nepodstatné části webu na něj umisťovat tisíce malých gifů. (Jak jsem pochopil to výše uvedené řešení.)
Chamurappi
Profil
Reaguji na Tolike:
a nedalo by se to udělat mnohem jednodušeji, přes css?
Ne. Pokrýt plochu prohlížeče tisícemi GIFů rozhodně není jednodušší a řídit u nich animaci, aby jela ve všech prohlížečích stejně, je prakticky nemožné.
Navíc ti ta fialová děravá vrstva všechny obrázky překryje, takže na nich :hover nikdy neodchytíš.


Reaguji na jenikkozaka:
javascriptem snímal polohu myši a podle té měnil hodnotu background-position té mlhy
Změna pozice pozadí vyvolá překreslení celého elementu. Posouvat menší obrázek je méně náročné.
Tolike
Profil
http://tabqwerty.com/2010/06/11/rethink-animation.html

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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