Volando con Moo

16/Nov/2007 241

Mootools es más que un excelente framework, es tremenda herramienta de desarrollo. Y de efectos. En su sitio web oficial, la documentación deja algo que desear, y la falta de ejemplos desglosados impide que quienes no estén acostumbrados a esta herramienta pueda siquiera comenzar a usarla. Un efecto que me gusta mucho y que he utilizado un par de ocasiones es FX.Scroll, donde puedes a través de id‘s linkear a secciones dentro de un <div>, y el script te llevará volando hacia su objetivo, con una suave transición. Para que sepan de lo que hablo, vean el ejemplo final:

Ver ejemplo final

Bueno, la idea es mostrar cómo se hace para que uds. puedan replicarlo según sus necesidades. Comenzaré por el HTML que se constituye de 3 partes: el menú (#menu, que lo pueden hacer cómo se les dé la gana, lo importante son los id‘s de los links), el <div> que albergará las secciones (#dentro, que están posicionadas absolutamente) y el contenedor que funciona como una ventana que esconde el resto (#envoltura esconde con overflow: hidden;):

<ul id="menu">
     <li><a id="link1" href="#">Contenido 1</a></li>
     <li><a id="link2" href="#">Contenido 2</a></li>
     <li><a id="link3" href="#">Contenido 3</a></li>
</ul>
<div id="envoltura">
     <div id="dentro">
          <div id="contenido1">
               <h1>1</h1>
          </div>
          <div id="contenido2">
               <h1>2</h1>
          </div>
          <div id="contenido3">
               <h1>3</h1>
          </div>
     </div>
</div>

Ya el CSS es lo que ayuda a la magia (obviaré el estilo del #menu):

#envoltura {
     overflow: hidden;
     height: 300px;
     width: 600px;
     position: relative;
}
#dentro {
     width: 1600px;
     height: 1600px;
     background: url(imgs/fondo.jpg) center center no-repeat;
     position: relative;
}
h1 {
     color: #fff;
     font-size: 200px;
}
#contenido1 {
     position: absolute;
     left: 250px;
     top: 80px;
}
#contenido2 {
     position: absolute;
     left: 800px;
     top: 1200px;
}
#contenido3 {
     position: absolute;
     left: 900px;
     top: 550px;
}

Y finalmente lo que hace la magia, el JS. Antes que todo se linkea mootools.js, y luego el <script> que podemos configurar a nuestro gusto:

var scroll = new Fx.Scroll(‘envoltura’, {
     // envoltura es el id que funciona como ventana
     wait: false,
     duration: 1000,
     // duration es la duración de las transiciones en milisegundos
     offset: {‘x’: -230, ‘y’: -20},
     // offset es la distancia del eje X Y que mostrará los elementos posicionados
     transition: Fx.Transitions.Back.easeInOut
     // transition es el tipo de transición que tendrá, ver ejemplos en mootools.net
});
$(‘link1’).addEvent(‘click’, function(event) {
     // aqui ya comenzamos a darle cada id del <a>…
     event = new Event(event).stop();
     scroll.toElement(‘contenido1’);
     // …hasta qué id tiene que llegar.
});
$(‘link2’).addEvent(‘click’, function(event) {
     event = new Event(event).stop();
     scroll.toElement(‘contenido2’);
});
$(‘link3’).addEvent(‘click’, function(event) {
     event = new Event(event).stop();
     scroll.toElement(‘contenido3’);
});

Bueno, nuevamente les dejo el link al ejemplo final:

Ver ejemplo final

Comentarios

  1. William Zayas [#]

    tamoxifen citrate pct tamoxifen citrate classification tamoxifen menstruation effects

  2. William Goss [#]

    womens viagra viagra sale sildenafil tablets uk

  3. Jeffrey Dysinger [#]

    I will right away take hold of your rss as I can not find your
    email subscription hyperlink or e-newsletter service. Do you’ve any?
    Kindly let me recognize in order that I may subscribe.

    Thanks.

  4. canada pharmacy online [#]

    online pharmacy canada

  5. a web hosting [#]

    When I originally commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from
    now on every time a comment is added I get 4 emails
    with the same comment. Perhaps there is a way
    you are able to remove me from that service? Appreciate it!

  6. web hosting was [#]

    Hello my loved one! I wish to say that this post is amazing, nice written and
    include almost all vital infos. I would like to look more
    posts like this .

  7. that web hosting [#]

    Wow, wonderful weblog layout! How lengthy have you ever been blogging for?

    you made blogging glance easy. The full glance of your website is wonderful, let
    alone the content material!

  8. bit.ly [#]

    Thanks for another informative web site. The place else may just
    I am getting that kind of info written in such a perfect
    method? I have a undertaking that I am simply
    now operating on, and I have been on the glance out for
    such information.

  9. http://t.co/17QzETrAgr [#]

    Thanks , I have just been searching for info approximately
    this subject for ages and yours is the greatest I’ve found out till now.
    But, what in regards to the conclusion? Are you certain about the supply?

  10. t.co [#]

    Its like you read my mind! You seem to know a lot about this,
    like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a bit, but instead of that,
    this is excellent blog. A great read. I will definitely be back.

  11. ivermectin dosage [#]

    ivermectin stromectol Volando con Moo | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectina comprar

  12. ivermectin1.com [#]

    stromectol liquid Volando con Moo | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin tablets for humans

  13. MarvinFuh [#]

    generic cialis
    walmart rx prices drug prices cialis-canada canadian viagra online pharmacy ed treatment medications sildenafil viagra alcohol and viagra online pharmacy medications cheapest viagra in uk viagra online
    cialis-canada cialis from canadian how long does viagra last drug world canada order viagra

  14. Curtis Silva [#]

    Thanks for this excellent article. One more thing to mention is that nearly all digital cameras come equipped with any zoom lens that permits more or less of the scene to get included by simply ‘zooming’ in and out. These kind of changes in the aim length are reflected from the viewfinder and on huge display screen right on the back of the camera.

  15. ivermectin horse paste for sale [#]

    genel stromektol Volando con Moo | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin human dose uk

  16. http://app.gumroad.com [#]

    Excellent website you have here but I was curious about if you knew of
    any community forums that cover the same topics discussed here?
    I’d really like to be a part of community where I can get feed-back from other experienced people that share the same interest.
    If you have any recommendations, please
    let me know. Many thanks! asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  17. bitly.com [#]

    Hi there I am so happy I found your website, I really found you by mistake, while I was researching on Bing for something else, Regardless I am here now and would just like to say thanks a lot for a
    fantastic post and a all round enjoyable blog (I also love
    the theme/design), I don’t have time to browse it all at the minute but I have saved it and
    also added your RSS feeds, so when I have time I will be back to read much more, Please do keep up the awesome
    work. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  18. quest bars and [#]

    Very good information. Lucky me I found your site by chance (stumbleupon).
    I’ve bookmarked it for later! quest bars http://j.mp/3C2tkMR quest
    bars

  19. j.mp [#]

    It’s in fact very difficult in this full of activity life to listen news on Television,
    so I simply use web for that purpose, and get the most up-to-date information. cheap flights http://1704milesapart.tumblr.com/ cheap
    flights

  20. MarvinFuh [#]

    northwest canadian pharcharmy online
    cialis online canada pharmacy baclofen best price on cialis tadalafil 20 mg in canada buy viagra online without a prescription rx online cialis no prescription viagra pfizer canadian pharmacy cialis generic canadian rx
    cialis without prescription cialis generic canada india generic viagra canadian.cialis buy viagra from canada pharmacy

  21. http://coub.com/ [#]

    Hi, i think that i saw you visited my weblog so i came to go back the prefer?.I’m attempting
    to in finding issues to improve my website!I
    suppose its good enough to make use of a few of your concepts!!
    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  22. MarvinFuh [#]

    generic viagra from india
    viagra free sample what is viagra viagra prescription viagra purchase canada drugstore canada viagra generic cialis without prescription buying cialis from canada canadian pharmacy cialis 20mg ?viagra canada
    sildenafil canada viagra cheapest price viagra from a pharmacy in canada viagra price viagra canada online

  23. http://tinyurl.com/ [#]

    When I initially commented I seem to have clicked the -Notify me when new comments are added- checkbox and
    from now on each time a comment is added I get four emails with the exact same comment.
    There has to be an easy method you are able
    to remove me from that service? Kudos! cheap flights http://1704milesapart.tumblr.com/ cheap flights

  24. escort [#]

    escort

  25. http://bit.ly/3nkdKIi [#]

    Definitely believe that which you said. Your
    favorite reason appeared to be on the web the easiest thing to be
    aware of. I say to you, I certainly get irked while people think
    about worries that they plainly do not know about. You managed to hit the nail upon the top and also defined out the whole
    thing without having side effect , people could take a signal.
    Will probably be back to get more. Thanks ps4 games https://tinyurl.com/45xtc52b ps4 games

  26. www.iherb.com [#]

    These are actually wonderful ideas in about blogging.
    You have touched some nice things here. Any way keep up wrinting.

    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  27. bitly.com [#]

    Hi there great blog! Does running a blog like this require a lot of work?
    I’ve no expertise in coding but I had been hoping to start my own blog in the near future.
    Anyhow, should you have any suggestions or tips for new
    blog owners please share. I understand this is off subject however I simply wanted to ask.
    Appreciate it! ps4 games https://j.mp/3z5HwTp ps4 games

  28. canadian online pharmacies [#]

    canadian pharcharmy online

  29. Dalpisk [#]

    http://buyneurontine.com/ – gabapentin vs lyrica

  30. stromectolo generico [#]

    stromectol covid 19 https://stromectolforte.com/# can humans take ivermectin paste ivermectin

  31. cetirizine 5mg tablet [#]

    what is cetirizine generic for – https://allergyd.com

  32. cetirizine sales [#]

    best price for cetirizine – https://allergyd.com

  33. generic zyrtec at walmart [#]

    where to buy zyrtec cheap – http://allergyd.com

  34. Raul [#]

    My relatives always say that I am wasting
    my time here at web, except I know I am getting
    familiarity
    all the time by reading such good articles.

  35. stromectolforte.com [#]

    ivermectin tablets http://stromectolforte.com/ generic stromectol stromectol prices

  36. ed medicines [#]

    affordable health care insurance http://doctorkiva.com – viagra 100mg

  37. Penney [#]

    Excellent post. I was checking continuously this blog and I am impressed!

    Very useful information specifically the last part
    I care for
    such info a lot. I was seeking this certain information for
    a very long time. Thank you and best of luck.

  38. stromectolhumans.com [#]

    high diastolic blood pressure http://stromectolhumans.com – cost of ivermectin pill

  39. buy ivermectin pills [#]

    is ivermectin safe for people http://stromectolforte.com/ ivermectin 2mg stromectol tablets uk

CSSLab