I have a parallax / swipe effect that I am trying to achieve by attaching fixed background images to containers that are animating left and right, but I also need the ability to have the image scroll vertically with the page. How can achieve this visual effect while allowing vertical scroll?
.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;
}
Make sure to mouseover the elements in the jFiddle to get the parallax / swipe effect, and scroll down on the jfiddle to see the problem https://jsfiddle.net/pd37cmey/2/
.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/
However this took me around an hour :).
Thanks !!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.