且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-06-23 06:04:49

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

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