Foros del Web - Ver Mensaje Individual

mardojai · #20 (**permalink**) 07/04/2015, 15:36

Con css seria así:

Estructura de archivos:

index.html
style.css

index.html

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Animaci&oacute;n Jquery</title>
        
        <!-- Incluimos el css -->
        <link rel="stylesheet" type="text/css" href="style.css" />
        
        </head>
    <body>
        <div id="banner">
            <div id="devices">
                <!-- Cada dispositivo lo pondremos como un div -->
                <div class="device laptop"></div>
                <div class="device tablet"></div>
                <div class="device phone"></div>
            </div>
        </div>
        <!-- Div de relleno -->
        <div id="content">
                        
        </div>
    </body>
</html>

style.css

Código CSS:

Ver originalhtml, body {
    margin: 0;
    overflow-x: hidden;
}
 
#banner {
    background: #EEE;
    height: 380px;
}
 
#devices {    
    height: 380px;
    margin: 0px auto;
    position: relative;
    width: 700px;
}
 
.device {
    position: absolute;
}
 
.laptop {
    animation: laptop 1.5s;
    -webkit-animation: laptop 1.5s;
    background: #666;
    height: 300px;
    width: 450px;
    z-index: 2;
}
 
.tablet {
    animation: tablet 1.5s;
    -webkit-animation: tablet 1.5s;
    background: #363636;
    height: 200px;
    right: 0px;
    top: 100px;
    width: 300px;
    z-index: 1;
}
 
.phone {
    animation: phone 1.5s;
    -webkit-animation: phone 1.5s;
    background: #085ed3;
    bottom: 0px;
    height: 180px;
    left: 400px;
    width: 100px;
    z-index: 3;
}
 
@-webkit-keyframes laptop {
    from {left: -800px;}
    to {left: 0px;}
}
@keyframes laptop {
    from {left: -800px;}
    to {left: 0px;}
}
 
@-webkit-keyframes tablet {
    from {right: -800px;}
    to {right: 0px;}
}
@keyframes tablet {
    from {right: -800px;}
    to {right: 0px;}
}
 
@-webkit-keyframes phone {
    from {bottom: -400px;}
    to {bottom: 0px;}
}
@keyframes phone {
    from {bottom: -400px;}
    to {bottom: 0px;}
}
 
#content {
    background: #000;
    color: #FFF;
    height: 800px;
    position: relative;
    z-index: 9999;
}

Ejemplo: https://jsfiddle.net/21aoLz1j/1/embedded/result/

Saludos!