Últimamente se ha puesto muy de moda las webs de una sólo página, sobretodo para páginas de portfolio, de empresas o microsites. Hay numerosos plugins para hacer efectos espectaculares pero a menudo son muy complicados de modificar. Personalmente me gusta mucho más trabajar con transiciones de CSS3, ya que son más ligeras y sencillas. Para ello sólo necesitamos dos funciones de jQuery o Javascript para poder hacer estos efectos.

Primero tenemos que saber si hemos llegado al elemento que queremos animar, ya que si ejecutamos la animación cuando el usuario no lo ve, resulta un tanto inútil. Ésta es la función que comprueba si hemos llegado o no:

     function getOffset( element ) {
          var posy = 0;
          while( element && !isNaN( element.offsetTop ) ) {
               posy += element.offsetTop - element.scrollTop;
               element = element.offsetParent;
          }
          return _y;
     }

Después tendremos que hacer una función para ejecutar la animación. A mí lo que me resulta más sencillo es definir una clase CSS de inicio y una de final (o lo que es lo mismo: un estado por defecto y un estado cuando ya hemos llegado). Para ello usaremos las acciones: addClass, hasClass y removeClass; así cómo la función anteriormente explicada de getOffset. Esta función siempre que dé 0 o menor es que hemos llegado al elemento o no lo hemos pasado si el valor es negativo.

     if(getOffset(document.getElementById('element'))<=0){
          $('#element').addClass('in')
     }else{
          if($('#element').hasClass('in')){
               $('#element').removeClass('in')
          }
     }

Ahora sólo tenemos que definir las clases que hagan nuestra animación:

     #element{
          opacity:0;
          transition:1s all ease-out;
          -webkit-transition:1s all ease-out;
          -moz-transition:1s all ease-out;
          -ms-transition:1s all ease-out;
          -o-transition:1s all ease-out;
     }
     #element.in{
          opacity:1;
     }

Esto hará que cuando lleguemos al elemento en sí haga un fadeIn.