Дивлячись, повертайте зображення назад і вперед під час прокрутки - JavaScript, прокрутка, анімація jquery, анімація css

Якщо ви хочете повернути зображення на 180 градусів за годинниковою стрілкою в одну сторону після прокрутки, тоді, коли ви прокрутите резервну копію в іншому напрямку, вона повертається на 180 градусів проти годинникової стрілки.

Цей хлопець це робить, але це безперервно. Я шукаю, щоб він зупинився або зафіксувався на 180 в одну сторону, потім на 180, коли ви прокручуєте або повертаєтеся до 0. Таким чином, в основному це вказує в напрямку, у якому ви прокручуєтеся. За замовчуванням вона почнеться вказуючи вниз.

Посилання на обертання

$(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)"});
}
});

});

Відповіді:

Це працює для мене на FF і Chrome:

$(function() {

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

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

});

Значок повертається від 0 до 180 під час просування до кінця сторінки і повертається до нуля, коли ви повертаєтеся назад.