如何在纯 CSS 中创建视差效果？

Question

我想在我的主页上添加视差效果。

目前，背景图片是固定的，但这不是我要的效果。

我希望背景比我的页面慢。

如本例所示：

https://codepen.io/RenanB/pen/GZeBNg

我设法在 javascript 中做到了这一点，但我在使用 Drupal 8 时遇到了很多问题。

所以我想在纯 CSS 中产生视差效果。

我尝试遵循这个已经有两年历史的教程，但我还没有设法调整我的代码：

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

这是我主页的样式表：

/*-------------------------------------------*
/* 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;
}

我正在寻找幻灯片 3 的视差效果：

https://codepen.io/keithclark/pen/JycFw?editors=1100

Answer 1

我希望这段代码对你有帮助

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/

根据您的评论，隐藏滚动条试试这个代码

.parallax1::-webkit-scrollbar {
width: 0px;
background: transparent;
}