Animation when the element reaches the center of the page (jQuery)

Question

I would like to know how I get the positioning of a certain element when it reaches the center of the "window", because I need to do an animation when it is centered. Thanks to those who answer with jQuery.

Answer 1

You can use the jquery Waypoint plugin http://imakewebthings.com/jquery-waypoints/

Download the plugin, and refer to your HTML.

Then use the parameter offset: 50%, so is the center of the view.

After that just do something similar

$('#seu-elemento').waypoint(function() {
  alert('Animação acontece quando chegar no meio da página')
}, { offset: '50%' });

I made an example in http://jsfiddle.net/r57V5/

Answer 2

To know the exact center you will have to subtract half the width/height of the element by the width/height of the page.

Example:

posicao = $('.elemento').offset();
centro_horizontal = ($(window).width() / 2) - ($('.elemento').width()/2);
centro_vertical = ($(window).height() / 2) - ($('.elemento').height()/2);
if (posicao.left == centro_horizontal && posição.top == centro_vertical){
    alert('elemento no centro');
}