JMiur [E]

Esto que llaman paneles deslizantes es, en realidad, otra forma de crear un slideshow con textos añadidos y efectos varios, desarrollado por codrops y que hace uso extremo del CSS3.

Tal vez pueda ser un poco engorroso pero los resultados son interesantes y hay varios demos 1, 2, 3, 4, que difieren en las animaciones porque, esencialmente, tienen la misma estructura.

Sólo muestro las variantes de uno de ellos que, por supuesto, no será visible en Internet Explorer. El HTML es el siguiente:
<div class="cr-container">
  <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
  <label for="select-img-1" class="cr-label-img-1">1</label>
  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
  <label for="select-img-2" class="cr-label-img-2">2</label>
  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
  <label for="select-img-3" class="cr-label-img-3">3</label>
  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
  <label for="select-img-4" class="cr-label-img-4">4</label><div class="clr">
</div>
<div class="cr-bgimg">
  <div>
    <span>Slice 1 - Image 1</span>
    <span>Slice 1 - Image 2</span>
    <span>Slice 1 - Image 3</span>
    <span>Slice 1 - Image 4</span>
  </div>
  <div>
    <span>Slice 2 - Image 1</span>
    <span>Slice 2 - Image 2</span>
    <span>Slice 2 - Image 3</span>
    <span>Slice 2 - Image 4</span>
  </div>
  <div>
    <span>Slice 3 - Image 1</span>
    <span>Slice 3 - Image 2</span>
    <span>Slice 3 - Image 3</span>
    <span>Slice 3 - Image 4</span>
  </div>
  <div>
    <span>Slice 4 - Image 1</span>
    <span>Slice 4 - Image 2</span>
    <span>Slice 4 - Image 3</span>
    <span>Slice 4 - Image 4</span>
  </div>
  </div>
  <div class="cr-titles">
    <h3>
      <span class="big"> titulo panel 1 </span>
      <span class="small"> texto inferior panel 1 s</span>
    </h3>
    <h3>
      <span class="big"> titulo panel 2 </span>
      <span class="small"> texto inferior panel 2 </span>
    </h3>
    <h3>
      <span class="big"> titulo panel 3 </span>
      <span class="small"> texto inferior panel 3 </span>
    </h3>
    <h3>
      <span class="big"> titulo panel 4 </span>
      <span class="small"> texto inferior panel 4 </span>
    </h3>
  </div>
</div>
Si esto les parece muy largo ... ni miren el CSS.

<style>
  .cr-container { /* el contenedor */
    border: 10px solid #FFF;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 600px;
  }
  .cr-container br {display:none;}
  .cr-container label { /* la navegación inferior */
    color: #98541C;
    cursor: pointer;
    float: left;
    font-size: 30px;
    height: 32px;
    line-height: 30px;
    margin-top: 350px;
    position: relative;
    text-align: center;
    width: 150px;
    z-index: 1000;
  }
  .cr-container label:before { 
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
    content: "";
    height: 32px;
    left: 50%;
    margin-left: -16px;
    position: absolute;
    width: 32px;
    z-index: -1;
  }
  .cr-container label:after { /* una línea vertical que separa los paneles */
    background: -moz-linear-gradient(#FFF,#000,#FFF);
    background: -webkit-linear-gradient(#FFF,#000,#FFF);
    background: linear--linear-gradient(#FFF,#000,#FFF);
    bottom: -20px;
    content: '';
    height: 400px;
    position: absolute;
    right: 0px;
    width: 1px;
  }
  .cr-container label.cr-label-img-4:after { width: 0px; }
  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
    color: #000;
  }
  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
    background: #FFF;
    box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);
  }
  .cr-container input { display: none; }

  /* las imagenes son fondos */
  .cr-bgimg {
    background-repeat: no-repeat;
     background-position: 0 0;
    height: 400px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 600px;
    z-index: 1;
  }
  .cr-bgimg div {
    background-repeat: no-repeat;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 150px;
  }
  .cr-bgimg div span {
    height: 100%;
    left: 150px;
    position: absolute;
    text-indent: -9000px;
    top: 0px;
    width: 100%;
    z-index: 2;
  }
  .cr-bgimg div:nth-child(odd) span { left: -150px; }

  /* cada una de ellas */
  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) { background-image: url(URL_IMAGEN_1); }
  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) { background-image: url(URL_IMAGEN_2); }
  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) { background-image: url(URL_IMAGEN_3); }
  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url(URL_IMAGEN_4); }
  /* los panales tiene 150 pixeles de ancho */
  .cr-bgimg div:nth-child(1) span { background-position: 0px 0px; }
  .cr-bgimg div:nth-child(2) span { background-position: -150px 0px; }
  .cr-bgimg div:nth-child(3) span { background-position: -300px 0px; }
  .cr-bgimg div:nth-child(4) span { background-position: -450px 0px; }

  /* las animaciones */
  .cr-container input:checked ~ .cr-bgimg div span {
    -moz-animation: slideOutRight 0.6s ease-in-out;
    -webkit-animation: slideOutRight 0.6s ease-in-out;
  }
  @-webkit-keyframes slideOutRight{
    0%{ left: 0px; }
    100%{ left: 150px; }
  }
  @-moz-keyframes slideOutRight{
    0%{ left: 0px; }
    100%{ left: 150px; }
  }
  .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span {
    -moz-animation: slideOutLeft 0.6s ease-in-out;
    -webkit-animation: slideOutLeft 0.6s ease-in-out;
    animation: slideOutLeft 0.6s ease-in-out;
  }
  @-webkit-keyframes slideOutLeft{
    0%{ left: 0px; }
    100%{ left: -150px; }
  }
  @-moz-keyframes slideOutLeft{
    0%{ left: 0px; }
    100%{ left: -150px; }
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {
    -moz-transition: left 0.5s ease-in-out;
    -webkit-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    -moz-animation: none;
    -webkit-animation: none;
    animation: none;
    left: 0px;
    z-index: 10;
  }

  /* los textos en geenral */
  .cr-titles h3 { font-weight: normal; }
  .cr-titles h3 span {
    left: 0px;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 10000;
  }
  /* el texto superior más grande */
  .cr-titles h3 span.big {
    color: #FFF;
    font-family: Helvetica;
    font-size: 60px;
   left: 0px;
    letter-spacing: -2px;
    text-shadow: 1px 2px 1px #000;
    top: 230px;
    -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out;
    -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  }
  /* el texto inferior más pequeño */
  .cr-titles h3 span.small {
    background: rgba(255, 255, 255, 0.7);
    color: #000;
    font-family: Tahoma;
    font-size: 14px;
    letter-spacing: 0;
    margin-top: 100px;
    opacity: 0;
    padding: 5px 0;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transition: opacity 0.8s ease-in-out;
    -webkit-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
  }

  /* animaciones de los textos */
  .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {
    opacity: 0;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
     opacity: 1;
  }
</style>


Slice 1 - Image 1Slice 1 - Image 2Slice 1 - Image 3Slice 1 - Image 4
Slice 2 - Image 1Slice 2 - Image 2Slice 2 - Image 3Slice 2 - Image 4
Slice 3 - Image 1Slice 3 - Image 2Slice 3 - Image 3Slice 3 - Image 4
Slice 4 - Image 1Slice 4 - Image 2Slice 4 - Image 3Slice 4 - Image 4

esta es la imagenUn ejemplo de paneles deslizantes

algunos efectosLorem ipsum dolor sit amet, consectetuer adipiscing elit.

usando CSS3wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

personalizabledefiniendo estilos para cada panel

votar

14 comentarios:

Unknown  

Muy útil y fácil de editar. Gracias.

JMiur  

Lo es, tiene sus bemoles pero por lo sofisticado del resultado, es bastante simple.

Responder
Beben Koben  

awesome...fantastico :D

JMiur  

¿spanish? OH good :D

Responder
Amiitha Aoi  

La verdad si es bastante largo, tanto el html como el css... pero el resultado es muy bueno! tal vez lo implemente en mi blog ;)

pd: Espero que pase un feliz día del amigo ^^ se ha ganado mi respeto, cariño y admiración! gracias por echarme siempre una manito cuando le pido ayuda~☆ tenga un buen día JMiur!

JMiur  

Gracias, Amiitha :D

Responder
tonyman arce  

q xevere sera d utilidad graxias

Responder
Gem@  

A este paso fuera scripts!!
Bueno es un decir pero hace unos años conseguir esto con CSS era un sueño :)

JMiur  

Sin duda hay algo de eso :D

Responder
Pliactom  

Ya tiene rato que no me venía a asomar a tu blog. Ya estaba olvidando la forma tan sencilla en que muestras el CSS y el HTML. Saludos JMiur.

JMiur  

Saludos, Pliactom

Responder
Unknown  

no me aparece el número cuatro

JMiur  

Sin ver tu ejemplo es imposible responder nada.

Responder
Ros  

Increible y muy facil de implementar si te las defendes aunque sea un poco con css.

Muchas gracias

Responder

¿Quiere dejar un comentario?

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

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 ...

Suscribirse a los comentarios
 
CERRAR