1
00:00:00,630 --> 00:00:06,210
Let's make it move in this lesson, we're going to make the content within our element moving up and

2
00:00:06,210 --> 00:00:08,020
we already set up our interval.

3
00:00:08,340 --> 00:00:15,300
So next, let's select our scroll speed so this can be whatever the speed is that we want to scroll

4
00:00:15,310 --> 00:00:20,980
up so far right now, let's set it at ten and then we can update it with the input later on as well.

5
00:00:21,180 --> 00:00:26,790
We need to record and use some of the values that are available within the elements, and we can use

6
00:00:26,790 --> 00:00:30,120
those by getting the style top value.

7
00:00:30,360 --> 00:00:37,370
So just as we're setting it up here, we can also get this value and we can pull that information back.

8
00:00:37,800 --> 00:00:41,840
So if we do style top, you can see what gets output in the console.

9
00:00:42,060 --> 00:00:43,600
So we get that PIC's value in.

10
00:00:43,610 --> 00:00:49,920
In order to get rid of the PIC's value, we have to use the pass integer and that will turn that value

11
00:00:49,920 --> 00:00:51,420
into a numeric value.

12
00:00:51,690 --> 00:00:57,990
So now we've got back down to five, 93, and this is what we need to use in order to calculate how

13
00:00:57,990 --> 00:01:00,550
far up that particular element is.

14
00:01:00,840 --> 00:01:05,760
So as we loop through and we iterate through the intervals, we want to move the element up.

15
00:01:05,910 --> 00:01:14,970
So taking that s element, we're going to take style top and we're going to increase that by the same

16
00:01:14,970 --> 00:01:16,560
value that we've got over here.

17
00:01:16,890 --> 00:01:19,410
And we can use this as a variable.

18
00:01:20,010 --> 00:01:26,190
So taking our position, we can call it position y, we can get that value out.

19
00:01:26,310 --> 00:01:28,020
This, again, is a numeric value.

20
00:01:28,020 --> 00:01:30,940
We can see that we can use that within our console.

21
00:01:31,260 --> 00:01:40,550
So taking that value, also adding our scroll speed to that and then adding our PEX value.

22
00:01:41,040 --> 00:01:43,050
So let's see what happens and we refresh it.

23
00:01:43,500 --> 00:01:49,730
And you can see that now we're decreasing or we're actually increasing the position.

24
00:01:50,010 --> 00:01:53,490
So we actually need to do is we need to decrease the position.

25
00:01:53,880 --> 00:02:00,930
So subtracting the scroll speed refresh and now you see that it's scrolling up, so scrolling up and

26
00:02:00,960 --> 00:02:02,990
we need to have a way to catch it.

27
00:02:03,540 --> 00:02:07,350
So as long as it's greater than zero, then we're still okay to scroll up.

28
00:02:07,590 --> 00:02:12,870
So let's add in a condition so that we don't run off the page and we reset the starting position.

29
00:02:13,110 --> 00:02:22,410
So taking our position y value and adding our S element, and this is where we're going to use the client

30
00:02:22,410 --> 00:02:24,440
height value values the same one as before.

31
00:02:24,930 --> 00:02:30,150
So we're taking these two values and we're checking to see if it's greater than zero.

32
00:02:30,450 --> 00:02:34,160
And if it is, then we're still good to go to increase it.

33
00:02:34,170 --> 00:02:40,920
And if it's not, then we're going to reset the position to be equal to whatever the client height is.

34
00:02:41,760 --> 00:02:49,290
So that taking that value and we're taking the value of the client height.

35
00:02:51,250 --> 00:02:56,890
And then again, adding in the pics so that we can set the property, so let's see what happens.

36
00:02:58,030 --> 00:03:03,580
So now we see that it's scrolling up and when it reaches the top, it's going to start again from the

37
00:03:03,580 --> 00:03:03,920
bottom.

38
00:03:04,300 --> 00:03:09,220
We can also make that client area smaller for one or two as well.

39
00:03:09,230 --> 00:03:12,140
So we could make it half of the height of one or two.

40
00:03:12,910 --> 00:03:13,840
So refresh.

41
00:03:15,080 --> 00:03:16,760
So now it's a little bit smaller there.

42
00:03:18,180 --> 00:03:23,610
We could shrink that down and you can see that once it runs to the top, doesn't matter how much you

43
00:03:23,610 --> 00:03:28,860
adjust the height of it, we're always going to be running to the top and then it's going to be resetting

44
00:03:28,860 --> 00:03:30,830
just underneath the visible area.

45
00:03:32,750 --> 00:03:40,550
And we can also output into our output area, so our output updating our inner HTML, and this is where

46
00:03:40,550 --> 00:03:49,970
we can just output the scroll speed and also we can also include the Y position and then add in whatever

47
00:03:49,970 --> 00:03:52,830
the value of position Y is currently.

48
00:03:53,300 --> 00:03:58,070
So we'll get some values that are being output there so we can see that something is changing, constantly

49
00:03:58,070 --> 00:03:58,590
changing.

50
00:03:58,700 --> 00:04:04,880
And once we hit negative, whatever the value of the height is, then we reset and we go back to the

51
00:04:04,880 --> 00:04:05,220
zero.

52
00:04:06,110 --> 00:04:09,200
So go ahead and add this into your application.

53
00:04:09,200 --> 00:04:16,280
Add in the calculations, try it out for yourself, try out working with the elements, updating the

54
00:04:16,280 --> 00:04:20,120
element position, setting the style properties style top.

55
00:04:20,420 --> 00:04:26,660
And remember that in order to set style top, we also might need to make sure that our position is absolute.

56
00:04:26,690 --> 00:04:28,860
So that gives us the ability to move it around the page.

57
00:04:29,240 --> 00:04:30,910
So go ahead and try this out for yourself.

58
00:04:31,130 --> 00:04:33,980
And coming up next, I'll show you how you can adjust the scroll speed.