¿Alguien puede hacer una copia de este efecto jquery? [cerrado]

Estoy intentando durante horas imitar esto http://buildinternet.com/project/supersized/ expandiendo la demostración de la bola y estoy fallando cada vez. ¿Alguien puede ayudar y hacer una copia en jsfiddle?

preguntado el 27 de agosto de 11 a las 19:08

¿Qué tiene que ver ser niña con la pregunta? -

Soy un gurl también: 3 por favor como esta publicación: 3 -

Danos un ejemplo de lo que has probado hasta ahora. -

5 Respuestas

Puede encontrar el código relevante en el html (es un js referenciado):

    $('.circle-wrap').hover(
        function(){
            $('.circle',this)
                .stop()
                .animate({width : '150px', height : '150px', 'margin-top' : '-75px', 'margin-left' : '-75px'  }, 200);
        },
        function(){
            $('.circle',this)
                .stop()
                .animate({width : '100px', height : '100px', 'margin-top' : '-50px', 'margin-left' : '-50px'  }, 100);
        }
    );

Simplemente use un navegador con una función de "inspeccionar elemento" (Firefox tiene Firebird, Opera tiene Dragonfly, Safari y Chrome tienen características similares) y siga el rastro de la función.

Respondido 27 ago 11, 23:08

Así es como lo haría, tenga en cuenta que en IE tendrá cuadros en lugar de círculos.

Demo en vivo

JS

 $('.ball').hover(function(){
     $(this).animate({width : '250px', height : '250px', lineHeight : '250px'}, 500);
        }, 
 function(){
     $(this).stop().animate({width : '200px', height : '200px', lineHeight : '200px'}, 500)
         });

CO

.ball{
    -webkit-border-radius:250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    background: green;
    width : 200px;
    height : 200px;
    text-align: center;
    line-height: 200px;
}

Marcado

<div class="ball">Demo</div>

Opción CSS3

Demostración de animación CSS3

.ball{
    -webkit-border-radius:250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    background: green;
    width : 200px;
    height : 200px;
    text-align: center;
    line-height: 200px;
    transition:all .5s ease-in-out;
    transform:scale(1,1);
    -webkit-transition:all .5s ease-in-out;    
    -webkit-transform:scale(1,1);
    -moz-transition:all .5s ease-in-out;    
    -moz-transform:scale(1,1);        
}

.ball:hover{
 transition:all .5s ease-in-out;
 transform:scale(1.5,1.5);   
 -webkit-transition:all .5s ease-in-out;    
 -webkit-transform:scale(1.5,1.5);    
 -moz-transition:all .5s ease-in-out;    
 -moz-transform:scale(1.5,1.5);    
}

Respondido 27 ago 11, 23:08

de hecho, incluso ahora no puedo hacerlo funcionar. ¿Puedes inspeccionar mi código? bellated.us.lt/supersized/index.html - Domante Stirbyte

  • Ver fuente -> esos dos elementos están con un circle clase, envuelto en circle-wrap.
  • Abre supersized-project.js. Ahí está la fuente que estás buscando.

Respondido 27 ago 11, 23:08

Una pequeña observación del código y encuentras estos ... JS

/* Circle Expansion
-----------------------*/       
$('.circle-wrap').hover(
    function(){
        $('.circle',this)
            .stop()
            .animate({width : '150px', height : '150px', 'margin-top' : '-75px', 'margin-left' : '-75px'  }, 200);
    },
    function(){
        $('.circle',this)
            .stop()
            .animate({width : '100px', height : '100px', 'margin-top' : '-50px', 'margin-left' : '-50px'  }, 100);
    }
);

CO

.circle-wrap{ width:150px; height:150px; text-align:center; position:absolute; float:left; text-decoration:none; }  
    .circle-wrap .circle{ position:absolute; top:50%; left:50%;  height:100px; width:100px; display:block; overflow:hidden; margin:-50px 0 0 -50px; background:#7bbe31; -moz-border-radius:75px; -webkit-border-radius:75px; border-radius:75px; }
    .circle-wrap .label{ z-index:5; position:relative; top:50%; width:100%; display:block; margin-top:-7px; color:#fff; text-align:center; text-shadow:1px 1px 1px #6caf1f; font:bold 16px "Helvetica Neue", Helvetica,Arial,sans-serif; line-height:14px; -webkit-font-smoothing: antialiased; }
    .demo-circle{ top:100px; left:200px; }
    .download-circle{ top:100px; left:350px; }
        .download-circle .label{ text-shadow:1px 1px 1px #000; }
        .download-circle .circle{ background:#0a0a0a; }

En una nota al margen, este sitio web tiene un código asombrosamente comentado / escrito o:

Respondido 27 ago 11, 23:08

Ver la demo


CSS (para redondearlo):

-moz-border-radius:360px;
 -webkit-border-radius:360px;
 border-radius:360px;

jQuery:

var origWidth, origHeight, inrease = 50;

$('#hello').hover(function(){
  origWidth = $(this).width();
  origHeight = $(this).height();  
  
  // expand it
  $(this).animate({width:origWidth + inrease, height:origHeight + inrease});
  
}, function(){
  $(this).animate({width:origWidth, height:origHeight});
});

Respondido el 20 de junio de 20 a las 12:06

de hecho, incluso ahora no puedo hacerlo funcionar. ¿Puedes inspeccionar mi código? bellated.us.lt/supersized/index.html - Domante Stirbyte

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.