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 8424×

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ů

15.5.2017 23:50 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

15.4.2017 15:20 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě IoT a radiokomunikace? Přijď na sraz spolku OpenAlt, který se bude konat ve středu 19. dubna od 18:30 v Šenkovně (Sokolská 60, Praha 2).
Přidat komentář

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ář

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

> Poslední diskuze

11.5.2017 23:32 / lelo
Re: Problém se správcem balíčků

11.5.2017 5:45 / davd mašek
Re: Problém se správcem balíčků

10.5.2017 22:54 / lelo
Re: Problém se správcem balíčků

10.5.2017 22:19 / davd mašek
Problém se správcem balíčků

17.4.2017 19:15 / Jakub shoop
chyba

Více ...

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