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
– Manish, Commented Jun 18, 2016 at 6:09
i want the images to move with the page when you scroll vertically, not stay fixed to their current position — violetthesun
– violetthesun, Commented Jun 18, 2016 at 6:24

nworbkcin · Accepted Answer · 2016-07-20 21:05:37Z

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/

However this took me around an hour :).

Thanks !!

edited Jul 20, 2016 at 21:05

nworbkcin

134 bronze badges

answered Jun 18, 2016 at 8:34

Manish

2471 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manish Over a year ago

I think this is due to jsFiddle run screen alignment issue. Let's try this on original code and check if this is working fine. Thanks !!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related