entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Efecto aparecer globo en mapa.

Pues me gustaría saber como reproducir el efecto que hace uso esta pagina en su cabecera, digamos que yo también lo quiero en mi pagina web, pero con código(en javascript o jquery), por que al parecer es una imagen o gif. La pagina en cuestión es la siguiente:

http://www.publi.com/

pd: En realidad no se por donde empezar...Si alguien es tan amable de hacerme un ejemplo sencillo a trabes de jsfiddle o pasarme un código de Internet que reproduzca esa secuencia lo agradecería mucho(el problema es que no se que palabras introducir en Internet para ver ejemplos por que no se como se denomina), he intentado algo con los efectos que ofrece jQuery (fadeIn, fadeOut...) pero su efecto para esto es muy poco atractivo y no logro acercarme al deseado efecto.

Resumiendo, quiero que parezcan unos globos(ancla, flechita, gps...) de manera aleatoria sobre una imagen, no quiero haga uso de la API de Google ni nada por el estilo.

Se acepta el uso de librerías jQuery que facilite esa animación...

Un saludo!

0voto

Peter comentado

Creo que modificando el código a tu gusto y agregando las animaciones. Algo como jQuery Bullseye Plugin te puede servir para empezar como base.

No es el código exacto que necesitas, ni el ejemplo de código de lo que pides, por eso no lo pongo como respuesta y te lo dejo como una opción.

A ver si alguien nos deja un ejemplo de por lo menos un pin con lo que estas buscando.

Saludos.

0voto

pabeni comentado

Hola Peter que tal,

Mira el ejemplo que me has puesto no esta nada mal, pero no llega a suplir lo que busco...Esos globos que pones permiten una interactividad con el usuario mostrando un tooltip. Pero lo que yo deseo es generar de manera aleatoria unos globos que parezcan y se posicionen en una imagen(no quiero que haya interactividad ninguna)

Un saludo amigo!

0voto

Peter comentado

Por favor pon tus comentarios como comentarios y no como respuestas, porque no son respuestas y además no nos llega notificación a los que nos estas comentando. :)

En cuanto a lo que dices, efectivamente, pero puedes ponerlos sin tooltip, no son obligatorios y extender o modificar el script a tu gusto. Se me hace una buena base para hacer más o menos lo que quieres hacer.

Saludos.

0voto

pabeni comentado

Disculpa Peter lo hice mal a la hora de responder ;)

Mira realmente lo que más me interesa es el efecto de parecer con su progresión de aumento y disminución del mismo, en el ejemplo que me pusiste solo podría sacar provecho del posicionamiento.

Mirar ya no me interesa el hecho de que sea aleatorio simplemente con que parezcan por ejemplo 5 globos de manera secuencial(uno detrás de otro) y que hagan ese efecto.

pd: Como digo no os preocupéis en lo de la aleatoriedad(tampoco me hes muy importante).

Un saludo!

2 Respuestas

2votos

pabeni Puntos1090

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!

0voto

Leonardo-Tadei comentado

Felicitaciones y gracias por compartir la respuesta!

Marcala como la correcta así queda el tema solucionado.
Saludos cordiales

1voto

Leonardo-Tadei Puntos227320

Hola @pabeni,

ese sitio usa un plugin para WordPress llamado Revolution Slider:

http://revolution.themepunch.com/

No parece funcionar si no es sobre WordPress, tal vez por el editor visual que trae...

0voto

pabeni comentado

Hola que tal Leonardo-Tadei,

Bueno realmente no quiero ese efecto que también lo tiene la página que puse, si no lo que deseo es que aparezcan señales gps de manera aleatoria sobre una imagen(como en la imagen nº 5 del slider de la página que puse) o algo que se le parezca.

Se que esas animaciones son fáciles de implementar por ejemplo con adobe edge o similares, pero lo que deseo es realizar un efecto lo mas similar posible y con un lenguaje como puede ser javascript o con algún framework parecido.

Un saludo maestro!

0voto

Leonardo-Tadei comentado

Hola @pabeni,

es el Revolution Slider el que hace el efecto de los puntos que caen sobre el mapa en la imagen... de hecho toda la animación del slider de esa página está hecho con el compositor de esa herramienta.

Creo que et confundís creyendo que la herramienta solo hace el efecto de pasar las 5 publicidades...

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta