1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Aporte Falcon masters tarjetas animadas 3D, responsive "mejorado"

Tema en 'HTML y CSS' comenzado por victorcf999, 22 de Agosto de 2017.

  1. victorcf999

    victorcf999 Nuevo Miembro

    Se incorporó:
    19 de Abril de 2017
    Mensajes:
    29
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Antes de nada agradecer a FalconMasters por todos sus tutoriales.

    Tutorial de FalconMasters:

    Estaba implantando las tarjetas animadas en mi pagina web y ya de paso decidi darle otra forma cuando se trata de dispositivos mas pequeños y como esta comunidad siempre me ha ayudado pues se me ha ocurrido compartirlo con vosotros por si alguien lo quiere usar o le interesa.

    Basicamente se trata de que cuando la pantalla es demasiado pequeña para albergar las 3 tarjetas , esto se convierte en un slide de tarjetas, y si fuera aun mas pequeña los botones se situan abajo.

    Si quereis verlo en accion http://trainyourc.esy.es/productos.html es una web que utilizo para hacer pruebas

    Ver imagenes adjuntas

    Antes de nada decir que seguramente el codigo se podra optimizar o hacerlo de otra forma mas facil.


    mini.PNG normal.PNG large.JPG



    Cuando haces hover te muestra la tarjeta por detras, en moviles al pinchar sobre ella y vuelve a su estado original pinchando fuera o dandole a cuanquier flecha


    Codigo:

    HTML:
    <div class="pimg4">
        <img src="images/anterior_flecha.png" id="anterior" class="pointer" onclick="controlTarjetas(-1)"/>
        <div class="contenedor_tarjeta pointer">
             
                    <figure id="tarjeta1">
                        <img src="images/productos/revlon_producto-min.png" class="frontal" alt="Revlon">
                        <figcaption class="trasera">
                            <h2 class="titulo">Revlon Be Fabulous</h2>
                            <hr>
                            <p>Formulado para ayudar a prolongar los resulta dos del tratamiento profesional de la recuperacion del pelo. Se vende exclusivamente en salones de peluqueria. Reduccion de la rotura del pelo del 98%.<br>Contiene:<br>Champu de keratina + Acondicionador de keratina + Serum reparador</p>
                        </figcaption>
                    </figure>
             
            </div>
            <div class="contenedor_tarjeta pointer">
             
                    <figure id="tarjeta2">
                        <img src="images/productos/uniqone-min.png" class="frontal" alt="Revlon">
                        <figcaption class="trasera">
                            <h2 class="titulo">Uniq One</h2>
                            <hr>
                            <p>Con la compra de Uniq One llevate un champu totalmente gratis, hasta fin de existencias, disponible en version Classic y Coconut<br>Uniq one el tratamiento en spray sin aclarado que ofrece al cabello los diez beneficios principales que necesita</p>
                        </figcaption>
                    </figure>
             
           </div>
           <div class="contenedor_tarjeta pointer">
             
                    <figure id="tarjeta3">
                        <img src="images/productos/orofluido-amazonia-min.png" class="frontal" alt="Revlon">
                        <figcaption class="trasera">
                            <h2 class="titulo">Oro Fluido Amazonia</h2>
                            <hr>
                            <p>Reparacion intensa, reconstruccion y volumen.<br>Manten tu cabello sano, reparado y con mucho cuerpo.<br> Sus formulas nutrientes ayudan a reconstruir la fibra, al tiempo que acondicionan y reparan el cabello para dejarlo suave y flexible, con un brillo expectacular y manejable</p>  
                        </figcaption>
                    </figure>
             
            </div>
            <img src="images/siguiente_flecha.png" id="siguiente" class="pointer" onclick="controlTarjetas(1)">
     
     
        </div>
     
    Código (CSS):
    .pimg4{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        height: 100%;
        width: 100%;
        background-image: url('../images/wallpaper-min.png');
        align-items: center;
    }

    .contenedor_tarjeta{
        margin-top: 80px;
    }
    .contenedor_tarjeta a {
        display: inline-block;
    }

    .contenedor_tarjeta:hover figure {
        transform: perspective(600px) rotateY(180deg);
        -webkit-box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.25);
        -moz-box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.25);
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.25);
    }

    figure {
        width: 300px;
        height: 350px;
        margin:0;
        position: relative;
        transition: all ease .5s;
        transform-style: preserve-3d;
        transform: perspective(600px) rotateY(0deg);
    }

    figure .frontal,
    figure .trasera {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        transition: all ease .5s;
        }

    figure .frontal {
        display: block;
        background-color: rgba(0,0,0,0.62);
        /* Podemos ocultar la imagen al da la vuelta si lo queremos */
        /*backface-visibility: hidden;*/
    }

    figure .trasera {
        position: absolute;
        top: 0;
        padding: 20px;
        color: #fff;
        transform: perspective(600px) rotateY(180deg);
        backface-visibility: hidden;
        overflow: auto;
        text-align: center;
    }

    .contenedor_tarjeta:nth-child(2) figure .trasera{
        background: rgba(120,37,143,0.7);
    }

    .contenedor_tarjeta:nth-child(3) figure .trasera{
        background: rgba(216,15,18,0.7);
    }

    .contenedor_tarjeta:nth-child(4) figure .trasera{
        background: rgba(44,82,41,0.7);
    }

    figure .trasera .titulo {
        color: #fff;
        font-weight: normal;
        margin-bottom: 20px;
        font-family: 'Roboto', sans-serif;
        font-size: 24px;
    }

    figure .trasera hr {
        height: 2px;
        background: #fff;
        border: none;
        margin-bottom: 20px;
        opacity: .5;
    }

    figure .trasera p {
        font-family: 'Open Sans', sans-serif;
        line-height: 22px;
        font-size: 14px;
    }

    #tarjeta3 img{
        padding:20px;
    }

    #anterior{
        background-image:url(../images/anterior_flecha.png);
        height: 45px;
        width: 45px;
        background-color:rgba(0,0,0,.5);
        border-radius:45px;
        margin-right: 25px;
    }
    #siguiente{
        background-image: url(../images/siguiente_flecha.png);
        height: 45px;
        width: 45px;
        background-color:rgba(0,0,0,.5);
        border-radius:45px;
        margin-left: 25px;
    }
    @media(max-width:470px){
        #anterior{
            order :2;
            margin-right:120px;
        }
        #siguiente{
            order:3;
        }
    }
    .pimg4{
        position:relative;
        opacity: 0.70;
        background-position:center;
        background-size:cover;
        background-repeat: no-repeat;
        background-attachment:fixed;
        display: flex;
        vertical-align: middle;
    }
    Código (Javascript):
    function control(){
     
        var w=$(window).width();
     
        if( w <1050){
            $("#tarjeta1").css({"display":"flex" });
            $("#tarjeta2").css({"display":"none" });
            $("#tarjeta3").css({"display":"none" });
            $(".pimg4").css({"justify-content":"center" });
            $("#anterior").css({"display":"flex" });
            $("#siguiente").css({"display":"flex" });
        }else{
            $(".pimg4").css({"justify-content":"space-around" });
            $("#anterior").css({"display":"none" });
            $("#siguiente").css({"display":"none" });
            $("#tarjeta1").css({"display":"flex" });
            $("#tarjeta2").css({"display":"flex" });
            $("#tarjeta3").css({"display":"flex" });
        }
        }
    var num=1;
    function controlTarjetas(x){
        num+=x;
        if(num==4){
            num=1;
        }
        if(num==0){
            num=3;
        }
        switch (num){
            case 1:
            $("#tarjeta1").css({"display":"flex" });
            $("#tarjeta2").css({"display":"none" });
            $("#tarjeta3").css({"display":"none" });
            break;
            case 2:
            $("#tarjeta1").css({"display":"none" });
            $("#tarjeta2").css({"display":"flex" });
            $("#tarjeta3").css({"display":"none" });
            break;
            case 3:
            $("#tarjeta1").css({"display":"none" });
            $("#tarjeta2").css({"display":"none" });
            $("#tarjeta3").css({"display":"flex" });
            break;
            default:
            break;      
        }  
    }

    $(document).ready(function(){
        control();
    });

    $(window).resize(function(){
        control();  
    });
    El codigo es muy casero perdonarme si veis cosas un tanto raras

    Espero que os sirva, y agradeceros vuestra ayuda en otros posts

    Un saludo
     
    A AngelKrak le gusta esto.

Comparte esta página