projekt bez analýzy - přizpůsobení pozic objektů
Zdroj: SOOM.cz [ISSN 1804-7270]
Autor: vosanet
Datum: 8.9.2012
Hodnocení/Hlasovalo: 0/0
Animované přizpůsobení pozic objektů na základě změny velikosti okna prohlížeče..
Než jsem se dostal k druhému projektu zajímal jsem se v tu chvíli hodně o responsive design, nebo taky rozložení které se přizpůsobí velikosti obrazovky. Seděl jsem u počítače a měnil velikost okna prohlížeče a přitom pozoroval přizpůsobující se dlaždice na Opera speed dialu.
Protože jsem nikde nemohl najít zdrojový kód tohoto speed dialu, začal jsem pracovat na svém vlastním pokusu o přizpůsobivé dlaždice pomocí javascriptu. A to se jakžtakž povedlo a zde je ukázka.
Už ani pořádně nevím jak to funguje :-/, to mě učí psát si ke kódu také dokumentaci(komentáře)!
Než jsem se k tomu dopracoval bylo hondě pokusů a abych zjistil správné rozložení popsal jsem několik stránek sešitu, kde jsem si počítal rozmístění...
Funguje to tak že:
1. při změně okna
2. zjisti rozměry okna
3. zjisti kolik máš dlaždic
4. propočítej ideální rozložení (v tom už se dnes(po půl roce) docela strácím)
5. změň pozice dlaždic
Chyby a nedostatky:
- Nedá se jednoduše nastavit minimální/pevné odsazení od dlaždic..
- Při zmenšení okna na velmi malou hodnotu se prohlížeč sekne :-/
Proč se tomu dále nevěnuji
- Musel, bych to celé předělat a nevím jestli to má smysl
- Až dnes jsem zjistil, jak funguje v css "float" a že to až na tu animaci docela vystačí, je to rozhodně přehledné, snadno se nastaví mezera a nezatěěžuje to tolik jako můj neúsporný kód..
příklad..
- Našel jsem
plugin, zvaný Isotope co plně nahradí můj skript s širokou možností nastavení
Ovšem tento můj nedokonalý skrpit již používám ve svém dalším projektu, o kterém napíšu další článek...
Věděli jste o isotope pluginu, máte nápad jak ho použít? Chtěli byste skript, který bude podobný tomu mému? Snažili jste se o něco takového, nebo něco úplně jiného? :) Napište to do komentářů...