search

dixonandmoe / rellax

Lightweight, vanilla javascript parallax library
https://dixonandmoe.com/rellax/
MIT License
7.06k stars 878 forks source link

responsive speeds fix - #121 #182

Closed kloo012 closed 4 years ago

kloo012 commented 4 years ago

Fixes #121 All documentation found in README and test page. New data attributes example: 

data-rellax-xs-speed="-1"
data-rellax-mobile-speed="-3"
data-rellax-tablet-speed="-7"
data-rellax-desktop-speed="-10"

Set custom breakpoints like so:

var rellax = new Rellax('.rellax', {
  breakpoints: [576, 768, 1201]
})

First contribution to open source ever..! Open to all suggestions

moeamaya commented 4 years ago

Thanks so much for the PR!! I merged it in and everything seems to work well

mickaelchanrion commented 4 years ago

Hey, I get a bit confused by the mix of xs, sm, md, lg (internally) and mobile, tablet, desktop (in data attributes). For now, sm corresponds to mobile although it's usually identified as tablet.

I think we could gain in lisibility and simplicity if we do it this way:

const rellax = new Rellax('.rellax', {
  breakpoints: [sm, md, lg, xl]
})
data-rellax-sm-speed="x"
data-rellax-md-speed="x"
data-rellax-lg-speed="x"
data-rellax-xl-speed="x"

As we're doing mobile-first here, data-rellax-xs-speed="x" should be removed: For all devices: data-rellax-speed For devices >= sm: data-rellax-sm-speed For devices >= md: data-rellax-md-speed etc...