How to assign values to a jquery object using for loop

Question

I have tried several ways to create a parallax effect on my images where each image has it's own random speed. I think the best way for me to achieve it is by assigning a speed value to each image. However I am not sure how to do this.

var img_list = [];
$.each($('.gallery_image'), function(e) {
    img_list.append($(this));
});

for(x in img_list) {
    ran = Math.round(Math.random() * (11 - 1) + 1);
    speed = ran.toString() + "px";
    x.speed = speed;
}

This is what I came up with. I know that x.speed is not an actual thing, but I am using that to illustrate what I am trying to accomplish.

This is a website that has exactly what I am looking for on the main page, but I want the movement to be on scroll. EXAMPLE

I know, but I'm not sure how to assign a speed value to the jquery objects — Shniper
– Shniper, Commented Dec 15, 2016 at 6:42
Could you print.the content of img_list? Didnyou try to iterate with for (i=0; i<img_list.length; i++)?? — partizanos
– partizanos, Commented Dec 15, 2016 at 6:55

Joe Horn · Accepted Answer · 2016-12-15 06:46:43Z

2

for(var x in img_list) {
    var ran = Math.round(Math.random() * (11 - 1) + 1);
    img_list[x].speed = ran.toString() + "px";
}

answered Dec 15, 2016 at 6:46

Joe Horn

4433 silver badges13 bronze badges

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

1 Comment

Shniper Over a year ago

Sorry been coding for about 8 hours straight and its 2am. Thank you that works. Do you have a suggestion on how to make the parallax? Just with a .css changing the position on scroll?

madalinivascu · Accepted Answer · 2016-12-15 07:04:19Z

1

Use push

var img_list = [];
$.each($('.gallery_image'), function(e) {
    img_list.push($(this));
});

but in this case you don't need a loop because $('.gallery_image') is a collection of objects

In the second loop you can use a each loop and save the speed as a data attribute:

$('.gallery_image').each(function(i,x){
    ran = Math.round(Math.random() * (11 - 1) + 1);
    speed = ran.toString() + "px";
    $(x).data('speed',speed);
});

edited Dec 15, 2016 at 7:04

answered Dec 15, 2016 at 6:48

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

2 Comments

nnnnnn Over a year ago

"$('.gallery_image') is a array of objects" - Well, it's a jQuery object, which is array-like (but not an actual array). Might be better to use .data() rather than .attr().

madalinivascu Over a year ago

@nnnnnn thnx for the feedback

vikrant singh · Accepted Answer · 2016-12-17 06:01:44Z

1

I dont know if this is relative or not ,but I made a demo . Hope this helps.

To move image set left css property of dom.

DEMO

https://jsfiddle.net/vikrant47/yem6f0Ls/4/

edited Dec 17, 2016 at 6:01

answered Dec 15, 2016 at 7:16

vikrant singh

2,1111 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to assign values to a jquery object using for loop

3 Answers 3

1 Comment

2 Comments

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

DEMO

Comments

Your Answer

Sign up or log in

Post as a guest

Related