JSFiddle - React, Tailwind, and code Playground
HTML
<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>
CSS
html, 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;
}
JavaScript
$(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
}
});