Как сделать смещение при скролле?

Question

[kamisarlapsha]

Привет! Есть контейнер и div. Div длиннее чем контейнер и изначально находится в верхней правой точке контейнера.
При прокрутке он должен переместиться в левую нижнюю точку.

Пытался сделать по примеру, но если scrollY становится большим, то div улетает
codepen
Как можно это решать ? Заранее спасибо!

Answer 1

[Антон Шаманов]

так нечего фиксированную ширину экрана использовать
1076 - container.width()

Comments

[kamisarlapsha]

А как тогда делать ?)

[Антон Шаманов]

kamisarlapsha, window.screen

{ availWidth: 1360, availHeight: 738, width: 1360, height: 768, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 0, availLeft: 0 }

[kamisarlapsha]

Антон Шаманов, сделал window.screen.width - container.width(), но блок также улетает

[Антон Шаманов]

kamisarlapsha, если тебе сложно представить в уме как все это будет работать, то нарисуй на бумажке пару "кадров" смещения.

[kamisarlapsha]

Антон Шаманов, Уже разобрался.
Единственное, для чего эта функция ?

function lerp(min, max, value) {
    return (1 - value) * min + value * max;
}

[Антон Шаманов]

kamisarlapsha, это тебя надо спрашивать, код-то твой))

[kamisarlapsha]

Антон Шаманов, ее из примера взял)
Я уже сделал немного по другому, но все равно работает криво
https://codepen.io/kamisarlapsha/pen/GRpRdBV

[Антон Шаманов]

kamisarlapsha, лучше написать с нуля понятный тебе код чем использовать в котором ты не разбираешься. используй jquery.animation. вычитаем из ширины экрана ширину блока, потом делим на 100, получаем шаговое смещение по х, далее делим высоту на 100 и получаем шаговое смещение по у. дальше думаю ты догадаешься, если нет, то попробуй что-то попроще для начала

[kamisarlapsha]

Антон Шаманов, а как добавлять при каждом шаге ? По сути надо связать каждый шаг со scrollY. Грубо говоря когда scrollY увеличивается, то добавляю то, что высчитал. Я правильно думаю ?

[Антон Шаманов]

kamisarlapsha, тебе надо просто заменить код функции update, она по сути это и делает

[kamisarlapsha]

Антон Шаманов, спасибо, получилось
Но только анимация на iphone тормозит, из за чего это может быть ? Если TweenLite использовать то более менее, но все равно прыгает иногда. А если просто css() то сильно тормозит

var box = $('.box');
        var container = $('.container');
        var offsetX = Math.floor((container.width() - box.width()) / box.height());
        var offsetY = (container.height() - box.height()) / (box.width() - 600);
        var maxOffset = container.width() - box.width();

        function update() {
            var containerOffset = $(container).offset().top - 300;

            if (scrollY > containerOffset) {
                var blockScroll = (scrollY - containerOffset);
               var offsetTop = blockScroll * offsetY;
                var offsetLeft = blockScroll * offsetX;

                if(offsetLeft < maxOffset) {
                    offsetLeft = maxOffset;
                }

                $('.box').css({ 
                      transform: 'translate3d(' + -1 * offsetLeft  + 'px, ' +  offsetTop  + 'px, 0)'
                });
        
            }
        }

        $(window).scroll(function () {
            update();
        });

[Антон Шаманов]

kamisarlapsha, ман, тебе не 10 лет, давай уже развернуто пиши что, да как, если хочешь получить внятный ответ