Я следовал руководству по параллаксной прокрутке и придумал следующее:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.parallax {
position: absolute;
left: 0;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
margin: 0;
}
.parallax_layer_back {
position: absolute;
left: 0;
right: 0;
height: 650px;
top: -150px;
background-size: cover;
transform: translateZ(-1px);
background-image: url(https://www.rgraph.net/images/front-page-sidebar-background1.jpg);
background-position: 0px;
margin: -250px -1500px 0 -1500px;
}
.parallax_layer_front {
transform: translateZ(0);
margin-top: 230px;
background-color: white;
padding: 25px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="parallax">
<div class="parallax_layer_back"></div>
<div class="parallax_layer_front">
<h1>Beautiful javascript charts for your websites</h1>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
<p>
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu
</p>
</div>
</div>
</body>
</html>
Но мне не удалось преобразовать верхний слой в слой справа от страница, похожая на страницу на сайте RGraph: https://www.rgraph.net
Кто-нибудь может подсказать, как это сделать?