Для создания такой анимации с помощью JavaScript и CSS, вы можете использовать следующий подход:
1. В HTML разметке задайте классы и атрибуты для блоков, которые должны появляться при прокрутке:
```html
<div class="block" data-animation="hidden"></div>
<div class="block" data-animation="hidden"></div>
<div class="block" data-animation="hidden"></div>
```
2. В CSS определите начальные стили для скрываемых блоков и анимацию для их появления:
```css
.block {
opacity: 0;
transition: opacity 0.5s;
}
[data-animation="visible"] {
opacity: 1;
}
```
3. В JavaScript определите функцию, которая будет обрабатывать событие скролла и изменять атрибуты блоков в зависимости от их положения на странице:
```javascript
function handleScroll() {
const blocks = document.querySelectorAll('.block');
blocks.forEach(block => {
const blockTop = block.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (blockTop < windowHeight - 91) {
block.setAttribute('data-animation', 'visible');
} else {
block.setAttribute('data-animation', 'hidden');
}
});
}
window.addEventListener('scroll', handleScroll);
```
4. При каждом событии скролла функция `handleScroll()` будет проверять положение блоков на странице и изменять атрибуты в соответствии с условием. При этом блоки с атрибутом `data-animation="hidden"` будут скрыты посредством определенных стилей CSS, а блоки с атрибутом `data-animation="visible"` будут отображены.
5. Дополнительно, вы можете вызывать функцию `handleScroll()` при загрузке страницы, чтобы отобразить скрываемые блоки, которые могут быть видны на момент загрузки:
```javascript
window.addEventListener('DOMContentLoaded', handleScroll);
```
В результате, блоки будут скрываться при первом скролле вниз до высоты 91px, а затем появляться при дальнейшем скролле. При возврате к началу страницы они снова будут скрываться.