Блог

Главная - Вопросы по программированию - Как показать анимацию при просмотре раздела и прекратить повторение

Как показать анимацию при просмотре раздела и прекратить повторение

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я пытаюсь добавить анимацию в определенный раздел в середине моей веб-страницы. Я успешно добавил анимацию, однако она повторяется несколько раз. Я хочу перестать это повторять.

jsFiddle

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

 const about = document.querySelector("#aboutSection");

// object of animation script
const t1 = new TimelineMax();

$(window).scroll(function() {
  $('#aboutSection').each(function() {
    var imagePos = $(this).offset().top;
    var imageHeight = $(this).height();
    var topOfWindow = $(window).scrollTop();

    if (imagePos < topOfWindow   imageHeight amp;amp; imagePos   imageHeight > topOfWindow) {
      t1.fromTo(about, 1.2, {
        y: "100%"
      }, {
        y: "0%",
        ease: Power2.easeInOut
      });
    }
  });
  $('#aboutSection').stop(true, true);
}); 
 #aboutSection .jumbotron {
  box-shadow: 0 0 10px #004030;
  background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg);
  height: 550px;
}

#aboutSection .jumbotron h1 {
  margin-top: 150px;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<section id="aboutSection" class="lazyload">
  <h1 class="sectionTitle text-center">ABOUT</h1>
  <p id="about_para">Abou something interesting random wors or details or nothing to show off and etc extra words</p>
</section>

<!-- To add animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha512-8Wy4KH0O AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58 Y8Z08qzeg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js" integrity="sha512-lJDBw/vKlGO8aIZB8/6CY4lV EMAL3qzViHid6wXjH/uDrqUl uvfCROHXAEL0T/bgdAQHSuE68vRlcFHUdrUw==" crossorigin="anonymous"></script>

Комментарии:

1. Можете ли вы создать лучшую демо-версию? Я не могу понять, в чем проблема.

2. @Aslam пожалуйста, перейдите по ссылке и попробуйте прокрутить консоль, и вы увидите, что мой раздел «О программе» повторяется

Ответ №1:

Если вы используете переменную для отслеживания, является ли она прокруткой или нет, вы можете избежать повторяющейся проблемы. Таким образом, вы можете редактировать код JavaScript следующим образом….

 scrolledDown = false;
$(window).scroll(function () {
var current = $(this).scrollTop();

    if (current >= (about.offsetWidth-100) amp;amp; !scrolledDown) {
        t1.fromTo(about, 1.5, { y:"100%", opacity: 0 }, { y: "0%", opacity: 1 });
        scrolledDown = true;
    }

});