如何在纯CSS中创建视差效果? [英] How to create a parallax effect in pure CSS?

问题描述

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

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.

如本例所示:

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

我设法用javascript做到了这一点，但是Drupal 8存在很多问题.

I managed to do this in javascript but I have a lot of problems with Drupal 8.

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

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/

这是我主页的样式表:

/*-------------------------------------------*
/* 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的视差效果

I'm looking for the parallax effect of Slide 3:

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

推荐答案

我希望这段代码对您有所帮助

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

这篇关于如何在纯CSS中创建视差效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！