When you see two scrollbars, it is actually the intended behavior as per the design. Unfortunately, you cannot change this behavior, but you can adjust your solution to align with the intended behavior, like displaying only one scrollbar instead of two.
The parallax effect in your design is created using the perspective and translateZ properties. In order for this effect to work properly, the container of the parallaxed items must have the perspective property, and the items themselves must be direct descendants of the container. In the solution provided below, I have set the perspective attribute to the body element, making sure that the parallax effect only occurs when scrolling the body element. By setting the overflow of the html element to hidden, the scrollbar will then appear on the body element.
My approach is similar to the one shared by Dennis Ranish, with a slight difference. I have utilized the background-image and
background-position: center bottom
properties to automatically center the image regardless of its width, eliminating the need to know the intrinsic size of the image. This method offers more flexibility compared to using fixed units like
margin-left: -1500px. Additionally, I have used
div elements instead of
img elements to address possible issues with Vue, enhancing the overall functionality of your design.
Moreover, I have adjusted the content position using top: 100% and position: relative properties to ensure that the content appears directly below the image. You can find the solution below:
* {
box-sizing: border-box;
margin: 0;
}
html {
overflow: hidden;
}
body {
overflow-x: hidden;
background-color: #fedcc8;
height: 100vh;
-webkit-perspective: 100px;
perspective: 100px;
}
div[class^="parallax__layer"] {
position: absolute;
bottom: 0;
left: 0;
width:100vw;
height:100vh;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: center;
}
h1 {
font-family: Helvetica;
color: #fff;
text-align: center;
}
.parallax__content {
background: #2d112b;
top: 100%;
position: relative;
padding: 200px 100px;
}
.parallax__layer--zero {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true');
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer--one {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true');
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer--two {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true');
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer--three {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true');
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer--four {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true');
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer--five {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true');
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer--six {
background-image: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true');
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
<div class='parallax__layer--zero'></div>
<div class='parallax__layer--one'></div>
<div class='parallax__layer--two'></div>
<div class='parallax__layer--three'></div>
<div class='parallax__layer--four'></div>
<div class='parallax__layer--five'></div>
<div class='parallax__layer--six'></div>
<div class='parallax__content'>
<h1>Hello y'all, this parallax works!</h1>
</div>