I created blocks with pure CSS parallax by following the tutorial below :

http://keithclark.co.uk/articles/pure-css-parallax-websites

My site is on Drupal 8 and Bootstrap 3. I managed to do the parallax effects in my block.

My problem :

Each block a scroll bar, I want to remove these bar and use only the scroll bar of my page to go down in my content and make the parallax effect.

Here is my site, the parallax effect is on the blocks of my homepage :

s1bose.com

Here is my style sheet :

.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; }  .path-frontpage .region-content {     margin:0;     padding:0; }  .parallax1, .parallax2, .parallax3, .parallax4, .parallax5 {     height: 500px;     overflow-x: hidden;     overflow-y: auto;     -webkit-perspective: 1px;     -moz-perspective: 1px;     -ms-perspective: 1px;     -o-perspective: 1px;     perspective: 1px;     -webkit-perspective-origin-x: 100%;     -moz-perspective-origin-x: 100%;     -ms-perspective-origin-x: 100%;     -o-perspective-origin-x: 100%;     perspective-origin-x: 100%; }  .parallax__layer {     height: 140%;     position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0;     -webkit-transform-origin-x: 100%;     -moz-transform-origin-x: 100%;     -ms-transform-origin-x: 100%;     -o-transform-origin-x: 100%;     transform-origin-x: 100%; }  .parallax__layer--back {     -webkit-transform: translateZ(-1px) scale(2);     -moz-transform: translateZ(-1px) scale(2);     -ms-transform: translateZ(-1px) scale(2);     -o-transform: translateZ(-1px) scale(2);     transform: translateZ(-1px) scale(2); }  .parallax1 .parallax__layer--back {     background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-1.jpg");     -webkit-background-size: cover;     -moz-background-size: cover;     -ms-background-size: cover;     -o-background-size: cover;     background-size: cover;     background-repeat: no-repeat;     background-position: center center; }  .parallax2 .parallax__layer--back {     background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-2.jpg");     -webkit-background-size: cover;     -moz-background-size: cover;     -ms-background-size: cover;     -o-background-size: cover;     background-size: cover;     background-repeat: no-repeat;     background-position: center center; }  .parallax3 .parallax__layer--back  {     background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-3.jpg");     -webkit-background-size: cover;     -moz-background-size: cover;     -ms-background-size: cover;     -o-background-size: cover;     background-size: cover;     background-repeat: no-repeat;     background-position: center center; }  .parallax4 .parallax__layer--back {     background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-4.jpg");     -webkit-background-size: cover;     -moz-background-size: cover;     -ms-background-size: cover;     -o-background-size: cover;     background-size: cover;     background-repeat: no-repeat;     background-position: center center; }  .parallax5 .parallax__layer--back {     background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-5.jpg");     -webkit-background-size: cover;     -moz-background-size: cover;     -ms-background-size: cover;     -o-background-size: cover;     background-size: cover;     background-repeat: no-repeat;     background-position: center center; }  .parallax__layer--base {     -webkit-transform: translateZ(0);     -moz-transform: translateZ(0);     -ms-transform: translateZ(0);     -o-transform: translateZ(0);     transform: translateZ(0); }  .parallax__layer--content {     position: absolute;     top: 50%;     -webkit-transform: translateY(-50%);     -moz-transform: translateY(-50%);     -ms-transform: translateY(-50%);     -o-transform: translateY(-50%);     transform: translateY(-50%);     text-align: center;     width: 100%;     color: #ffffff;     padding: 15px;     background-color: rgba(0, 0, 0, 0.38823529411764707); }  #block-section1, #block-section2, #block-section3, #block-section4, #block-section5 {     width: 100%;     text-align: center;     padding: 2em;     font-size: 20px;     background-color: #3b842d;     color: #ffffff; }  .parallax__layer--base h2, #block-section1 h2, #block-section2 h2, #block-section3 h2, #block-section4 h2, #block-section5 h2 {     margin-top: 0px;     font-size: 30px; }  .parallax__layer--base p {     font-size: 16px; }  #block-section1 p, #block-section2 p, #block-section3 p, #block-section4 p, #block-section5 p {     font-size: 20px; } 

Here is my html code (templates on drupal) :

<div class="{{ elements['#id'] }}">     <div class="parallax__layer parallax__layer--back"></div>     <div class="parallax__layer parallax__layer--base">         <div class="parallax__layer--content">{{ content['body']['0']['#text'] | raw}}</div>     </div> </div>