Better selector !! about rellax HOT 6 CLOSED

Hey @Codevz appreciate you taking the time to create an issue.

I think you make a great point that we should automatically detect the rellax elements, but my main concern is that there are two relatively common scenarios where this wouldn't be ideal.

1. If a user decides to not specify speed or set a global speed for all their parallax elements, ie var rellax = new Rellax('.rellax', {speed: 3}) // {speed: 3} is optional.

2. Attribute selection is notoriously slow and Rellax is built on the ideal of gentle enhancement. Realistically this library was created to support static websites that have a little bit of js animation, so I'd prefer to not use data attributes as selectors. With all that said, I'm not entirely opposed, especially since my favorite frontend coder does it with his pro libraries (@metafizzy).

from rellax.

For me, it will be much better if you can allow user to accept query selector.

rellax = new Rellax(document.querySelector(".rellax"), {speed: 3});
rellax = new Rellax(document.getElementById("#rellax"), {speed: 3});

from rellax.

We just merged in a version to submit an ID or classname, or anything that querySelectorAll accepts. Going to close this for now.

from rellax.

Hi!
I know this issue is closed, but I don't wanna open another one just to suggest something ...
So, I think the selector could be moved inside the "options" object (on v2.0 maybe, because it'd probably break backwards compatibility).
I usually just go with the default .rellax selector, but if I wanna change the global speed for example, I'll still need to specify the .rellax before I can pass in the { speed: -1 } object.
Resuming, it could look something like:

var rellax = new Rellax({
	selector: '.rellax', // Optional
	speed: -1,
	center: true
});

It's not a biigg difference, but I'd like to see what you guys think.

from rellax.

I'm working on a lit-html project and since it uses Shadow DOM, I can't use the default selector like this

var rellax = new Rellax('.relax');

In order for it to work I would need a selector that looks like this:

var rellax = new Rellax(this.shadowRoot.querySelectorAll('.rellax'));

Otherwise I get the Error: The elements you're trying to select don't exist. message. Is there anything else I could try?

from rellax.

Didn't realize this but apparently you can pass a node to Rellax

var el = this.shadowRoot.querySelectorAll('.rellax');
var rellax = new Rellax(el);

Give this a shot

from rellax.