FX-Scroll (Mootools)

Cielo|Nieve|Arbol desnudo|Ultimas hierbas

Cielo

Nieve

Arbol desnudo

Ultimas hierbas

Así se hace:

1. .- Scripts:
   

   
   <script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>
   
   
   <script type='text/javascript'>
   <script type='text/javascript'>
   
   window.addEvent(&#39;domready&#39;, function(){
   
   var scroll = new Fx.Scroll(&#39;demo-wrapper&#39;, {
   
   wait: false,
   
   duration: 2500,
   
   offset: {&#39;x&#39;: -200, &#39;y&#39;: -50},
   
   transition: Fx.Transitions.Quad.easeInOut
   
   });
   
   
   
   $(&#39;link1&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content1&#39;);
   
   });
   
   
   
   $(&#39;link2&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content2&#39;);
   
   });
   
   
   
   $(&#39;link3&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content3&#39;);
   
   });
   
   
   
   $(&#39;link4&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content4&#39;);
   
   });
   
   });
   
   </script>
   
   


NOTA: LOS SCRIPTS QUE DOY HAN DE IR SIEMPRE EN ESE MISMO ORDEN. SI SE CAMBIAN, LO MAS PROBABLE ES QUE SE ALTERE EL HACK Y NO FUNCIONE.


2. .- CSS:
   

   
   #demo-bar {
   
   margin: 5px auto;
   
   padding: 5px 0;
   
   width: 600px;
   
   border-bottom: 1px solid #B3D4EF;
   
   background: #EFF8FF;
   
   text-align: center;
   
   }
   
   
   
   #demo-wrapper {
   
   margin: 5px auto;
   
   overflow: hidden;
   
   height: 400px;
   
   width: 600px;
   
   border: 1px solid #ddd;
   
   position: relative;
   
   }
   
   
   
   #demo-inner {
   
   width: 1600px;
   
   height: 1600px;
   
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPx91M-XhzuimdQjpU5RvSaWLQgQAAfq1OhOMDIuY5Uhs3Hb21aShIESStQWX7Mjiu09WbYnhDi1oZqkf9vAkAFFAfx2LnXwcVRT0JCpgep_184saKcdh3ZBtZ4EMoWkVkO7md4pLFL7M/s1600/FX.jpg);
   
   position: relative;
   
   }
   
   
   
   .scrolling-content {
   
   background: #000;
   
   width: 139px;
   
   height: 73px;
   
   text-align: center;
   
   position: absolute;
   
   }
   
   
   
   .scrolling-content h1 {
   
   color: #fff;
   
   padding: 25px 0;
   
   font-size: 12px;
   
   }
   
   
   
   #content1 {
   
   right: 750px;
   
   top: 100px;
   
   }
   
   
   
   #content2 {
   
   left: 600px;
   
   top: 550px;
   
   }
   
   
   
   #content3 {
   
   right: 500px;
   
   top: 550px;
   
   }
   
   
   
   #content4 {
   
   left: 1100px;
   
   top: 1000px;
   
   }
   
   


OJO!!: LOS VALORES DEL SCROLL DE LOS CONTENIDOS (CONTENT h1, ha2, h3, h4) DEPENDEN DEL TAMAÑO DE LA IMAGEN, POR LO QUE-NORMALMENTE-DEBEREIS CAMBIARLOS.


3. .- HTML:
   

   
   <div id="demo-bar">
   
   <a id="link1" href="#">Cielo</a> |
   
   <a id="link2" href="#">Nieve</a> |
   
   <a id="link3" href="#">Arbol desnudo</a> |
   
   <a id="link4" href="#">Ultimas hierbas</a>
   
   </div>
   
   
   
   <div id="demo-wrapper">
   
   <div id="demo-inner">
   
   <div id="content1" class="scrolling-content">
   
   <h1>Cielo</h1>
   
   </div>
   
   
   
   <div id="content2" class="scrolling-content">
   
   <h1>Nieve</h1>
   
   </div>
   
   
   
   <div id="content3" class="scrolling-content">
   
   <h1>Arbol desnudo</h1>
   
   </div>
   
   
   
   <div id="content4" class="scrolling-content">
   
   <h1>Ultimas hierbas</h1>
   
   </div>
   
   </div>
   
   </div>
   

WEB DE REFERENCIA: FX.Scroll