Transiciones y paneles deslizantes

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!

seleccionar

• inicio
• imágenes
• otra más
• última

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>