Как сделать автоматическое подстраивание полета картинки во время скроллинга?

Павел, извиняюсь, ссылка почему-то битая оказалась:

Вот пример со скроллингом: https://codepen.io/Genri_Rus/pen/mYwdmj

Как сделать автоматическое подстраивание полета картинки во время скроллинга?

Спасибо, что-то уже похоже )

Такой вопрос, а как сделать чтобы картинка летела немного выше иконки, а потом как бы падала в нее

Как в этом примере: https://codepen.io/Genri_Rus/pen/mYwdmj

Как сделать автоматическое подстраивание полета картинки во время скроллинга?

Павел, что можно сделать в данном случае ?

Как сделать автоматическое подстраивание полета картинки во время скроллинга?

Павел, смотрите
Вот пример со скроллингом: https://codepen.io/Genri_Rus/pen/mYwdmj
Но у меня из-за того что у картинки, которая летает position: fixed - вот такой эффект: https://c.radikal.ru/c24/1905/5a/e77898af027e.png

Мне предлагали следующее решение:

$('.moved-item').css({'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 1200, 
    function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500, 
    function(){ $(this).remove(); }) }
  );

чтобы сделать эффект слежения нужно вынести этот код в функцию с итератором и запускать через таймаут по шагу времени
setTimeout(function(i){...}.bind(i+1), 200)
при этом значения top и left рассчитывать не окончательные, а относительно итерации i и общего числа итераций n

offset.top + (offset.top - (icon.offset().top-window.scrollY-30))*i/n

Может можно упростить, т.к. у меня проблема только с этим моментом: https://radikal.ru/lfp/c.radikal.ru/c24/1905/5a/e7...

Как сделать автоматическое подстраивание полета картинки во время скроллинга?

Добрый день!

А вы пропишите в css, классу shopping-cart position: fixed

И во время скроллинга (продолжая скроллить) нажмите на кнопку add to cart

Возможно в анимацию нужно добавить не только offset, но и scrollTop и scrollLeft ?

Как заменить теги при использовании clone()?

DanKud, у вас не будет времени посмотреть ?

Как убрать данный эффект при скроллинге?

BD_ l3ftoverZ!, не поможете ?

Как убрать данный эффект при скроллинге?

BD_ l3ftoverZ!, мне посоветовали решить данную проблему так:

$('.moved-item').css({'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 1200, 
    function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500, 
    function(){ $(this).remove(); }) }
  );

чтобы сделать эффект слежения нужно вынести этот код в функцию с итератором и запускать через таймаут по шагу времени
setTimeout(function(i){...}.bind(i+1), 200)
при этом значения top и left рассчитывать не окончательные, а относительно итерации i и общего числа итераций n

offset.top + (offset.top - (icon.offset().top-window.scrollY-30))*i/n

Может у вас есть какие-то мысли на данный счет ?

Как убрать данный эффект при скроллинге?

BD_ l3ftoverZ!, при скроллинге мне нужно, чтобы картинка вылетала с той позиции, с которой начинала

Вот наглядно: https://a.radikal.ru/a16/1905/4e/dc2ad4620791.png

Сейчас при скроллинге из-за того, что у moved-itemposition: fixed, при скроллинге происходит такой эффект: https://c.radikal.ru/c24/1905/5a/e77898af027e.png

Как решить задачу с итератором?

Robur, при скроллинге мне нужно, чтобы картинка вылетала с той позиции, с которой начинала

Вот наглядно: https://a.radikal.ru/a16/1905/4e/dc2ad4620791.png

Как правильно сделать offset при скроллинге?

Валентин В., мне нужно убрать этот эффект при скроллинге:
https://c.radikal.ru/c24/1905/5a/e77898af027e.png

Как решить задачу с итератором?

Robur, мне нужно убрать этот эффект при скроллинге:
https://c.radikal.ru/c24/1905/5a/e77898af027e.png

Как заменить теги при использовании clone()?

DanKud, добрый вечер

Может вы знаете, как это сделать правильно ?

Вот пример: https://codepen.io/Genri_Rus/pen/mYwdmj

Задача такая:

$('.moved-item').css({"display": "block", 'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 700, 
    function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500, 
    function(){ $(this).remove(); }) }
  );

чтобы сделать эффект слежения нужно вынести этот код в функцию с итератором и запускать через таймаут по шагу времени
setTimeout(function(i){...}.bind(i+1), 200)
при этом значения top и left рассчитывать не окончательные, а относительно итерации i и общего числа итераций n

offset.top + (offset.top - (icon.offset().top-window.scrollY-30))*i/n

Как решить задачу с итератором?

Robur, вот пример как нужно: https://codepen.io/Genri_Rus/pen/JqEgyg

Но в этом случае, стартовый offset у картинки очень резкий

Как решить задачу с итератором?

Robur, т.к у меня в moved-item задан position: fixed, то при скроллинге картинка отрывается, а мне нужно чтобы эффект полета картинки при скроллинге был на изначальной позиции

Т.е. при скроллинге сам эффект полета должен быть виден, за исключением стартовой позиции у картинки

Как решить задачу с итератором?

Robur, у меня изначально была такая задача, что при скроллинге следить и не менять позицию у картинки

Т.е. она должна всегда вылетать из той точки, где изначально была

Получается такой эффект, когда я нажимаю на кнопку "Переместить" и потом начинаю быстро скролить, то картинка как бы сразу вниз падает

Нужно чтобы картинка была на той стартовой позиции где раньше была, но только уже во время полета подстраивалась под скроллинг самой иконки ...

Вот подробный пример: https://codepen.io/Genri_Rus/pen/mYwdmj

Как правильно сделать offset при скроллинге?

Валентин В., может у Вас будет время показать более наглядный пример с итератором ?

Спасибо ..

Как правильно сделать offset при скроллинге?

Валентин В., а может есть пример или статья, как сделать с итератором такое слежение ?

Как правильно сделать offset при скроллинге?

Валентин В., мне нужно что-то типа такого: https://codepen.io/Genri_Rus/pen/mYwdmj

Картинку видно как она двигается с начальных координат

Но ваш последний код не делает такой эффект:

$('.moved-item').css({"display": "block", 'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 700, 
    function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500, 
    function(){ $(this).remove(); }) }
  );

Вот пример: https://codepen.io/Genri_Rus/pen/JqEgyg

Как правильно сделать offset при скроллинге?

Валентин В., в очередной раз спасибо, а можно полный пример на codepen итератором ?

В данном случае у меня картинка очень быстро летит и она как бы не отталкивается из начальной точки, получается резкий рывок

https://codepen.io/Genri_Rus/pen/JqEgyg