position fixed only horizontal but allow vertical scroll using javascript for parallax effect

Question

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/

Do you want to make the color grid to behave horizontal or you just want to show the images all the time during vertical scroll ? — Manish
i want the images to move with the page when you scroll vertically, not stay fixed to their current position — violetthesun

Manish Manish · Accepted Answer · 2016-06-18T08:34:10

.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 !!

position fixed only horizontal but allow vertical scroll using javascript for parallax effect

1 Answers