Luyện nói tiếng Anh bằng Shadowing qua video: This library changes how JS and CSS work together

Hello, my friend and friend, if you want to know how we can do something like this, where these animations that come in as we're sliding down here and do this type of effect,

all with one line of JavaScript, I guess you're in the right place, because this is where we're going to see how this works.

And it's all being made possible thanks to Adam's props for that.

So the link for this is in the description, but you can see this is what JS knows now CSS knows.

And I talked last week about how it's a good idea to pass as much information to CSS as possible.

There's some things that it's annoying to do that for, and Atom is solved the problem here.

We have our FPS, our viewport size, our scroll velocity, the color of inputs live being updated.

You can see the cursor position, all sorts of different things that are being passed through, and it's all incredibly easy to do and quite performant.

So I'm just going to jump to the docs really fast to say if we go to get started, all we need to do you have your npm install props for

that and there's a few different things depending on how you want to set things up

so if you do want to use this depends a little bit on your project

but it's incredibly easy to do let's dive in

and see how easy this actually is to use all right

so I've set up a nice page here I think

and I want to wire this up to to make it more interactive

and more fun so all I'm doing in my javascript is importing the props for

that slash auto and then we can dive in

and actually start using these and to be able to do

that there's a different things we have to do

or actually there's not a few there's one thing really

that we need to do uh

which is i'm going to come over into my html i

have this card here with a twist in we're going to look at

that in a minute but i just have to come here for a data props for

and i have to list out the different things

that i want to look for in this case what i

want to be looking for is my pointer local uh

but yeah what that's going to be doing then let's actually go look in my dev tools

we can go on this card and Oh, I put prop for, sorry, that should have been props for on that.

And I knew it wasn't working.

So if I go take a look now, there we go.

I can see the local, the live local pointer X ratio and the Y ratio.

And there's also a pointer inside that's on there.

And what that's doing is no matter where I am, it's giving me live updates.

And the live inside is whether or not I'm on top of it.

So it's sort of like a hover detection that we can be using.

Now, one thing you might be worried about right away is like, oh my goodness, this could be terrible for performance if it's always tracking all of that.

But as soon as that element is off the page, you can see like I've scrolled away, it's not tracking it anymore.

So it's only tracking these, whatever props you're looking for, if the element is visible on the page, which is a good thing, because if not, you're just wasting processing power.

So yeah, there's a lot of performance things that item is baked into here, which is super awesome.

So I'm getting my my pointer local and now I want to use it.

So I have set up some gradients here on here that you might have noticed.

I'm doing this, this is like a texture with an SVG.

I have this gradient, which is the background, the glowy one.

Then I have a solid color coming in here for the background color, because if I didn't have that just really fast, it would be really blue.

We get something like that that looks really ugly.

And then I have this radial gradient, which is set to my border box, which is giving me sort of the shine at the top.

I've done a more in-depth video on how this works, so I'll link to that in the description if you're interested.

And this code is also available.

But you'll notice here I have set up this x and y values that aren't anything right now.

It's just using these fallbacks instead.

So what I could do is go and use the props for to get an x and a y value.

Now the prop that we're getting from Adam's prop for that is this, the live local pointer x ratio.

And we have the y ratio as well that we're coming in.

But any prop, I might have mentioned that they're always unitless

and this is on purpose so we can use them however you want to be using them.

In this case I want it as a percentage based on where I'm hovered on top.

You can see I actually broke it now because it's passing those values in as the x and y.

And so what I'm going to do is a calc on them and we want to do this on both.

So we can say this is a calc, open that calc up, we're going to come over here, close it and say this is times 100% to add the unit onto there.

And now we can see it actually follows my mouse around.

And this is so incredibly easy.

I don't have to wire up any JavaScript or anything.

The props are just getting passed through and it's working.

You can see I did a few fancy things with clamps here just to make sure

that when I move far enough off, it doesn't keep on following me away.

But yeah, that works fantastic.

And all my other ones aren't wired up yet.

So I'm going to quickly go through and just add these on there.

But we're going to be adding one more other thing at the same time, which is visibility.

And we're going to see two different options here, but we're going to start with the visibility.

And I just added it to all of my different cards.

So we can see this is working on all of them, which is fantastic.

But there is another custom property that's now being used on these.

So if we go and take a look or not a custom property, I should be saying, we have this live visible of one.

And we also have a const has entered of one.

So with props for that, there's two different types of props we get.

There's the live ones which are constantly being updated

and there's the const which aren't right

so the const has entered uh we might have to actually refresh the preview here

so let's refresh that and we can grab this first card

and we can see that the const has entered is actually currently one

but if we go and look in the next section

and my sticky wrap the const has entered is zero right there

and if i start scrolling down now that has switched over to one it has entered So it's one, the live visible is also one.

But if I keep scrolling, the live visible is switched back over to zero, whereas the const has entered has stayed as number one.

So the live visible is always updating live, whereas the const will only update the one time.

It's more of a constant, as you'd expect.

Now, it does switch at one point because we're tracking if it's entered or not, but it just means we can do either a scroll-driven animation, which we can do with CSS now.

Browser support's getting better, but it's not perfect, so this could be a nice way to do this for the time being.

But there's also scroll-triggered animations, which we can't quite do yet in CSS.

They're on their way, but we can use this for that type of thing.

So how can we use it?

Well, can do a few different fun things.

Let's go to these twist ins now that I have.

I already have a class set up here for a twist in

and for these that's just to give these a little bit of fun animation as we're going down the page.

So the first thing we could do here is just an opacity of var live visible which is the prop we're getting.

So this one will be visible actually let's do a transition of opacity as well.

100

I'm going to make it really long just for demo purposes, but I wouldn't actually do five seconds.

101

But now if I scroll down, you can see that one slowly starts fading in as we get there.

102

And again, don't do five seconds, but we're triggering that to happen.

103

Now, once they've left again, because I'm using live visible, that means it's also switching back to zero.

104

So if I start scrolling back up, they're going to start fading back in this way.

105

That's fine.

106

I don't mind that too much, but this is where the const might actually be a better option

107

because I sort of like it when things only fire once.

108

For the time being, though, I think I'll leave it as this just because it makes it easier for while I'm demoing things.

109

But if I was doing this for production, I'd probably use the const instead of the live value here.

110

Now, really fast, one way

111

that we could actually use this now is to come in

112

with a transform on this to give us some perspective on these.

113

All right.

114

So it's sort of at this weird angle.

115

They're all going to be like that.

116

I think let's just drop this opacity transition for the time being.

117

So we actually see things.

118

So this is already kind of fun, but it'd be nice if like they're sort of angled and then they turn in.

119

The other thing I'm going to do is I'm actually going to switch these for a variable.

120

I will do that after just because I don't want them all facing the same way.

121

I want the other ones flip the other way but we can fix that after.

122

But this is where we can get kind of interesting

123

because our is our live visible or the const is either a one or a zero.

124

I actually want this to become zero once it's visible.

125

So how can we do that?

126

So I'm going to come here and say is visible

127

and we're going to say this is a calc of 1 minus my var of live visible.

128

Visible.

129

Cool.

130

So this, if it is visible, the number will actually be 0.

131

It's kind of backwards in a way, I suppose.

132

But what we're saying is 1 minus 0 would still be 1 and a 1 minus 1 would become 0, right?

133

So maybe if you have a better name for this, please let me know in the comments.

134

But what I'm going to do is put this in a calc of the 25 degrees times my var is visible.

135

And what this is going to do is there you go.

136

You can see it's actually we don't have it applied anymore.

137

And we're going to say the same thing here.

138

I guess I should have done both of these calcs at the same time.

139

25 degrees times var is visible.

140

Maybe I should do active or something like that instead of visible on screen.

141

I'm not sure.

142

Anyway, so the idea is it's negative 25 times one if it's off the screen.

143

No, sorry.

144

Yeah, times one because it's one minus zero.

145

So anyway, we get if it is visible, it's going to undo its thing.

146

And then on our transition, let's just take opacity off here.

147

We can say this is five seconds.

148

So now as a let's see transition.

149

Oh, that one is visible but the next one that comes in should be at an angle and it twists into place.

150

And then the next one twists into place.

151

And obviously the five seconds is way too long for these types of things.

152

But we're triggering the animation based on when it's coming in.

153

Again, I don't really want them reverse doing, but it's better for demos.

154

So we can see it always working, but I'd probably make that the const.

155

Cool.

156

So that's working.

157

The last thing I'm going to do is just the value here.

158

I'm going to do this as my var twist y negative 25

159

so we have a default value on there and let's copy this paste

160

that becomes an x and that was a negative 8

161

and I guess this would be sort of our starting position

162

but it just means on the ones

163

that I've done the negative order on I can also come on these

164

and say that the twist y is 25 degrees my twist x is 8 degrees

165

so they're opposite from one another maybe that stays at negative let's see

166

when I get down to there that one's coming in

167

that way and when I get to there that one's coming in

168

that way I think that's exactly what I wanted

169

so they're opposite from what they were along the way there and of course then this could be something like,

170

I don't know, 0.75 instead.

171

So it's a little bit more snappy.

172

And we get those coming in as we're scrolling down.

173

And we still have all of these different effects that are working.

174

I think this is fantastic.

175

You can see how easy that was not having to set up our all of the observers, all these different things don't have to worry about the JavaScript.

176

I just want to say a very big thank you to Adam for setting all of this up, enabling so much and of course there's

177

so much more go check it out the link for it

178

is in the description i also want to say a big

179

thank you to my enabler of awesome johnny as well as all my other patrons

180

and channel members for their continued support

181

and of course until next time don't forget to make your

182

corner of the internet just a little bit more awesome

183

and this is going to help you do it so go forth and make some cool stuff

📺 Cùng kênh

✨ Video gợi ý

132 câu

Video

University StudentsBusiness English+1

281 câu

How to actually make eye-catching 3D Scenes | After Effects

University StudentsBusiness English+1

68 câu

GitHub Copilot now controls your command line...

University StudentsBusiness English+1

148 câu

Building a REAL pawn that transforms into a queen (automatically)

University StudentsBusiness English+1

76 câu

10 very promising Open Source Projects you haven’t heard of

en-USUniversity Students+2

285 câu

The basics in Amplitube 5

University StudentsBusiness English+1

269 câu

Design with Claude Code: The Designer’s Guide

University StudentsBusiness English+1

41 câu

Making a 360° Controller Smaller than a Penny!

University StudentsBusiness English+1

103 câu

you will never ask about pointers again after watching this video

University StudentsBusiness English+1

77 câu

Clicks Communicator: First Look

University StudentsBusiness English+1

67 câu

How I Ranked 1st at Cambridge University - My Secret

en-GBUniversity Students+2

Phương Pháp Shadowing Là Gì?

Shadowing là kỹ thuật học ngôn ngữ có cơ sở khoa học, ban đầu được phát triển cho chương trình đào tạo phiên dịch viên chuyên nghiệp và được phổ biến rộng rãi bởi nhà đa ngôn ngữ học Dr. Alexander Arguelles. Nguyên lý cốt lõi đơn giản nhưng cực kỳ hiệu quả: bạn nghe tiếng Anh của người bản xứ và lặp lại to ngay lập tức — như một "cái bóng" (shadow) đuổi theo người nói với độ trễ chỉ 1–2 giây. Khác với luyện ngữ pháp hay học từ vựng bị động, Shadowing buộc não bộ và cơ miệng phải đồng thời xử lý và tái tạo ngôn ngữ thực tế. Các nghiên cứu khoa học xác nhận phương pháp này cải thiện đáng kể phát âm, ngữ điệu, nhịp điệu, nối âm, kỹ năng nghe và độ lưu loát khi nói — đặc biệt hiệu quả cho người luyện IELTS Speaking và muốn giao tiếp tiếng Anh tự nhiên như người bản ngữ.

Phương pháp shadowing: đọc hướng dẫn từng bước đầy đủ →

Luyện nói tiếng Anh bằng Shadowing qua video: This library changes how JS and CSS work together

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Transition to and from display: none

Your AI broke the layout. Now what?

No more magic numbers for your breakpoints

More CSS quick tips

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

5 CSS fouls that I see way too often

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

Build smarter color systems with relative colors

Video

How to actually make eye-catching 3D Scenes | After Effects

GitHub Copilot now controls your command line...

Building a REAL pawn that transforms into a queen (automatically)

10 very promising Open Source Projects you haven’t heard of

The basics in Amplitube 5

Design with Claude Code: The Designer’s Guide

Making a 360° Controller Smaller than a Penny!

you will never ask about pointers again after watching this video

Clicks Communicator: First Look

How I Ranked 1st at Cambridge University - My Secret

Về Bài Học Này

Phương Pháp Shadowing Là Gì?