При наложении блоков друг на друга создается эффект плавного перехода от одного блока к другому при прокрутке страницы. Это может придать вашему сайту интересный и современный вид.
Для реализации эффекта, аналогичного тому, что показано на сайте, можно воспользоваться техникой использования свойства transform: translateY() в CSS. Ниже приведен пример кода:
HTML:
```html
<div class="container">
<div class="block block1"></div>
<div class="block block2"></div>
</div>
```
CSS:
```css
.container {
position: relative;
height: 100vh;
overflow: hidden;
}
.block {
position: relative;
height: 100vh;
width: 100%;
background-color: #f0f0f0;
transition: transform 0.5s;
}
.block1 {
background-color: #ff0000;
}
.block2 {
background-color: #00ff00;
}
.block2 {
transform: translateY(100%);
}
```
JavaScript (jQuery):
```javascript
$(document).ready(function() {
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
$('.block').css('transform', 'translateY(' + scrollTop + 'px)');
});
});
```
Этот код создаст эффект плавного наложения блоков при прокрутке страницы, не используя абсолютное позиционирование. Вы можете настраивать параметры (например, скорость анимации) с помощью CSS и JavaScript. Надеюсь, это поможет вам реализовать желаемый эффект на вашем сайте.