The previous lesson we saw how we can create clones of our existing elements as soon as we click on
them, so there's a few other things that we want to add in and we want to add the ability that we have
some type of movement on these elements.
So, again, selecting that object, we're going to set a value for moves using math.
We can do math floor and let's do math randoms.
We've got them each randomized the number of movements that we can make.
So up to twenty five movements we're going to allow them to make.
And then after we've given a random number for the moves are going to set up the interval, so we're
going to do a set interval and this interval is going to invoke a function, call it mover, and it's
going to run every twenty five milliseconds.
Now let's create that function.
And I'll make this bigger.
This is going to be a fairly long.
So we'll check to see if the Holder object, so it's always referring to that Holder one moves is less
than or equal to zero.
And if it is, then we want to clear the interval, so that means that it's over and we want to clear
that interval so that holder.
Object.
IMT, so the same one that we created up there, so this gives us a way out of our element, our intervale.
Also, we want to update our holder object moves value and we can decrease that.
So decreasing that and again, selecting that Holder object, we can update so set up some variables
where we've got our start y position.
So update that by 10:00 and sending those positions, we should do that as well up here.
So within our Holder object so that we have a start position to reference, this is where our element
starts.
So the exposition and using the parent, the element offset left.
For our horizontal and then we also need to set a vertical so start y and using that elements we can
use offset.
Top to determine where the offset top position and remember from the last lesson that these are going
to be numeric value.
So we don't have to pass them as integers and we can just use them as numbers.
And we can also update our y position so we can make it go diagonally across, or it could just make
this one a little bit less of an increment.
So taking our holder object to the next step we need to do is update our style properties for that particular
element and we've got our Holder object start X or start Y position.
And don't forget to add the pics, otherwise it's not going to work.
And this one is going to be updating the style left position.
And this is going to be X is going to be moving along the horizontal.
So now let's try that out and see what happens.
So we see we've got these elements that are falling at random.
Places and this way, you can clearly distinguish that you're producing multiple ones.
So that's how you can create some type of animation and movement for the elements that you're cloning,
so it's not all stacking one on top of the other.
So now we've got more of a randomized effect here.
So let's also in the next lesson, we're going to make these elements, Digable.
So whenever we go on top of them will make it so that we can drag them.
So that's coming up in the next lesson, because we already have that cursor where we've updated the
cursor style on top of these elements as we're creating them.
So giving them the fact that we have the ability to drive them.
So let's add that in in the next lesson.
So go ahead and build out your interval and update the position of the elements that are created.