Для создания анимации, которая срабатывает при прокрутке страницы, можно использовать библиотеки анимации, такие как CSS animations, jQuery или Scroll Magic. Вот пример использования Scroll Magic:
1. Включите библиотеку Scroll Magic в ваш проект.
2. Создайте секцию с фоновым текстом, который должен оставаться по центру экрана. Например:
```html
<section class="hero">
<h1>Hello, World!</h1>
</section>
```
3. Создайте блоки, которые будут перемещаться вверх при прокрутке. Например:
```html
<section class="blocks">
<div class="block">Block 1</div>
<div class="block">Block 2</div>
<div class="block">Block 3</div>
</section>
```
4. Используйте CSS для стилизации секций и блоков.
5. Используйте JavaScript для настройки анимации с помощью Scroll Magic. Например:
```javascript
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: '.blocks',
triggerHook: 0,
duration: '100%'
})
.setTween(TweenMax.staggerTo('.block', 1, { y: -200, opacity: 0 }, 0.5))
.addTo(controller);
```
Этот код создаст анимацию, при которой блоки будут перемещаться вверх с эффектом затухания при прокрутке страницы, а фоновый текст останется по центру экрана.
Надеюсь, это поможет вам реализовать желаемую анимацию!
