Autor Tema: Como creo este efecto en CSS3 ?  (Leído 1471 veces)

0 Usuarios y 1 Visitante están viendo este tema.

akatsuki

  • Visitante
Como creo este efecto en CSS3 ?
« : julio 28, 2014, 05:41:19 pm »
Necesito crear un efecto como el de esta pagina https://toyotagenoten.nl/ en que se ve que las imagenes desaparecen y aparecen otras, el punto esque necesito saber como hacerlo en CSS3, alguien sabe como se hace o necesito Javascript para esto?

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11658
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re:Como creo este efecto en CSS3 ?
« Respuesta #1 : julio 28, 2014, 08:54:49 pm »
ya revisaste como lo hicieron ellos ahi mismo esta la respuesta XD

Código: [Seleccionar]
.image-header-background {
position: absolute;
top: 50%;
right: 0;
left: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}

.image-header-background-carrousel {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
}



Código: [Seleccionar]
<figure class="image-header-background-carrousel">
            <img class="image-header-background" data-image-id="2" src="/content/header/content-header2.jpg" alt="">
            <img class="image-header-background" data-image-id="1" src="/content/header/content-header4.jpg" alt="" style="opacity: 0.5100000000000051;">
        </figure>


aqui podes encontrar un tuto mas elaborado por si queres probar sino busca en google, css3 slideshow y vas a encontrar monton de alternativas

http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

akatsuki

  • Visitante
Re:Como creo este efecto en CSS3 ?
« Respuesta #2 : julio 28, 2014, 09:12:09 pm »
hey gracias  :thumbsup: ya lo reviso