LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> JAK na animované menu

V dnešním díle se podíváme na jednu z možných implementací animovaného menu nasazeného na stránkách babybox.cz. Byť je tato implementace nasazená v provozu, patří právě mezi ty, které osobně nedoporučuji. Nicméně zde bylo na výběr něco v javascriptu, co by zvládl i indexovací robot, nebo nějaký flash zmetek, volba byla tedy jasná.

18.3.2011 00:00 | Ondřej Tůma | Články autora | přečteno 8326×

Zadání

Zadavatel společně s grafickým studiem vymysleli vizuálně hezké, nicméně jak už to v praxi bývá, na webu obtížně realizovatelné animované menu. Celý systém funguje tak, že je nejprve nutno kliknout na jednu z položek v hlavního menu, ta se v několika krocích rozbalí do submenu a až následně jednotlivé části jsou odkazy na konkrétní stránky.

S lítostí musím konstatovat, že návštěvníci stránek bez podpory javascriptu mají prostě smůlu. Roboti jsou na tom o něco lépe díky výskytu obrázkové mapy, která sice není svázána s obrázkem, ale robotům to by ale nemělo činit potíže.

Optimalizace

Animované menu se v javascriptu implementuje docela jednoduše. Resp. prostě se v časovém intervalu mění obrázek, a to vytváří dojem animace. Problém ale vzniká v momentě, když těch obrázků je mnoho a nejsou dopředu načteny. Na strojích s pomalejším připojení k internetu a nakonec, ne jen tam, mohou vznikat nepříjemné prodlevy v načítání jednotlivých obrázků animace. Navíc se browser zbytečně ptá serveru vícekrát, v našem případě až 17krát.



Toho lze obejít jednoduchým trikem a to tak, že všechny obrázky se spojí do jednoho velkého. Pomocí stylů se pak zobrazí jen první snímek, část obrázku a při animaci se posouvá tento obrázek. V praxi to znamená že hned na počátku se načte jeden větší obrázek a při spuštění animace se již pracuje s tímto načteným obrázkem. Ve výsledku, ten jeden velký obrázek není přesně n-krát větší, protože většina obrázkových formátů obaluje samotná data ještě různými metadaty a ty jsou jen jedny. Navíc, v případě komprese většího množství dat je vyšší šance, že dojde k optimalizaci. Nakonec si ke každému obrázku můžeme připočíst obal v podobě tcp/ip, resp. http požadavku, a vedle „spolehlivosti” získáme ještě menší nároky na datový objem.

Samotná implementace

Jednotlivé animované části jsou implementované pomocí JAK třídy. Ta na vstupu dostane jenom informace o počtu kroků animace a název, ze kterého pak vygeneruje názvy ostatních html prvků. Samotný kód je docela jednoduchý, je to malinká funkce, která se stará o animaci a pak pár mechanismů, které spojují obrázkovou mapu s animovanou položkou menu.

Třída obsahuje navíc i jednu metodu, která není navěšená na žádnou událost, resp. toto navázání je zakomentované. Tuto metodu jsem použil pro snazší tvorbu obrázkové mapy.

Hurá kód

Do těla článku záměrně vkládám jen některé kousky kódu. Celý příklad je přiložen k článku jako zip archív.

<div id="menuA" class="item">
            <img id="menuA-img" src="http://zeropage.cz/menu_fake.png" alt=""/>
            <map name="menuA-map">
                <area id="menuA-A" shape="polygon" coords="9,93, 57,11, 74,7, 85,23, 65,61, 21,89, 9,93"
alt="Archív aktualit" href="http://zeropage.cz/?p=aktuality-archiv"/>
                <area id="menuA-B" shape="polygon" coords="21,89, 105,40, 118,48, 121,65, 80,90, 28,90, 21,89"
alt="Poslední měsíc" href="http://zeropage.cz/?p=aktuality-mesic"/>
                <area id="menuA-C" shape="polygon" coords="28,90, 127,90, 137,108, 128,123, 84,125, 30,95, 28,90"
alt="Poslední týden"href="http://zeropage.cz/?p=aktuality-tyden"/>
                <area id="menuA-D" shape="polygon" coords="30,95, 121,147, 122,166, 106,177, 67,157, 30,95"
alt="Novinka" href="http://zeropage.cz/?p=novinka"/>
            </map>
        </div>

V html je nutné vytvořit některé prvky jednotlivých animovaných položek. Pokusím se je ve zkratce popsat. Fake obrázek je průhledný obrázek sloužící k propojení s obrázkovou mapou. Toto propojení nastane až po rozbalení, aby se na odkazy nedalo kliknout pokud položka není rozbalená. [Právě toto by šlo upravit tak, aby mapa byla odebrána až javascriptem, pak by i návštěvníci bez javascriptu mohli klikat na odkazy, jen by je neviděli :(] Obrázková mapa definuje jak polygony jednotlivých položek animovaného menu, tak odkazy těchto položek. Celé je to uzavřené v divu. Ten má id, které je společným základem všech html prvků patřící právě k jedné skupině. To nám usnadní propojení s javascriptem.

Javascrtiptová třída MenuItem

Konstruktor třídy MenuItem, tedy jednoho animovaného submenu, obsahuje mimo jiných i tyto řádky:

    this.animateInterval = null;
    this.timeoutedClose = null;
    this.listeners = new Array();

    this._animate = this._animate.bind(this);
    this._timedClose = this._timedClose.bind(this);

    JAK.Events.addListener(this.dom, 'click', this, '_open');
    //JAK.Events.addListener(this.dom, 'mousemove', this, '_move');
    JAK.Events.addListener(this.dom, 'mouseout', this, '_close');

V kódu je navěšení metod na události animovaného menu. A hned pole listeners napovídá že jich bude víc než jen click a mouseout.

MenuItem.prototype._open = function(e, elm){
    pos = JAK.DOM.getPortBoxPosition(elm);
    elementX = Math.round(e.clientX - pos.left);
    elementY = Math.round(e.clientY - pos.top);
    if (elementX > 5 && elementX < 140 && elementY > 90 && elementY < 125){
        this.vertex = 1;
        if (!this.animateInterval)
            this.animateInterval = setInterval(this._animate, 50);
    } else {
        console.log('X: '+elementX);
        console.log('Y: '+elementY);
    }
}

Metoda _open, jak je z názvu a události na které je navěšená patrno, se stará o rozbalení jednoho menu. Protože ale zabalené menu je daleko menší než rozbalené, hlídá si tato metoda rozsah souřadnic, kde bylo kliknuto a tedy ohraničuje akci rozbalení jen na vymezenou oblast.

MenuItem.prototype._animate = function(){
    if (this.vertex == 1){   // otevirame
        this.dom.style.zIndex = 2;
        if (this.img == this.steps) {
            clearInterval(this.animateInterval);
            this.animateInterval = null;
            this._openAtEnd();
        } else
            this.img += 1;    
    } else {            // zavirame
        this._closeAtStart();
        if (this.img == 0){
            clearInterval(this.animateInterval);
            this.animateInterval = null;
            this.dom.style.zIndex = 1;
        } else
            this.img -= 1;
    }

    var s = ""+(this.img*-143) + "px 0px";
    this.dom.style.backgroundPosition = s;
}

Stěžejní metodou naší třídy je _animate. Ta se stará právě o požadovanou animaci. Jak je z kódu vidět, metoda detekuje směr nastavený metodami _open a_close a dle směru posune obrázek v pozadí. Tím vytváří efekt animace. Pokud byla animace dokončena, vymaže se naplánovaná akce - spuštění metody _animate. Navíc je v příhodném okamžiku puštěná další metoda _closeAtStart nebo _openAtEnd.

Tyto metody mají za úkol navázat, resp. odebrat obrázkovou mapu a příslušné metody s jednotlivými položkami rozbaleného menu. Protože při akci mouseout chceme, aby byl vybraný prvek označen.

MenuItem.prototype._overItem = function(e, elm){
    if (this.timeoutedClose != null){
        clearTimeout(this.timeoutedClose);
        this.timeoutedClose = null;
    }

    if (elm == this.domA)
        this.img = this.steps + 4;
    if (elm == this.domB)
        this.img = this.steps + 3;
    if (elm == this.domC)
        this.img = this.steps + 2;
    if (elm == this.domD)
        this.img = this.steps + 1;

    var s = ""+(this.img*-143) + "px 0px";
    this.dom.style.backgroundPosition = s;
}

Metoda _overItem provede změnu podobnou jako provádí metoda _animate. Metoda _over resetuje stav rozbaleného menu bez vybraného prvku. To proto, aby při zavírání nedošlo k nechtěným efektům.

Zajímavá je ještě metoda _close, ta ve skutečnosti menu nazavře, ale jen ono zavření načasuje. To proto mazání načasovaného zavření v metodách _over a _overItem.

Závěrem

Výše popsaný a k článku přiložený kód rozhodně není dokonalý a ještě by ho šlo o mnohé vylepšit. Je ale funkční a zadavatel získal přesně to co vyžadoval. Laskavého čtenáře tedy odkážu právě na přiložený příklad a jeho hlubší studii s tím, že kód dávám k volnému šíření a použití zdarma pod BSD licencí. Příště si ukážeme JAK se dá udělat vlastní scrollovací prvek.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

27.2.2017 22:12 /František Kučera
Pozvánka na 137. sraz OpenAlt – Praha: Tentokrát jsme si pro vás připravili neobvyklou akci. Ve středu 1.3. v 17:30 nás přivítá sdružení CZ.NIC ve svých prostorách v Milešovské ulici číslo 5 na Praze 3, kde si pro nás připravili krátkou prezentaci jejich činnosti. Následně navštívíme jejich datacentrum pod Žižkovskou věží. Provedou nás prostory, které jsou běžnému smrtelníkovi nedostupné!
Po ukončení prohlídky se všchni odebereme do hostince U vodoucha, Jagelonská 21, Praha 3 pochutnat si na některém z vybraných piv či dát si něco na zub. Rezervaci máme od 19:30, heslo je OpenAlt.
Ale pozor! Do prostor datového centra máme omezený přístup, dostane se tam pouze 10 lidí! Takže kdo přijde dříve, ten má přednost, a občanky s sebou! Kdo nebude chtít na prohlídku datového centra, může se pomalu přesunout do hostince U vodoucha a u nepřeberné nabídky piv počkat na ostatní.
Přidat komentář

18.1.2017 0:49 /František Kučera
Členové a příznivci spolku OpenAlt se pravidelně schází v Praze a Brně. Fotky z pražských srazů za uplynulý rok si můžete prohlédnout na stránkách spolku. Příští sraz se koná už 19. ledna – tentokrát je tématem ergonomie ovládání počítače – tzn. klávesnice, myši a další zařízení. Také budete mít příležitost si prohlédnout pražský hackerspace Brmlab.
Přidat komentář

8.1.2017 17:51 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 19. ledna od 18:30 v pražském hackerspacu Brmlab. Tentokrát je tématem srazu ergonomie ovládání počítače – tzn. klávesnice, myši a další zařízení. K vidění bude mechanická klávesnice dasKeyboard, trackball Logitech nebo grafický tablet (a velký touchpad) Wacom. Přineste i vy ukázat svoje zajímavé klávesnice a další HW. V 18:20 je sraz před budovou, v 18:30 jdeme společně dovnitř, je tedy dobré přijít včas. Podle zájmu se později přesuneme do nějaké restaurace v okolí.
Přidat komentář

1.12.2016 22:13 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 8. prosince od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Sraz bude tentokrát tématický. Bude retro! K vidění budou přístroje jako Psion 5mx nebo Palm Z22. Ze svobodného hardwaru pak Openmoko nebo čtečka WikiReader. Přijďte se i vy pochlubit svými legendami, nebo alespoň na pivo. Moderní hardware má vstup samozřejmě také povolen.
Komentářů: 1

4.9.2016 20:13 /Pavel `Goldenfish' Kysilka
PR: Dne 22.9.2016 proběhne v Praze konference Cloud computing v praxi. Tématy bude např. nejnovější trendy v oblasti cloudu a cloudových řešení, provozování ERP v cloudu, o hostování různých typů softwaru, ale třeba i o zálohování dat nabízeném podnikům formou služby.
Přidat komentář

1.9.2016 11:27 /Honza Javorek
Česká konference o Pythonu, PyCon CZ, stále hledá přednášející skrz dobrovolné přihlášky. Máte-li zajímavé téma, neváhejte a zkuste jej přihlásit, uzávěrka je již 12. září. Konference letos přijímá i přednášky v češtině a nabízí pomoc s přípravou začínajícím speakerům. Řečníci mají navíc vstup zadarmo! Více na webu.
Přidat komentář

27.8.2016 8:55 /Delujek
Dnes po 4 letech komunitního vývoje vyšla diaspora 0.6.0.0
diaspora* je open-source, distribuovaná sociální síť s důrazem na soukromý
Více v oficiálním blog-postu
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

24.3.2017 11:54 / Hui
country cottages

16.3.2017 16:33 / BezvaDesign.cz
Re: Hledám grafika do teamu

9.3.2017 11:44 / Jaromir Obr
Re: chyba

18.1.2017 20:18 / martin horky
Spolupraca linuxu a microsoftu

17.1.2017 9:57 / Pavel Hrubeš
Re: Externí USB televizní karta

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze