Повернуть элемент на сумму x на прокрутке, когда элемент находится в области просмотра - PullRequest
Новая
       25

Повернуть элемент на сумму x на прокрутке, когда элемент находится в области просмотра

0 голосов
/ 19 апреля 2019

У меня есть несколько прямоугольников svgs, которые расположены под разными углами. Например, некоторые находятся в вертикальном положении, некоторые в диагональном положении и т. Д. Я пытаюсь заставить все эти прямоугольники вращаться вниз в горизонтальном положении на свитке. Эти прямоугольники должны начинать вращаться только тогда, когда они видны в области просмотра. Когда пользователь прокрутил до конца прямоугольников, все они должны были повернуться вниз в горизонтальное положение.

Так, например, если одному из прямоугольников нужно повернуть на 90 градусов, чтобы получить горизонтальное положение, вращение должно начаться, когда прямоугольники видны, и должно полностью повернуться в положение, когда пользователь прокрутил до нижней части прямоугольники. Прямоугольники также должны повернуться обратно в исходное положение, когда пользователь прокручивает назад.

Здесь я нашел относительно похожее решение: Как повернуть элемент html с помощью jquery в процентах прокрутки? и использовал это в качестве отправной точки.

Вот кодовая ручка для моей версии: https://codepen.io/becky-lou/full/JVveBb

Однако, это не совсем так, как ожидалось, и я уверен, что это как-то связано с тем, как вычисляются bodyHeight и deg. Я в недоумении, как правильно рассчитать степень поворота на прокрутке. В моем текущем примере, если вы посмотрите на первое примененное преобразование: вращение, оно начинается с 20 градусов для большинства из них. Он также поворачивает прямоугольники в конечную позицию, прежде чем вы прокрутите до нижней части прямоугольников. Кто-нибудь может посоветовать, где я иду не так?

Пример JS, полный код можно найти по ссылке на коде 

function rotateOnScroll(degree, element, bodyHeight) {
    var deg = ($(window).scrollTop()) * (degree / bodyHeight);
    var shouldScale = $(element).hasClass('upright-left') || $(element).hasClass('upright-right');
    if (deg <= degree) $(element).rotate(deg, shouldScale, 0.86);
    else $(element).rotate(degree, shouldScale, 0.86);
}

var bodyHeight = 0;
var elemHeight = $('.grid-container--problem-solving').height();
window.onscroll = function () {
    if ($(".skill--problem-solving").isInViewport()) {
        if (bodyHeight == 0) bodyHeight = elemHeight + ($('.grid-container--problem-solving').offset().top - $(window).scrollTop());
        rotateOnScroll(90, '.upright', bodyHeight);
        rotateOnScroll(135, '.upright-left', bodyHeight);
        rotateOnScroll(45, '.upright-right', bodyHeight);
    }
};
...