search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Parrallax Scrolling effect #530

Closed 11nf0s3c closed 7 years ago

11nf0s3c commented 7 years ago

I have tried to put a parallax scrolling effect on the home page with a flickity slider mechanism.

.item { background-attachment: fixed; }

It does not work at all in firefox, where parallax scrolling effect works in chrome to some extent but when the flickity slider goes through a transition, the background disappears and then reappears again.

desandro commented 7 years ago

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

clarknelson commented 5 years ago

I am having trouble with this also... I will create a test case.

clarknelson commented 5 years ago

https://codepen.io/clarknelson/pen/ebBJee

desandro commented 5 years ago

Thanks for that. Looks like this is a browser issue. background-attachment: fixed works with natural page scrolling, whereas Flickity uses transforms for positioning elements. If you want to use background-attachment: fixed, then you're better off not using Flickity and using a simple div withoverflow-x: scroll.