I have been attempting to implement the parallax image technique following the Keith Clark tutorial, but I am facing difficulties in getting it to work correctly.
Utilizing the skeleton CSS framework, my goal is to recreate an existing website in order to gain hands-on experience with HTML and CSS.
#ingredients {
postion: float;
padding: 5rem 0 0;
text-align: center;
min-height: 600px;
}
#ingredients h1{
margin-top: 20rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}
.parallax {
height: 100rem;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 100vh 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
}
.title{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<div id="ingredients"><--
--><div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">
The background
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">
<h1>The <strong>Freshest</strong> Seasonal Ingredients</h1>
</div>
</div>
</div>
</div>When you scroll down on the HTML, CSS, and Result section, you will come across my attempt at creating a parallax effect in the #ingredients section. Currently, I am encountering two scrollbars within this section. Removing the extra scrollbar results in the parallax effect not functioning properly.