Cercando di ruotare un'immagine avanti e indietro durante lo scorrimento: javascript, scroll, jquery-animate, css-animations

Cercando di ruotare un'immagine di 180 gradi in senso orario una direzione durante lo scorrimento, quindi mentre si fa scorrere il backup nell'altra direzione verrebbe ruotata di 180 gradi in senso antiorario.

Questo ragazzo lo fa, ma è continuo. Sto cercando di fermarlo o bloccarlo a 180 in un modo, poi a 180 l'altro mentre scorri o torni a 0. Quindi in pratica sta puntando nella direzione in cui stai scorrendo. Di default inizierebbe puntando verso il basso.

Riferimento di rotazione

$(function() {
var $plane = $(".plane"); // Cache your elements!

$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$plane.css({transform: "rotate("+ window.pageYOffset%180 +"deg)"});
} elseif ($(this).scrollTop() < 10); {
$plane.css({transform: "rotate("+ window.pageYOffset%-180 +"deg)"});
}
});

});

risposte:

Questo funziona per me su FF e Chrome:

$(function() {

var $plane = $(".plane"); // Cache your elements!

$(window).scroll(function() {
$plane.css({transform: "rotate("+ (180*window.pageYOffset/(document.body.clientHeight - window.innerHeight)) +"deg)"});
});

});

L'icona viene ruotata da 0 a 180 mentre avanza verso la fine della pagina e torna a zero quando torni indietro.