Dando vida al tiempo / Giving life to time

Selecciona tu idioma / Select your language:

• English
• Español

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

<script type="text/javascript">
   $(function(){
      $().timelinr();
   });
</script>

<script type="text/javascript"> 
   $(function(){
      $().timelinr({
         orientation: 'horizontal',
         // value: horizontal | vertical, default to horizontal
         containerDiv: '#timeline',
         // value: any HTML tag or #id, default to #timeline
         datesDiv: '#dates',
         // value: any HTML tag or #id, default to #dates
         datesSelectedClass: 'selected',
         // value: any class, default to selected
         datesSpeed: 'normal',
         // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
         issuesDiv : '#issues',
         // value: any HTML tag or #id, default to #issues
         issuesSelectedClass: 'selected',
         // value: any class, default to selected
         issuesSpeed: 'fast',
         // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
         issuesTransparency: 0.2,
         // value: integer between 0 and 1 (recommended), default to 0.2
         issuesTransparencySpeed: 500,
         // value: integer between 100 and 1000 (recommended), default to 500 (normal)
         prevButton: '#prev',
         // value: any HTML tag or #id, default to #prev
         nextButton: '#next',
         // value: any HTML tag or #id, default to #next
         arrowKeys: 'false',
         // value: true/false, default to false
         startAt: 1,
         // value: integer, default to 1 (first)
         autoPlay: 'false',
         // value: true | false, default to false
         autoPlayDirection: 'forward',
         // value: forward | backward, default to forward
         autoPlayPause: 2000
         // value: integer (1000 = 1 seg), default to 2000 (2segs)
      });
   });
</script>

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- optional -->
   <a href="#" id="prev">-</a> <!-- optional -->
</div>

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

<script type="text/javascript"> 
   $(function(){
      $().timelinr();
   });
</script>

<script type="text/javascript"> 
   $(function(){
      $().timelinr({
         orientation: 'horizontal',
         // valores: horizontal | vertical, por defecto horizontal
         containerDiv: '#timeline',
         // valores: cualquier etiqueta HTML ó #id, por defecto #timeline
         datesDiv: '#dates',
         // valores: cualquier etiqueta HTML ó #id, por defecto #dates
         datesSelectedClass: 'selected',
         // valores: cualquier clase, por defecto selected
         datesSpeed: 'normal',
         // valores: número entre 100 y 1000 (recomendado) ó 'slow', 'normal', 'fast', por defecto normal
         issuesDiv : '#issues',
         // valores: cualquier etiqueta HTML ó #id, por defecto #issues
         issuesSelectedClass: 'selected',
         // valores: cualquier clase, por defecto selected
         issuesSpeed: 'fast',
         // valores: número entre 100 y 1000 (recomendado)ó 'slow', 'normal', 'fast', por defecto fast
         issuesTransparency: 0.2,
         // valores: número entre 0 y 1 (recomendado), por defecto 0.2
         issuesTransparencySpeed: 500,
         // valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal)
         prevButton: '#prev',
         // valores: cualquier etiqueta HTML ó #id, por defecto #prev
         nextButton: '#next',
         // valores: cualquier etiqueta HTML ó #id, por defecto #next
         arrowKeys: 'false',
         // valores: true/false, por defecto false
         startAt: 1,
         // valor: número entre 1 y el máximo de elementos, por defecto 1 (primero)
         autoPlay: 'false',
         // valor: true | false, por defecto false
         autoPlayDirection: 'forward',
         // valor: forward | backward, por defecto forward
         autoPlayPause: 2000
         // valor: número (1000 = 1 seg), por defecto 2000 (2segs)
      })
   });
</script>

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
<a href="#" id="next">+</a> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>

Demo Horizontal

Demo Vertical

Demo Autoplay

Download/Bajar Plugin 0.9.5 + Demos

Copyright 2011, CSSLab.cl – Free under the MIT license.

En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas.

* He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando

Transiciones 4+ & Mobile11+11+5+

La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando.

Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration.

En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function:

Ver ejemplo 1

En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo através de la propiedad transition-duration:

Ver ejemplo 2

Transformaciones 3D 4+ & Mobile11+

Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframe, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto:

Un keyframe define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del browser interpolará los estilos definidos entre esos keyframes.

Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento:

@-webkit-keyframes girando {
  from { -webkit-transform: rotateY(0deg);    }
  to   { -webkit-transform: rotateY(-360deg); }
}

Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relacion al contenedor que determinemos ahora:

#contenedor {
   margin: 30px auto;
   -webkit-perspective: 600px;
}

Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).

Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:

#girando {
   -webkit-animation-name: girando;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 3s;
   -webkit-transform-style: preserve-3d;
}

Ver ejemplo 3

Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y text-shadow:

Ver ejemplo 4

Interesante es lo que puedes lograr agregando la propiedad:

-webkit-backface-visibility: hidden;

Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML:

Ver ejemplo 4.1

Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes:

@-webkit-keyframes girando {
   from,20% 	{ -webkit-transform: rotateY(0deg);   }
   30%,40%  	{ -webkit-transform: rotateY(90deg);  }
   50%,60%  	{ -webkit-transform: rotateY(180deg); }
   70%,80% 	{ -webkit-transform: rotateY(270deg); }
   90%,to	{ -webkit-transform: rotateY(360deg); } 
}

Ver ejemplo 5

Y para el final, una integración del cubo rotundo anterior con vídeos através de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari):

Ver ejemplo 6

Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.

Links:

• 52framework
• SproutCore
• Jo
• Popcorn.js
• Gravity
• LimeJS

NOTA: Aún es necesario el uso de browsers muy modernos, como Safari 5 y Chrome 10. Firefox 3.6 anda pero no ofrece todo el soporte que quisiéramos (aún).

Transiciones

Su característica es cambiar una propiedad (o un grupo de ellas) en un período de tiempo determinado. Una ventaja por sobre Javascript es su degradación, ya que si esta propiedad no es soportada por el browser, la animación simplemente no es mostrada.

El siguiente código muestra el aumento del ancho de un <div> en un segundo cuando el mouse se posiciona sobre él. Luego, cuando el mouse sale del <div> su ancho vuelve a la posición inicial en 2 segundos:

.prueba1 {
   margin:10px;
   width:200px;
   height:200px;
   background:#f00;
   border:1px solid #666;
   -webkit-transition: all 1s ease; /* Safari-Chrome */ 
}
   .prueba1:hover{
      width:400px;
      -webkit-transition: all 2s ease; /* Safari-Chrome */
    }

Ver ejemplo 1

A continuación, una animación compuesta: dado un estado inicial se define nuevo width, height y background-color:

.prueba2 {
   margin:10px;
   width:200px;
   height:200px;
   background-color:#f00;
   border:1px solid #666;
   -webkit-transition-property: width, height, background-color; 
   -webkit-transition-duration: 0.5s, 1s, 1s; 
   -webkit-transition-timing-function: ease, ease-out;
   -webkit-transition-delay:0s ,0.5s, 1.5s;
  }
   .prueba2:hover {
      width:400px;
      height:300px;
      background-color:#fc0;
      -webkit-transition-property: width, height, background-color; 
      -webkit-transition-duration: 0.5s, 0.5s, 0.5s; 
      -webkit-transition-timing-function: linear, linear;
      -webkit-transition-delay:0s ,0.5s, 0.5s;
   }

Ver ejemplo 2

Propiedades:

transition-property:

Determina la(s) propiedad(es) a ser animadas; puede ser cualquier propiedad CSS.

transition-duration:

Indica la duración de la animació del inicio al fin en segundos. Por defecto el valor es 0.

transition-timing-function:

Definen física de animación: ease (por defecto), linear, ease-in, ease-out y ease-in-out.

transition-delay:

Tiempo en que la animación debe pausarse antes de comenzar.

Transformaciones:

Existen 4 tipos de valores para transformar elementos HTML mediante CSS3:

Skew:

desplazamiento de los ejes horizontales.

Scale:

modificación de la escala del elemento.

Rotate:

cambio de rotación del mismo definido en grados.

Translate:

desplazamiento del elemento desde su posición original.

Ver ejemplo 3

Estas propiedades pueden ser utilizadas en la gran mayoría de los browsers modernos, con sus debidos prefijos como pueden notar en el código fuente del ejemplo.

Además, puedes comenzar a mezclar transformaciones con animaciones para lograr efectos como el siguiente (con Safari/Chrome):

#divloco div {
   height:100px;
   width:100px;
   border:1px solid #f00;
   margin:10px auto;
   background: #ccc;
   text-align:center;
   -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out; 
   transition: all 2s ease-in-out;
}
   #divloco div:hover, #divloco div.hover_effect {
      -webkit-transform:rotate(720deg) scale(2,2);
      -moz-transform:rotate(720deg) scale(2,2);
      -o-transform:rotate(720deg) scale(2,2);
      -ms-transform:rotate(720deg) scale(2,2);
      transform:rotate(720deg) scale(2,2); 
   }

Links:

• CSS Animations Module Level 3
• Surfin’ Safari: CSS Transforms
• Surfin’ Safari: CSS Animation
• 10 Amazing Examples of Innovative CSS3 Animation

¿Porqué utilizar gradientes en CSS en vez de imágenes?

1. Es más flexible y mantenible
2. Menos dependendias de programas y editores gráficos
3. Menos consultas al servidor
4. Es escalable

En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos.

Según los estándares W3C, crear gradientes se compone de:

linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* )
radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )

Para browsers Mozilla, se mantiene pero se agrega el prefijo -moz:

-moz-linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )

Y para Webkit, es bastante diferente:

-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>]? [, <stop>]*)

Una lástima que tengamos que reescribir para cada uno diferentes propiedades para lograr el mismo efecto. Mejor veamos los ejemplos:

Gradiente Lineal

body{
  background-color:#ccc;
  background-image: -moz-linear-gradient(top, #333, #ccc);
  background-image: -webkit-gradient(linear, left top,left bottom, from(#333), to(#ccc));
  background-image: linear-gradient(top, #333, #ccc);
}

Ver Ejemplo

Gradiente Radial

body{
  background-color:#ccc;
  background-image: -moz-radial-gradient(center 45deg,circle cover, #ccc, #333);
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333));
  background-image: radial-gradient(center 45deg,circle cover, #ccc, #333);
  }

Ver Ejemplo

¿Y con Internet Explorer?

Ni lo pienses, siquiera en IE9 están soportados. Podrías lograrlo en esta última versión através de SVG, el cual es basado en vectores. SVG es un lenguaje de marcado basado en XML que descibre vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3.

¿Muy complicado? También lo creo. Mejor prueba algún script como Modernizr ó CSS3 Pie, los que hacen que IE soporte CSS3 como deberían haberlo hecho con los estándares hace mucho tiempo ya.

Ver ejemplo

En esta ocasión utilicé bastantes más capas que en el ejemplo original (6 en total… un poco exagerado ya que los PNG‘s pesan bastante), pero el HTML fue construído de igual manera:

<div id="nube">
   <div id="montanas">
      <div id="ciudad">
         <div id="personas">
            <div id="persona1">
               <img src="imgs/persona1.png" width="280" height="280">
               <p>Nulla facilisi. In vel sem…</p>
            </div>
            <div id="persona2">
               <img src="imgs/persona2.png" width="280" height="280">
               <p>Aliquam et nisl vel ligula…</p>
            </div>
            <div id="persona3">
               <img src="imgs/persona3.png" width="280" height="280">
               <p>Nunc auctor bibendum eros….</p>
            </div>
         </div>
         <div id="enredadera">
            <div id="hojas">
            </div>
         </div>
      </div>
   </div>
</div>

Y el CSS:

#nube, #montanas, #ciudad, #enredadera, #hojas, #personas {
   position: absolute;
   height: 100%;
   width: 200%;
   left: -150px;
}

Un detalle importante fue ampliar bastante el ancho de todas las cajas para que puedan soportar un desplazamiento horizontal contínuo (cuidando siempre que sea en porcentaje; así se conserva el efecto Parallax). Cada imagen es aplicada como background y posicionada horizontalmente en porcentaje y verticalmente de acuerdo a su ubicación (top ó bottom).

#nube {
   background: url(../imgs/nube.png) 20% top repeat-x;
}
#montanas {
   background: url(../imgs/montanas.png) 10% bottom repeat-x;
}
#ciudad {
   background: url(../imgs/ciudad.png) 30% bottom repeat-x;
}
#enredadera {
   background: url(../imgs/enredadera.png) 40% top repeat-x;
}
#hojas {
   background: url(../imgs/hojas.png) 50% bottom repeat-x;
}

Si modifican el ancho de la ventana verán que se conserva el efecto Parallax, salvo la capa de personas la que pretendo que sea contenido (dado el caso que se requiera así).

Ahora, la magia se aplica a través de Mootools. El efecto de desplazamiento está dentro del .js que incluí al bajar el archivo y se llama FX.Style. Con él haremos que mediante un evento de click en cada botón, cada <div> se desplace en diferentes medidas de su margin-left. O sea, la primera capa #nubes se moverá -100px a la izquierda, luego #montanas lo harán -200px y así sucesivamente, logrando un efecto de profundidad en cada capa ya que se moverán en diferentes medidas:

$(‘btn_uno’).addEvent(‘click’, function(){
   nube.start({
      ’margin-left’: 0
   });
   montanas.start({
      ’margin-left’: 0
   });
   ciudad.start({
      ’margin-left’: 0
   });
   enredadera.start({
      ’margin-left’: 0
   });
   hojas.start({
      ’margin-left’: 0
   });
   personas.start({
      ’margin-left’: 0
   });
});
$(‘btn_dos’).addEvent(‘click’, function(){
   nube.start({
      ’margin-left’: -100
   });
   montanas.start({
      ’margin-left’: -200
   });
   ciudad.start({
      ’margin-left’: -300
   });
   enredadera.start({
      ’margin-left’: -400
   });
   hojas.start({
      ’margin-left’: -1000
   });
   personas.start({
      ’margin-left’: -500
   });
});
$(‘btn_tres’).addEvent(‘click’, function(){
   nube.start({
      ’margin-left’: -500
   });
   montanas.start({
      ’margin-left’: -600
   });
   ciudad.start({
      ’margin-left’: -700
   });
   enredadera.start({
      ’margin-left’: -800
   });
   hojas.start({
      ’margin-left’: -1500
   });
   personas.start({
      ’margin-left’: -900
   });
});

Pueden ver el código completo de cada elemento:

• Código CSS
• Código JS

Ver ejemplo final

PD: El movimiento en Safari 3 anda perfecto, muy suave; ya en Firefox 2 y 3 se pega algunos saltos, y en Opera 9.2 anda mas cortado aún… Quizás sea mi computador, espero sus impresiones sobre esto.

Esta es una técnica muy limitante, ya que se necesita mucha creatividad para encontrar un uso práctico que impacte al usuario y que principalmente no sea un estorbo en la navegación del sitio. Otro punto importante es que lo más probable necesiten hacerlo con PNG transparente, lo que hace que IE6 sea excluído (salvo utilicen algun buen filtro de PNG para él). Un par de gradiosos ejemplos lo encontramos en el sitio de Silverback y de We all hate quick books.

En este artículo les mostraré cómo se realiza, y lo más probable es que se hagan la misma pregunta que yo me hice: ¿porqué #&œ¥Ω no se me ocurrió a mí antes?

Parallax no es muy amigable, ya que a primera vista no se nota. Se necesita mover la ventana del browser para recién notar el efecto. Primero les presento el ejemplo final, para que puedan apreciar lo que haremos. Si modifican el tamaño de su ventana podrán notar de qué les estoy hablando

Ver ejemplo final

Primero necesitamos de las imágenes que formarán nuestras capas. Cuiden de prepararlas cosa que el final y el principio calcen perfectamente; en mi caso con 3 capas necesité montañas, árboles y unas ramas desenfocadas como se muestran en el siguiente diagrama:

Luego, el HTML. Básicamente se compone de (en mi caso) 3 div‘s, uno para cada capa (cada capa anidado en otra):

<div id="montanas">
     <div id="arboles">
          <div id="hojas">
          </div>
     </div>
</div>

El <div> #montanas será el que se despliegue más atrás; así #hojas será el que esté más adelante y el que se moverá más rápido que las otras.

El CSS es muy simple. El efecto se logra con un juego de porcentajes: mientras agregamos las imágenes de fondo de los div‘s mediante background-image, posicionamos cada capa (con background-position) con porcentajes horizontales: mientras las montañas se ubican a 30% de la izquierda, las hojas estarán a 70% lo que hará que se muevan en diferentes velocidades si la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil posicionamiento absoluto (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del browser):

#montanas {
     background: url(images/montanas.png) 30% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}
#arboles {
     background: url(images/arboles.png) 50% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}
#hojas {
     background: url(images/hojas.png) 70% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}

Ver nuevamente ejemplo final

Bueno pueden verlo por sus propios ojos desde el sitio original, sólo tomé el video porque creí que para muchos no sería tan obvio el efecto. La idea es que mediante el scroll, se intercambien 2 imágenes, en este caso una positiva de una negativa.

Ahora, vamos con la magia. A través de CSS y la propiedad background-attachment: fixed; repetiremos el efecto. Los ingredientes son:

• 1 HTML
• 2 imágenes similares, pero diferentes (positivo y negativo para ser originales).
• 1 pizca de CSS

El HTML:

<div id="container">
     <div id="header">
          <h1>CSSLab: efecto negativo</h1>
     </div>
     <div id="content">
          <p>Pellentesque vel dui sed……….</p>
     </div>
</div>

Nada de qué extrañarse. Un contenedor que tiene un encabezado y el contenido. La idea es que el #container tenga la imagen en negativo, escondida detrás del #header que tendrá la imagen en positivo. Ambos con la propiedad background-attachment: fixed; para que no se muevan con el scroll de la ventana, similar a lo que hace position: fixed;

La pizca de CSS:

#container {
     background: #333 url(tecla_neg.jpg) no-repeat fixed top;
     width: 600px;
     margin: 0 auto;
}
#header {
     background: #fff url(tecla_pos.jpg) no-repeat fixed top;
     height: 200px;
}
#content {
     width: 200px;
}

La propiedad background está resumida en una línea, pero desglosada sería de la siguiente manera:

background-color: #333;
background-image: url(tecla_neg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;

Ver ejemplo

Un detalle. No, mejor dos. No hubo caso de utilizar algún tributo de posicionamiento horizontal junto con background-attachment, o sea, sólo pude utilizar top o bottom, nada left ni right, y menos aún juntos. No me explico el porqué. Si quieren ponerlo hacia un lado, tendrían que hacer un background bien ancho cosa que lo cubra por completo en la horizontal. Segundo detalle… sí, oh sí. No funciona en IE6. ¡Qué maravilla!

Comenzamos con el marcado HTML. Primero, un <div class="overlay"></div> el que será el fondo semi-transparente que cubrirá la página entera, y albergará la ventana del mensaje. Luego, un <div class="modal"> que contendrá el mensaje o contenido de nuestra ventana modal. Estas 2 classes, .overlay y .modal, estarán escondidas desde un principio (display: none;) y serán gatilladas desde algún link (display: block;). Después de ellas, el contenido del resto del sitio web.

<div id="fade" class="overlay"></div>
<div id="light" class="modal">
     <p>Lorem ipsum dolor sit…..</p>
</div>
<p>Texto del sitio web. Con un <a href="">link</a> abriremos la ventana.</p>

Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del método cross-browser:

.overlay{
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index:1001;
     opacity:.75;
     -moz-opacity: 0.75;
     filter: alpha(opacity=75);
}

Y la ventana modal del contenido mismo:

.modal {
     display: none;
     position: absolute;
     top: 25%;
     left: 25%;
     width: 50%;
     height: 50%;
     padding: 16px;
     background: #fff;
     color: #333;
     z-index:1002;
     overflow: auto;
}

Ver ejemplo sólo con CSS

Ahora, lo echamos a andar. A ambos div‘s debemos darle id‘s únicos, los que nos ayudarán a identificar los elementos que serán mostrados vía Javascript. La orden para ejecutarlos es en Javascript puro:

document.getElementById(‘light’).style.display=’block’;
document.getElementById(‘fade’).style.display=’block’

Y a través de Mootools:

$(‘light’).setStyle(‘display’, ‘block’);
$(‘fade’).setStyle(‘display’, ‘block’);

Lo que dice ahí, en castellano universal es: toma los elementos con el id light y fade, y agrégales estilo display: block; a cada uno. O sea, los hará aparecer desde display: none (oculto) a display: block; (visible).

Ver ejemplo funcionando con JS

Links

• Create a Lightbox effect only with CSS – no javascript needed

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