Как переместить и увеличить объект при прокрутке внутри блока jQuery?

Ссылка скопирована
JavaScript
1 ответ

Добрый день! Подскажите, пожалуйста, как в зависимости от скролла увеличить и переместить объект за его пределы?

Есть на заднем фоне дорога (background), на переднем плане автомобиль (.car) с position: absolute, нужно чтобы автомобиль перемещался вперед и немного увеличивался, для создания эффекта движения, но только тогда, когда автомобиль находится в поле видимости пользователя. То есть движение блока внутри контейнера, в зависимости от скролла пользователя, в момент когда он находится в поле его зрения.

<section class="road"> 	<div class="container"> 		<div class="car"></div> 	</div> </section>

<section class="road"> <div class="container"> <div class="car"></div> </div> </section>

Пробовал примерно следующее, но не совсем то, что нужно, не силён в jQuery.

$(window).on('scroll', function() { car = $('.car'); scrollTop = $(this).scrollTop(); changed = scrollTop - $('.road').outerHeight(); changed2 = (scrollTop - $('.road').outerHeight()) / 5; var scrollBottomCar = $('.road').height() - car.offset().top - car.outerHeight();  car.css('transform', 'translateY('+changed+'px) translateX(-'+changed2+'px)'); });

$(window).on('scroll', function() { car = $('.car'); scrollTop = $(this).scrollTop(); changed = scrollTop - $('.road').outerHeight(); changed2 = (scrollTop - $('.road').outerHeight()) / 5; var scrollBottomCar = $('.road').height() - car.offset().top - car.outerHeight(); car.css('transform', 'translateY('+changed+'px) translateX(-'+changed2+'px)'); });

Заранее спасибо за помощь!

Дополнительно:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Scroll Animation</title>   <style>     body {       margin: 0;       padding: 0;       height: 200vh; /* чтобы создать прокрутку */     }      .road {       position: relative;       height: 100vh; /* высота видимой области */       overflow: hidden;     }      .container {       position: absolute;       bottom: 0;       left: 50%;       transform: translateX(-50%);     }      .car {       width: 50px;       height: 30px;       background-color: red;       position: absolute;       bottom: 0;       transition: transform 0.3s ease-in-out; /* плавный переход */     }   </style> </head> <body>    <section class="road">     <div class="container">       <div class="car"></div>     </div>   </section>    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>   <script>     $(document).ready(function () {       $(window).on('scroll', function () {         var scrollTop = $(this).scrollTop();         var windowHeight = $(this).height();         var car = $('.car');         var roadHeight = $('.road').outerHeight();          // Проверка, виден ли автомобиль в текущей области видимости         if (scrollTop <= roadHeight && (scrollTop + windowHeight) >= roadHeight) {           // Изменение размера и положения автомобиля           var scale = 1 + (scrollTop / roadHeight); // регулируйте это значение по вашему вкусу           var translateX = -scrollTop / 5; // регулируйте это значение по вашему вкусу                      car.css({             'transform': 'translateX(' + translateX + 'px) scale(' + scale + ')'           });         }       });     });   </script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll Animation</title> <style> body { margin: 0; padding: 0; height: 200vh; /* чтобы создать прокрутку */ } .road { position: relative; height: 100vh; /* высота видимой области */ overflow: hidden; } .container { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .car { width: 50px; height: 30px; background-color: red; position: absolute; bottom: 0; transition: transform 0.3s ease-in-out; /* плавный переход */ } </style> </head> <body> <section class="road"> <div class="container"> <div class="car"></div> </div> </section> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> $(document).ready(function () { $(window).on('scroll', function () { var scrollTop = $(this).scrollTop(); var windowHeight = $(this).height(); var car = $('.car'); var roadHeight = $('.road').outerHeight(); // Проверка, виден ли автомобиль в текущей области видимости if (scrollTop <= roadHeight && (scrollTop + windowHeight) >= roadHeight) { // Изменение размера и положения автомобиля var scale = 1 + (scrollTop / roadHeight); // регулируйте это значение по вашему вкусу var translateX = -scrollTop / 5; // регулируйте это значение по вашему вкусу car.css({ 'transform': 'translateX(' + translateX + 'px) scale(' + scale + ')' }); } }); }); </script> </body> </html>

  • Спасибо большое, то, что нужно!
  • Оказывается не совсем то, что нужно. Если сверху перед этой секцией будут другие секции и блоки, то "машина" сразу исчезает, либо вообще не двигается.
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Роман IT Ответ

Для того чтобы переместить и увеличить объект при прокрутке внутри блока с использованием jQuery, можно использовать следующий подход:

1. Определить начальные координаты и размер объекта, который вы хотите переместить и увеличить.
2. Следить за событием прокрутки блока и обновлять позицию и размер объекта в соответствии с прокруткой.

Пример кода на jQuery:

$(document).ready(function() {
  var obj = $('#object'); // выбираем объект, который хотим перемещать и увеличивать
  var block = $('#block'); // выбираем блок, внутри которого будем отслеживать прокрутку
 
  var objTop = obj.offset().top; // начальная верхняя координата объекта
  var objLeft = obj.offset().left; // начальная левая координата объекта
  var objWidth = obj.width(); // начальная ширина объекта
  var objHeight = obj.height(); // начальная высота объекта
 
  block.scroll(function() {
    var scrollTop = block.scrollTop(); // текущая верхняя прокрутка блока
 
    // вычисляем новые координаты и размер объекта в зависимости от прокрутки блока
    var newTop = objTop - scrollTop;
    var newLeft = objLeft;
    var newWidth = objWidth + scrollTop;
    var newHeight = objHeight + scrollTop;
 
    // применяем новые координаты и размер объекта
    obj.css({
      'top': newTop,
      'left': newLeft,
      'width': newWidth,
      'height': newHeight
    });
  });
});

$(document).ready(function() { var obj = $('#object'); // выбираем объект, который хотим перемещать и увеличивать var block = $('#block'); // выбираем блок, внутри которого будем отслеживать прокрутку var objTop = obj.offset().top; // начальная верхняя координата объекта var objLeft = obj.offset().left; // начальная левая координата объекта var objWidth = obj.width(); // начальная ширина объекта var objHeight = obj.height(); // начальная высота объекта block.scroll(function() { var scrollTop = block.scrollTop(); // текущая верхняя прокрутка блока // вычисляем новые координаты и размер объекта в зависимости от прокрутки блока var newTop = objTop - scrollTop; var newLeft = objLeft; var newWidth = objWidth + scrollTop; var newHeight = objHeight + scrollTop; // применяем новые координаты и размер объекта obj.css({ 'top': newTop, 'left': newLeft, 'width': newWidth, 'height': newHeight }); }); });

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 1 ответ