Foros del Web - Ver Mensaje Individual

mardojai · #19 (**permalink**) 07/04/2015, 13:50

El siguiente ejemplo, esta diseñado con la siguiente estructura de archivos:

index.html
style.css
animacion.js

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" />
        
        <!-- Incluimos Jquery -->
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        
        <!-- Incluimos el script de la animacion -->
        <script src="animacion.js"></script>
    </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 {
    background: #666;
    height: 300px;
    width: 450px;
    z-index: 2;
}
 
.tablet {
    background: #363636;
    height: 200px;
    right: 0px;
    top: 100px;
    width: 300px;
    z-index: 1;
}
 
.phone {
    background: #085ed3;
    bottom: 0px;
    height: 180px;
    left: 400px;
    width: 100px;
    z-index: 3;
}
 
#content {
    background: #000;
    color: #FFF;
    height: 800px;
    position: relative;
    z-index: 9999;
}

animacion.js

Código Javascript:

Ver original$(document).ready(function(){
    
    if(screen.width > 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) { // Limitamos la animacion a dispositivo con pantalla mas grande que 800px
        var device = $('.device') // Todos los divs con la clase "device" los comvertimos en objetos de Jquery y en una variable.
        
        var laptop = $('.laptop') // La laptop la comvertimos en objeto de Jquery y en una variable.
        var tablet = $('.tablet') // La tablet la comvertimos en objeto de Jquery y en una variable.
        var phone = $('.phone') // El phone la comvertimos en objeto de Jquery y en una variable.
        
        device.css('display','none'); // Hacemos que no se muestren todos los divs con la clase "device".
        laptop.css('left','-800px'); // Ponemos la laptop -800px a la izquierda
        tablet.css('right','-800px'); // Ponemos la tablet -800px a la derecha
        phone.css('bottom','-400px'); // Ponemos el phone -800px para abajo
        
        device.fadeIn(100); // Ahora mostramos los divs con la clase "device".
        laptop.animate({left: '0px'}, 1000); // Hacemos que entre la laptop
        tablet.animate({right: '0px'}, 1000); // Hacemos que entre la tablet
        phone.animate({bottom: '0px'}, 1000); // Hacemos que entre el phone
        
    }
    
});

Aquí esta una demostración: DEMO
Y un link de descarga: DESCARGA

Se que el código no es perfecto, pero es todo lo que puedo dar. Y es cierto, una buena opción puede ser hacerlo directamente con animaciones css.

Saludos