JMiur [E]

Aunque es algo experimental, la idea del diseñador Sergio Camalich es válida y tal vez muestre una alternativa en el uso de las transiciones entre páginas usando sólo CSS sobre la que habrá que seguir trabajando.

Los ejemplos pueden verse en estos demos 1 2 3 y acá veremos si son aplicables a una entrada cualquiera del blog con las limitaciones del caso.

En este ejemplo, coloco todo en un DIV al que debo darle una dimensión precisa; en el ejemplo original eso se resuelve agregando overflow: hidden al body de la página y haciendo que la página tenga siempre una altura precisa de tal modo que no se vea el efecto indeseado del salto que se produce cuando se usa target, algo que acá es inevitable (o no tengo la menor idea si hay alguna forma de evitarlo).

inicio

Nunc nulla purus, malesuada ut vehicula et, suscipit sit amet eros? Duis lacinia luctus erat; nec venenatis nibh lobortis in.

Morbi tempor quam ac nibh sollicitudin rutrum. Sed ornare pretium libero vel viverra. Pellentesque tincidunt purus nulla, ullamcorper mattis risus. Maecenas commodo; massa a adipiscing lacinia, arcu nibh vulputate turpis, sit amet tristique enim ligula sit amet quam. Sed id eros diam; nec sagittis nisl.

Praesent ultrices, dui at egestas dictum posuere.

Cras cursus nulla nec enim euismod posuere. Cras eu leo et lorem dignissim commodo non at enim. Quisque consequat nisl id metus tempor bibendum. Proin eget dolor turpis. Curabitur vitae est erat.

imágenes

otra más

Ut nec nibh quis sapien congue sagittis sit amet at lorem? Nam tellus purus; suscipit non imperdiet in, lobortis sed odio. Proin eget odio non nibh semper massa nunc.


última

Donec elementum scelerisque massa, at accumsan orci fringilla sed. Nunc sed leo at turpis consequat accumsan. Maecenas non augue ac felis varius facilisis. Pellentesque interdum pharetra vestibulum!


El HTML tiene esta estructura:
<div id="pageTrans">

  <!-- el contenido de cada uno de los "paneles" -->
  <!-- el primero (el visible) es levemente distinto al resto -->
  <div id="panel1" class="content">
    <h4>PANEL 1</h4>
    <!-- cualquier contenido -->
  </div>

  <!-- los otros (los ocultos)  tienen la misma estructura -->
  <div id="panel2" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel3" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel4" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>

  <!-- la navegación a la izquierda -->
  <div id="selector">
    <h5> seleccionar </h5>
    <ul id="navigation">
      <li><a id="link-panel1" href="#panel1"> texto 1 </a></li>
      <li><a id="link-panel2" href="#panel2"> texto 2 </a></li>
      <li><a id="link-about" href="#about"> texto 3 </a></li>
      <li><a id="link-contact" href="#contact"> texto 4 </a></li>
    </ul>
  </div>

</div>
Y ahora el CSS que es donde hay que trabajar y ersonalziar proque todo depende de esas reglas:
<style>
  #pageTrans { /* elcontenedor */
    height: 490px;
    margin: 0 auto;
    position: relative;
    width: 580px;
  }

  /* la navegación izquierda */
  #selector {
    position: absolute;
    top: 20px;
    width: 135px;
    z-index: 2000;
  }
  #selector h5 { /* el texto "seleccionar" del ejemplo */ }
  #navigation {
    display: block;
    list-style: none;
    margin: 10px 0 0;
    z-index: 3;
  }
  #navigation a {
    border: 1px solid #FFFF;
    box-shadow: 0 0 15px #FFF inset;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 45px;
    margin: 0 0 10px;
    padding: 0 10px;
    text-align: center;
    text-transform: uppercase;
  }
  #navigation a:hover { background: Crimson; }

  /* las reglas de los paneles */
  .content {
    left: 180px;
    position: absolute;
    top: 0;
    width: 400px;
  }
  .content h4 { /* el título de cada panel */ }
  .panel {
    -moz-transition: all 0.6s ease-in-out 0s;
    -webkit-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    background-color: #101921;
    height: 100%;
    margin-left: -610px;
    position: absolute;
    width: 580px;
    z-index: 2;
  }
  .panel:target { margin-left: 0px; }

</style>

12 comentarios:

Graciela de Palomas  

Me encantó Jmiur :)

JMiur  

Buenos dias señora :D

Responder
Jox  

Felicitaciones, realmente son unos capos en los materiales y post que realizan.

Responder
Gem@  

Experimental y todo una maravilla que me ha encantado :)

JMiur  

Lástima que el tema del target aún no está resuelto pero, vamos por buen camino :D

Responder
Taillard  

Jmiur buenas nottes!
Ja mirastes y los nuovos sliders em 2D?
http://tympanus.net/codrops/2011/04/28/rotating-image-slider/

Responder
ma angeles lola zaragoza  

Hola..gracias por el post..peroo tengo una duda, y esk estoy inentando poner una imagen de fondo y no me deja..no aii manera,me gustaria saber si se puede o no!! saludos y grasiass!!

JMiur  

Una imagen de fondo ¿dónde? Habría que ver tu ejemplo.

Responder
EASAGIT GP  

muy bueno pero se podra de forma automatica???

JMiur  

¿Qué significa automático?

Klaus  

Debe querer decir utilizarlo en hover en lugar de tener que clicar.

JMiur  

Vaya uno saber lo que quiso decir y, como no se digna explicarlo, jamás nos enteraremos asi que no importa.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR