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

Question

[Genri_Rus]

Собственно вопрос в названии

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

const icon = $('.icon-right');

$('.move').click(function() {
    let img = $(this).parent().find('img');
    let offset = img.offset();
    $('body').append('<div class="moved-item"></div>');
    var copy = img.clone();
  
    let copyItem = copy.appendTo('.moved-item');
  
   $('.moved-item').css({'top' : offset.top + 'px', 'left' : offset.left + 'px'}).fadeIn("slow").animate({'top': icon.offset().top, 'left': icon.offset().left + 20}, 1200, 
    function(){ $(this).remove(); }
  );
})

При скроллинге иконка, которая находится справа - задан: position: fixed

Однако есть проблема, когда я нажимаю кнопку переместить и потом начинаю скроллить страницу, то картинка во время полета не подстраивается под ширину и высоту окна в DOM

Как сделать, чтобы картинка (во время полета) могла подстраиваться и лететь к иконке когда я скролю ?

Answer 1

[Антон Усачев]

Решается более четким позиционированием летящего блока в самом начале. Плюс position: fixed; для него решает.



UPD: попробуй поизменять ширину окна в полёте.

Comments

[Genri_Rus]

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

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

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

[Антон Усачев]

Genri_Rus, считаем целевую позицию минус высота летящего блока. Добавил таймаут на полет. Вообще, сделал грубо: не высчитываю автоматом задержку из цсс, а просто в уме посчитал. Главное, принцип вы поняли.
Пример там же на кодпен.

[Genri_Rus]

Антон Усачев, я еще заметил, что если нажать одновременно на 3 кнопки, то картинки долетают до иконки и не исчезают

P.S. А можно 2 варианта ?

С простым полетом (первый вариант) и полетом с небольшим отклонением вверх (второй вариант) ?

[Антон Усачев]

Genri_Rus, ну как бы вопрос в задаче не стоял об исчезновении.. =) сейчас время есть, покодить охота, скоро сделаю.

[Genri_Rus]

Антон Усачев, так все исчезает, если кликаю по одному элементу

А вот если сразу все, то почему-то не исчезает

[Антон Усачев]

Обновил. Закрывай тред.

[Genri_Rus]

Антон Усачев, а можно второй вариант без кнопки изменить поведение ?

[Genri_Rus]

Антон Усачев, я так понял, что переменные drop и hang не нужны будут, если я удалю кнопку "изменить поведение" ?

[Антон Усачев]

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

[Genri_Rus]

Антон Усачев, а что делать с этим кусочком кода ?

flyTimeout = setTimeout(function () {
	if (drop == true) {
		$flyingElem.addClass('source--drop');
	} else {
		$flyingElem.addClass('source--hide');
	}

[Антон Усачев]

Разбирай конструкцию. Если хочешь чтобы падал вниз, первый класс оставь $flyingElem.addClass('source--drop';. Если просто исчезать нужно – второй $flyingElem.addClass('source--hide');
Смотри, что в цсс написано для анимаций и выбирай.

[Genri_Rus]

Антон Усачев, спасибо Вам и добрый день )

Вот я сделал: https://codepen.io/Genri_Rus/pen/WBdLdL

Но почему-то не могу сделать такой эффект полета у картинки:

[Genri_Rus]

Антон Усачев, а можно сделать чтобы если я скролю ниже 250px, то тогда добавлялся специальный класс и делал opasity: 0, а потом этот класс удалялся уже во время полета?

Answer 2

[Павел]

https://codepen.io/elmahdim/pen/tEeDn

Comments

[Genri_Rus]

Добрый день!

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

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

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

[Павел]

Genri_Rus, да, проблемка есть...
Единственное что придумал это прекращать анимацию и убирать скопированный блок при скролле

jQuery(window).scroll(function(){
     copy.stop( true, true ).fadeOut();
});

[Genri_Rus]

Павел, смотрите
Вот пример со скроллингом: 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...

[Genri_Rus]

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

[Genri_Rus]

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

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