Hola a todos comunidad,
Esta vez quería deciros que he conseguido simular el efecto que deseaba.
Quería agradecer todo el interés que me habéis mostrado, es por ello que quería compartir el código con ustedes:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<style>
body{
background-color: grey;
}
#cabecera{
width: 500px;
height: 250px;
margin:auto;
background-image: url("img/mapa.jpg");
}
/* Damos un tamaño a las imagenes GPS */
.imgGPS1, .imgGPS2, .imgGPS3, .imgGPS4, .imgGPS5{
width: 30px;
height: 30px;
}
/* Posicionamos cada imagen GPS sobre la cabecera */
.imgGPS1{
margin-left: 50px;
margin-top: 20px;
}
.imgGPS2{
margin-left: 100px;
margin-top: 80px;
}
.imgGPS3{
margin-left: 250px;
margin-top: 40px;
}
.imgGPS4{
margin-left: 300px;
margin-top: 30px;
}
.imgGPS5{
margin-left: 350px;
margin-top: 20px;
}
/* Creo las clase y la animación(keyframe) */
.claseGPS{
-webkit-animation: 2s aumentar;
-moz-animation: 2s aumentar;
}
@keyframes aumentar{
20% {
transform: scale(1.2);
}
40%, 80% {
transform: scale(1.4);
}
65% {
transform: scale(1.2);
}
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$(".imgGPS1, .imgGPS2, .imgGPS3, .imgGPS4, .imgGPS5").hide();
$(".imgGPS1").fadeIn(500, function(){
$(".imgGPS1").addClass("claseGPS");
});
$(".imgGPS2").fadeIn(1000, function(){
$(".imgGPS2").addClass("claseGPS");
});
$(".imgGPS3").fadeIn(2000, function(){
$(".imgGPS3").addClass("claseGPS");
});
$(".imgGPS4").fadeIn(3000, function(){
$(".imgGPS4").addClass("claseGPS");
});
$(".imgGPS5").fadeIn(4000, function(){
$(".imgGPS5").addClass("claseGPS");
});
});
</script>
</head>
<body>
<div id="container">
<div id="cabecera">
<img class="imgGPS1" src="img/gps.png">
<img class="imgGPS2" src="img/gps.png">
<img class="imgGPS3" src="img/gps.png">
<img class="imgGPS4" src="img/gps.png">
<img class="imgGPS5" src="img/gps.png">
</div>
</div>
</body>
</html>
pd: Se que el código no es gran cosa pero simula el efecto que buscaba...
Un saludo a todos!
