Question

我有一个视差/滑动效果，我试图通过将固定的背景图像附加到左右动画的容器来实现，但我还需要能够使图像与页面垂直滚动。如何在允许垂直滚动的同时实现这种视觉效果？

.project-ten__container {
 position: relative;
 display: inline-block;
 width: 20vw;
 height: 100vh;
 vertical-align: top;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 }

确保鼠标悬停在jFiddle中的元素以获得视差/滑动效果，并向下滚动jfiddle以查看问题 https://jsfiddle.net/pd37cmey/2/

Answer 1

.project-ten__container {
    position: relative;
    left: -10%;
    display: inline-block;
    width: 20vw;
    height: 100vh;
    vertical-align: top;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: 30%;
    -moz-background-size: 30%;
    background-size: 30%;
    overflow: hidden;
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
  }

https://jsfiddle.net/manishghec/0c6q05yu/3/

然而这花了我一个小时:)。

谢谢！

位置仅固定水平但允许垂直滚动使用javascript进行视差效果

1 个答案: