Эффект, который вы описываете, называется "параллакс" . Он создает впечатление, что блок перемещается со скоростью, связанной со скроллом страницы.
Для реализации данного эффекта можно использовать HTML, CSS и JavaScript. Вот пример кода, который поможет вам понять, как это можно сделать:
HTML:
```
<div class="parallax-container">
<div class="parallax"></div>
</div>
```
CSS:
```
.parallax-container {
height: 500px; /* Высота контейнера параллакса */
overflow: hidden;
}
.parallax {
height: 100%; /* Высота блока параллакса */
background-image: url('path/to/your/image.jpg'); /* Путь к изображению для параллакса */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transform: translate3d(0, 0, 0);
}
```
JavaScript:
```
window.addEventListener('scroll', function() {
var scrolledY = window.scrollY;
var parallax = document.querySelector('.parallax');
parallax.style.transform = 'translate3d(0,' + scrolledY + 'px, 0)';
});
```
При прокрутке страницы блок будет перемещаться со скоростью, связанной со скроллом. Вы можете настроить размеры блока и изображение в CSS, чтобы достичь желаемого эффекта параллакса.