[SOLUCIONADO] Slider 100% css ¿transiciones?

sebandrescc2 · #1 (**permalink**) 09/10/2014, 23:37

Hola

Como dice el titulo, actualmente tengo un slider 100% css en mi web, ya que es una plantilla antigua wordpress 3.0.1, y jquery me genera muchos conflctos

Mi duda es... ¿como puedo hacer para que al cargar el sitio comiencen a pasar una tras otra cada x segundos??

css

Código CSS:

Ver original/*************************** Slider ***************************/
#cc-slider {
    text-align: center;
    margin: 0 auto;
    max-width: 850px;
}
 
#cc-slider input {
    display: none;
}
 
#cc-slider label, a {
    color: #02ADEF;
    cursor: pointer;
    text-decoration: none;
}
#cc-slider label:hover {
    color: #02ADEF !important;
}
 
#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }
 
 
#overflow {
    width: 100%;
    overflow: hidden;
}
 
#cc-slides article img {
    width: 100%;
}
 
#cc-slides .inner {
    width: 500%;
    line-height: 0;
}
 
#cc-slides article {
    width: 20%;
    float: left;
}
 
#controls {
    margin: -8% 0 0 84%;
    width: 15%;
    height: 50px;
}
 
#controls label { 
    display: none;
    width: 50px;
    height: 50px;
    
}
 
#active {
    margin: 23% 0 0;
    text-align: center;
}
 
#active label {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #f89e67;
}
 
#active label:hover {
    background: #ccc;
    border-color: #777 !important;
}
 
#controls label:hover {
    opacity: 0.8;
}
 
#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1) {
    background: url('http://partnerrestorant.cl/slider/images/next.png') no-repeat;
    float: right;
    margin: 0 10px 0 0;
    display: block;
    background-color:#02ADEF;
}
 
 
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
    background: url('http://partnerrestorant.cl/slider/images/prev.png') no-repeat;
    float: left;
    margin: 0 0 0 17px;
    display: block;
    background-color:#02ADEF;
}
 
 
 
/* cctooltip Box */
 
.cctooltip {
    
    color: #FFFFFF;
    font-style: italic;
    line-height: 20px;
    margin-top: 150px;
    opacity: 0;
    position: absolute;
    text-align: left;
    -webkit-transform: translateZ(0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
 
.cctooltip h3 {
    color: #FFFFFF;
    margin: 0 0 5px;
    font-weight: normal;
    font-size: 16px;
    font-style: normal;
    background: none repeat scroll 0 0 #222222;
    padding: 5px;
}
.cctooltip h4 {
    color: #FFFFFF;
    margin: 0 0 5px;
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    background: none repeat scroll 0 0 #222222;
    padding: 5px;
    text-align:right;
    width:200px;
}
 
 
 
/* cc-slider Styling */
 
#cc-slides {
    margin: 0px 0 0;
    
    
    padding: 0.3%;
    
    background: #0E4058;
    
}
 
 
/* Animation */
 
#cc-slides .inner {
    -webkit-transform: translateZ(0);
    -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
 
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
 
#cc-slider {
    -webkit-transform: translateZ(0);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
 
#controls label{
    -webkit-transform: translateZ(0);
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}
 
#slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
#slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
#slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
#slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip,
#slide5:checked ~ #cc-slides article:nth-child(5) .cctooltip {
    opacity: 1;
    -webkit-transition: all 1s ease-out 0.6s;
    -moz-transition: all 1s ease-out 0.6s;
    -o-transition: all 1s ease-out 0.6s;
    transition: all 1s ease-out 0.6s;
}

y en el header de mi plantilla

Código HTML:

<!-- Cabecera-->

				<div class="container" style="width: 900px;">
    <article id="cc-slider">
      <input checked="checked" name="cc-slider" id="slide1" type="radio">
      <input name="cc-slider" id="slide2" type="radio">
      <input name="cc-slider" id="slide3" type="radio">
      <input name="cc-slider" id="slide4" type="radio">
      <!--input name="cc-slider" id="slide5" type="radio"-->
      <div id="cc-slides" style="height: 240px;">
        <div id="overflow">
          <div class="inner">
            <article>
              <div class="cctooltip">
                <h3>Ideal para su Restorant</h3>
                <h4>Más sobre Partner Restorant <a href="http://www.partnerrestorant.cl/?page_id=39">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-1.jpg"> 
            </article>
            <article>
              <div class="cctooltip">
                <h3>Ideal para gestión de alimentos</h3>
                <h4>Más sobre Partner Food <a href="http://www.partnerrestorant.cl/?page_id=939">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-2.jpg"> </article>
            <article>
              <div class="cctooltip">
                <h3>NightClub / Discoteque</h3>
                <h4>Más sobre nuestros softwares <a href="http://www.partnerrestorant.cl/?page_id=12">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-3.jpg"> </article>
            <article>
              <div class="cctooltip">
                <h3>Complemente su software</h3>
                <h4>Más sobre Partner Biométrico <a href="http://www.partnerrestorant.cl/?page_id=39">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-4.jpg"> </article>
            <!--article>
              <div class="cctooltip">
                <h3>Fashion / Sport / Photography</h3>
                <h4>By <a href="#">codeconvey</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-1.jpg"> </article-->
          </div>
        </div>
      </div>
      <div id="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>

      </div>
    </article>

	
  </div>


			</div>

Ojalá alguien me pueda echar una mano, aunque sea forzosamente con algo de js

juangemelo01 · #2 (**permalink**) 10/10/2014, 03:24

Lo que tendrias que hacer seria uso de las propiedades css de animation y keyframes
por ejemplo, supongamos que tenemos en tu slider 5 elementos (en tu caso son Articulos, pero me expresare como "elemento" a lo largo de mi respuesta

), el primer elemento de esos 5 tiene un ID llamado "bann", a bann en la hoja de estilo le tendrías que agregar las siguientes propiedades

Código:

#bann{
     //"Intercambiar" es el nombre de la animacion, puede ser el nombre que gustes//      
     animation-name: intercambiar;

      //la velocidad de la animacion, linear permite que la velocidad sea constante tanto al comienzo como al final//          
     animation-timing-function: linear;
    
    //Permite que la animacion se revita n numero de veces, si ponemos infinite, no dejara de repetirce//
     animation-iteration-count: infinite; 
  
    //Tiempo que durara la animacion//
    animation-duration:35s;

   //Estas son algunas de las propiedades, si quieres hacerlo mas compacto, puedes dejarlo de la siguiente forma//
   animation: intercambiar linear infinite 30s;

}

Recuerda poner también los prefijos, -webkit-, -moz- etc. aun que si usas Prefixfree o algo parecido, ya te ahorraste el trabajo

Ahora bien, vamos a crear los keyframes, si te gustan las matemáticas, te vas a divertir un buen rato con esto

vamos a dividir esto en 3 partes (la 3ra ya no usamos las matematicas

):
1° Tenemos indicado en la animación un tiempo de 30 Segundos y supongamos que tengo 5 elementos para mostrar en el slider, si hacemos una división sencilla, sabemos que cada elemento se mostrara 6 segundos, hasta aquí no hay ningun problema.
2° los keyframes trabajan en porcentaje desde el 0% hasta el 100%, si nosotros dejamos indicada una transición asi, nunca se detendrán los elementos el tiempo suficiente para apreciarlo, por lo tanto, haremos "cortes" entre las transiciones para que se detengan un rato (llamemosle tiempo muerto) y después, pueda efectuarse la transición, asi que comenzamos

sabemos que nuestro tiempo de la animación son 30 Segundos, esto vendría siendo el 100%, pero, como tenemos 5 elementos, vamos a dividir ese 100% entre de 5, el resultado es del 20%, por lo tanto, cada 20% iremos efectuando un movimiento.

3° Una vez que tenemos establecido el porcentaje exacto de cada corte, procedemos a ponerlo en el keyframe, en este caso, vamos a suponer que nuestro elemento individual mide 300px de ancho, y todo miden lo mismo, ademas que estan uno a lada del otro sin ningun margen ( aplicando la propiedad float:left;)

Código:

@keyframes intercambiar {
 	 0%{left: 0px;  }
 	 20%{left:-300px; }
 	 40%{left:-600px; }
 	 60%{left:-900px; }
 	 80%{left:-1200px; }
 	 100%{left:0px; } //para que la animación regrese al principio y pase por todas las anteriores//
}

pero, como lo explique anteriormente, si lo dejamos asi, nuestra animación no se detendría en ningún momento y avanzara fluida-mente del 0% al 100% sin darnos tiempo realmente de apreciar nuestro contenido, por lo que haremos los cortes

Código:

@keyframes intercambiar {
         0%{left: 0px;  }
         19%{left: 0px;  }

         20%{left:-300px; }
         39%{left:-300px; }

         40%{left:-600px; }
         59%{left:-600px; }

 	 60%{left:-900px; }
 	 79%{left:-900px; }

 	 80%{left:-1200px; }
 	 99%{left:-1200px; }

 	 100%{left:0px; } //para que la animación regrese al principio y pase por todas las anteriores//
}

como puedes ver, nuestro corte lo hacemos durante el 19%(Tiempo muerto) de la animación por elemento, ese 1% lo usamos para movernos(Tiempo activo)

Espero que te sirva amigo, cualquier duda, comenta

pzin · #3 (**permalink**) 10/10/2014, 15:16

Algo más simplificado:

Código CSS:

Ver original@keyframes intercambiar {
  0%, 19%, to { left: 0 }
  20%, 39%    { left: -300px }
  40%, 59%    { left: -600px }
  60%, 79%    { left: -900px }
  80%, 99%    { left: -1200px }
}

sebandrescc2 · #4 (**permalink**) 12/10/2014, 11:41

Hola amigos

Les agradezco el tiempo que se dieron en responder. La verdad es que me queda clarísimo.
No sabia lo de Prefix Free, esta bueno.

Saludos y gracias una vez más