Задать вопрос
@DESTEQ
javascript

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

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

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

<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)');
});


Заранее спасибо за помощь!
  • Вопрос задан
  • 232 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
i229194964
@i229194964
Веб разработчик 
<!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>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать бэкап сайта(форума) и установить его на сервер
23 нояб. 2024, в 04:31
2000 руб./за проект
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Ещё заказы