Come animare una mossa div in senso orizzontale quando la pagina scorre verso il basso?

HTML

CSS

 #horizonatal { position:fixed; top:0; } #horizonaltal { background-color: red; width: 150px; height:150px;} body { height: 5000px; width: 5000px; } 

Come lo posso fare?

Dato che hai incluso il tag jQuery, ti darò una soluzione basata su jQuery. Innanzitutto, impostiamo alcune strutture per l’esempio:

HTML

 

aaa

I tre “sample” div sono quelli che animeranno mentre scorriamo. “nuovo” è il contenuto.

CSS

 .sample { width:100px; height:300px; position:fixed; left:-102px; background:red } .green { background:green; top: 30px; } .blue { background:blue; top: 60px; } .new { margin-top:1000px } 

Questo assicura solo che ci sia effettivamente uno scrolling ansible (contenuto di 1000px-high) e imposta gli stili e le posizioni per le div di esempio (posizioni fisse, tutte agganciate a sinistra, diversi colors di sfondo e posizioni verticali).

Ora possiamo ascoltare l’evento scroll e animare di conseguenza:

copione

 // cancels any existing animations // and animates the "slide out" transition for all samples function hideDivs() { $('.sample').stop().animate({ left: '-102px' }, 1000); } // slides in various samples for various scroll positions // hides any that aren't appropriate for the current position function showDivs() { hideDivs(); var top = $(document).scrollTop(); if ( top >= 100 && top < 300 ) { $('.red').stop().animate({ 'left': '0px' }, 1000); } else if (top >= 300 && top < 500) { $('.green').stop().animate({ 'left': '0px' }, 1000); } else if (top >= 500) { $('.blue').stop().animate({ 'left': '0px' }, 1000); } } // scroll events get fired a LOT // this will end up being very jerky and distracting if we // trigger the animation every time the event fires // So wait for a split-second before starting the animations, // resetting the timer on each scroll event to ensure that // the animation doesn't start until the scrolling has stopped. var timer = null; $(window).scroll(function () { clearTimeout(timer); timer = setTimeout(showDivs, 300); }); 

Questo esempio fa un po ‘più di quello che hai chiesto, in quanto anima tre sovrapposizioni separate a seconda della posizione di scorrimento. Puoi semplificarlo al bisogno di ciò che devi fare – dovrebbe essere abbastanza auto-esplicativo.

Ecco un violino se vuoi vederlo in azione: http://jsfiddle.net/G4t4f/4/