How to create a parallax effect in pure CSS? - html

Question

I want to add a parallax effect to my home page.
Currently, the background image is fixed, but this is not the effect I'm looking for.
I want the background to be slower than my page.
As in this example :
https://codepen.io/RenanB/pen/GZeBNg
I managed to do this in javascript but I have a lot of problems with Drupal 8.
So I want to have a parallax effect in pure CSS.
I tried to follow this tutorial that is already two years old, but I have not managed to adapt my code :
http://keithclark.co.uk/articles/pure-css-parallax-websites/
Here is the style sheet of my homepage :
/*-------------------------------------------*
/* Page accueil
/*-------------------------------------------*/
.path-frontpage .main-container {
width: 100%;
padding: 0;
margin: 0;
}
.path-frontpage .main-container .row {
margin-left: 0;
margin-right: 0;
}
.path-frontpage .main-container .row .col-sm-12 {
padding-left: 0;
padding-right: 0;
}
#block-parallax1 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-1.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax2 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-2.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax3 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-3.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax4 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-4.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax5 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-5.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-section1,
#block-section2,
#block-section3,
#block-section4,
#block-section5 {
text-align: center;
padding: 2em;
font-size: 20px;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax1 .field--name-body,
#block-parallax2 .field--name-body,
#block-parallax3 .field--name-body,
#block-parallax4 .field--name-body,
#block-parallax5 .field--name-body {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
color: #ffffff;
padding: 15px;
background-color: rgba(0, 0, 0, 0.38823529411764707);
}
#block-parallax1 h2,
#block-parallax2 h2,
#block-parallax3 h2,
#block-parallax4 h2,
#block-parallax5 h2,
#block-section1 h2,
#block-section2 h2,
#block-section3 h2,
#block-section4 h2,
#block-section5 h2 {
margin-top: 0px;
font-size: 30px;
}
#block-parallax1 p,
#block-parallax2 p,
#block-parallax3 p,
#block-parallax4 p,
#block-parallax5 p {
font-size: 16px;
}
#block-section1 p,
#block-section2 p,
#block-section3 p,
#block-section4 p,
#block-section5 p {
font-size: 20px;
}
I'm looking for the parallax effect of Slide 3:
https://codepen.io/keithclark/pen/JycFw?editors=1100

Answer 1

i hope this code helps for you
https://jsfiddle.net/LmjeLbmk/20/
.parallax {
font-size: 200%;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
padding: 100vh 0;
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">This is the background</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">This is the foreground</div>
</div>
</div>
https://jsfiddle.net/LmjeLbmk/20/
as per your comment, to hide scrollbar try this code
.parallax1::-webkit-scrollbar {
width: 0px;
background: transparent;
}