Algunas librerias utiles

ScrollNav OnePage

http://scrollnav.com/

.scrollNav() crea una elemento tipo <section> en donde encuentre un .pane-node-title

$('#main-content .region-one-main').scrollNav({

    sections: '.pane-node-title',

    subSections: false,

    sectionElem: 'section',

    showHeadline: false,

    headlineText: 'Scroll To',

    showTopLink: false,

    topLinkText: 'Top',

    fixedMargin: 40,

    scrollOffset: 300,

    animated: true,

    speed: 500,

    insertTarget: this.selector,

    insertLocation: 'insertBefore',

    arrowKeys: false,

    scrollToHash: true,

    onInit: null,

    onRender: null,

    onDestroy: null

});

Efecto Scroll en Onepage

http://plugins.compzets.com/animatescroll/

$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});
 $('#section-2').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});

Background image slide

Backstretch, modulo de drupal que permite poner imagenes de background como slides.

https://www.drupal.org/project/backstretch

Animación SIN FLASH

Tenemos que hacer muchas cosas que los clientes piden, entre ellas están las animaciones, generalmente a la gente le gusta que todo se mueva =S
Aqui les dejo algo basico de animación de un pagina en construcción, no me quedo perfecta porque no hago animación de objetos pero quedo bien para ser una pagina de en construcción.

Para realizar la animación utilice una libreria js llamada spritely

Necesitamos una imagen para dar la animación que deseamos para mi esto fue lo mas difícil.

Este png tiene 9 frames todos del mismo ancho y alto.

JS:

  <script type="text/javascript">

    $('#u')

      .sprite({fps: 3, no_of_frames: 9})

      .spRandom({top: 0, left: 380, right: 510, bottom: 0, speed: 4000, pause: 3000});

  </script>

.sprite realiza la animacion
fps: La velocidad
no_of_frames: la cantidad de frames en la imagen


.spRandom hace que se mueva en este caso el too y bottom es 0 porque no queria que se mueva verticalmente y left y right son los rangos en los que quiero que se mueva en horizontal.

CSS:

#u{
background:url(img.png);
width: 96px;
height: 155px;
position: relative;
       top: 421px !important;
       left: 385px;
}

No olvidar dar el width y height exacto del frame.

Fuente: http://spritely.net/