Simulando un efecto negativo

24/mar/2008 5

Vi este efecto bastante interesante en un sitio web, y me atreví a intentar replicarlo a mí manera. Luego de fracasar en mi primer intento, decidí hacer trampa y revisé su código fuente. Me dí cuenta de que utilizaban una propiedad que no conocía, lo que me explicó mi anterior fracaso. Primero, un video de una captura tomada desde el mismo sitio web, para que vean a lo que me refiero. Luego, la explicación bastante simple.

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

SafariFirefoxInternet Explorer 7Opera

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!

Comentarios

  1. fearlex [#]

    Jajajajaja, ya me extranaba que funcionara en IE6. Pero buen tip.

    Gracias

  2. Webramientas [#]

    Muy buen efecto. Nunca se me habría ocurrido hacer algo así en una web, pero ahora ya lo apunto para el futuro.

  3. Victor San Martin [#]

    genial el efecto y tan simple que es..!! genial.

    Buen tip, apuntando sin duda.

  4. jose roberto (vevni) [#]

    oye jorge me eh preguntado porque tu web tarda un poco en cargar, es por los efectos en js o tiene que ver tu servidor, con quien lo tienes hosteado?

  5. Jorge Epuñan [#]

    jose, en esas ultimas semanas dreamhost ha estado pesimo, tiene unos clusters abajo y eso ha afectado al resto, incluyendome. usualmente no tengo problemas de velocidad con mis sitios pero ha habido un descontento general por este tema no resuelto aun. siento q pase, espero se mejore definitivamente y pronto. salu2.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab