Как можно исправить проблему с анимацией при прокрутке к определенному блоку, когда она не работает? 

Как изменить код, чтобы SVG анимация запускалась только в момент, когда пользователь достигнет нужной части страницы, содержащей этот SVG изображение? <br/> Поэтому, когда пользователь прокручивает страницу до конкретного блока с SVG изображением, SVG должен появиться на экране с анимацией. <br/> Вот приведенный код для этого сценария: <br/> <pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;SVG Animation on Scroll&lt;/title&gt;
  &lt;style&gt;
  body {
    margin: 0;
    width: 900px;
  }
  svg {
    display:none; /* Скрыть SVG изначально */
  }
  &lt;/style&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;  &lt;!-- Подключение jQuery --&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

&lt;svg width="100" height="100" style="border:1px solid black;"&gt;
  &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
&lt;/svg&gt;

&lt;script&gt;
  $(window).scroll(function() {
    var hT = $('svg').offset().top,
        hH = $('svg').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS &gt; (hT+hH-wH)){
      $('svg').fadeIn();
    }
  });
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
  • 22 февраля 2024 г. 22:28
Ответы на вопрос 2 
Для исправления проблемы с анимацией при прокрутке к определенному блоку, можно использовать следующий подход:

1. Изменить свойство `display` для SVG изображения на `none` в CSS, чтобы изначально скрыть его.
2. Изменить условие в скрипте jQuery таким образом, чтобы анимация запускалась только тогда, когда пользователь достигнет нужной части страницы.

Таким образом, код можно изменить следующим образом:

```html
<!DOCTYPE html>
<html>
<head>
  <title>SVG Animation on Scroll</title>
  <style>
    body {
      margin: 0;
      width: 900px;
    }
    svg {
      display: none; /* Скрыть SVG изначально */
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Подключение jQuery -->
</head>
<body>

<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ex...

<svg width="100" height="100" style="border:1px solid black;">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<script>
  $(window).scroll(function() {
    var hT = $('svg').offset().top,
        hH = $('svg').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
      $('svg').fadeIn();
    }
  });
</script>

</body>
</html>
```

Теперь SVG изображение будет появляться с анимацией только тогда, когда пользователь достигнет нужной части страницы.
лучше применить Intersection Observer API 
 и заменить код на этот 
 
const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}
const svg = document.querySelector('svg')
const animation = document.getElementById('animate')
  
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('observed')
      animation.beginElement()
      svg.style.display = 'block'
     
    }
  })
}, options)
observer.observe(document.querySelector('#anim1'))
 
 посмотреть на codepen
Похожие вопросы
    Показать ещё