ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: 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

📺 ช่องเดียวกัน

✨ วิดีโอแนะนำ

132 ประโยค

Video

Business EnglishUniversity StudentsWorking Adults

281 ประโยค

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

Business EnglishUniversity StudentsWorking Adults

68 ประโยค

GitHub Copilot now controls your command line...

Business EnglishUniversity StudentsWorking Adults

76 ประโยค

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

Business EnglishUniversity StudentsWorking Adults

285 ประโยค

The basics in Amplitube 5

Business EnglishUniversity StudentsWorking Adults

269 ประโยค

Design with Claude Code: The Designer’s Guide

Business EnglishUniversity StudentsWorking Adults

41 ประโยค

Making a 360° Controller Smaller than a Penny!

Business EnglishUniversity StudentsWorking Adults

103 ประโยค

you will never ask about pointers again after watching this video

Business EnglishUniversity StudentsWorking Adults

77 ประโยค

Clicks Communicator: First Look

Business EnglishUniversity StudentsWorking Adults

67 ประโยค

How I Ranked 1st at Cambridge University - My Secret

Business EnglishUniversity StudentsWorking Adults

197 ประโยค

Unreal Engine 5.8 - Experimental MCP Server Support Walkthrough | State of Unreal 2026

Business EnglishUniversity StudentsWorking Adults

คำศัพท์และข้อสังเกตด้านการพูดสำหรับบทเรียนนี้

บทเรียนฝึกพูดระดับ B2 นี้ใช้วิดีโอ “This library changes how JS and CSS work together” เป็นสื่อ คำที่ถูกพูดซ้ำบ่อยที่สุด: visible, prop, const วิดีโอนี้มี 183 ประโยค และ 2466 คำ สำหรับฝึกพูดตาม ช่วงที่มีเสียงพูดยาว 11:53 ผู้พูดพูดเร็ว ประมาณ 207 คำต่อนาที จึงมีการเชื่อมเสียงและลดเสียงค่อนข้างมาก 85% ของคำอยู่ใน 3,000 คำที่ใช้บ่อยที่สุดในภาษาอังกฤษ ส่วนที่เหลือควรดูไว้ก่อนเริ่มฝึก

คำศัพท์สำคัญในวิดีโอนี้

คำที่ยากที่สุด 15 คำในวิดีโอ พร้อมคำอ่านและความหมาย:

คำศัพท์	คำอ่าน	ความหมาย
scroll คำนาม	/skɹoʊl/	ม้วนกระดาษ
calculator คำนาม	/kæl.kjə.leɪ.tɚ/	เครื่องคิดเลข
pointer คำนาม	/ˈpɔɪn.təɹ/	ไม้ชี้
animation คำนาม	/ˌæn.ɪˈmeɪ.ʃən/	แอนิเมชัน
minus	/ˈmaɪ.nəs/	ลบ
dive คำกริยา	/daɪv/	ดำ
depend คำกริยา	/dɪˈpɛnd/	พึ่ง
sticky คำคุณศัพท์	/ˈstɪki/	เหนียว
bake คำกริยา	/beɪk/	อบ
velocity คำนาม	/vəˈlɑsəti/	ความเร็ว
pasta คำนาม	/ˈpɑ.stə/	พาสตา
automobile คำนาม	/ˈɔː.tə.məˌbil/	รถยนต์, รถ
import คำนาม	/ˈɪm.pɔɹt/	การนำเข้า
shine คำกริยา	/ʃaɪn/	ส่อง, ฉาย
wrap คำกริยา	/ɹæp/	ห่อ

ไวยากรณ์ในวิดีโอนี้

โครงสร้างที่ผู้พูดใช้บ่อยที่สุด พร้อมคำพูดจริงจากวิดีโอ:

โครงสร้าง	ในวิดีโอ
ประโยคเงื่อนไข if + อนุประโยค, will/would + กริยา — เงื่อนไขและผลลัพธ์	if it is visible, the number will actually
Present perfect have/has + กริยาช่อง 3 — เหตุการณ์ในอดีตที่ยังเกี่ยวข้องกับปัจจุบัน	I've set · I've scrolled · have set
Passive voice be + กริยาช่อง 3 — เน้นสิ่งที่เกิดขึ้น ไม่ใช่ผู้กระทำ	being made · is solved · being updated
Relative clauses who / which + อนุประโยค — ข้อมูลเพิ่มเติมเกี่ยวกับคนหรือสิ่งของ	page, which is · here, which is · gradient, which is

การออกเสียงที่ควรระวัง

ผู้พูดใช้รูปย่อและรูปลดเสียง 77 ครั้ง เช่น I'm, we're, don't ให้พูดแบบสั้นตามที่ได้ยิน

เสียง “sh” และ “zh”: animation /ˌæn.ɪˈmeɪ.ʃən/, refresh /ɹɪˈfɹɛʃ/, detection /dɪˈtɛk.ʃən/, shine /ʃaɪn/
คำยาว — ลงเสียงหนักให้ถูกพยางค์: calculator /kæl.kjə.leɪ.tɚ/, animation /ˌæn.ɪˈmeɪ.ʃən/, opacity /oʊˈpæsɪti/, visibility /ˌvɪz.əˈbɪl.ɪ.ti/, velocity /vəˈlɑsəti/

เสียงที่คนไทยมักออกเสียงยาก:

เสียงท้ายคำ — ออกเสียงให้ครบ ไม่เปลี่ยนเป็นตัวสะกดแบบไทย: scroll /skɹoʊl/, minus /ˈmaɪ.nəs/, refresh /ɹɪˈfɹɛʃ/, dive /daɪv/, radial /ˈɹeɪdi.əl/
/v/ — ไม่ใช่ /w/ ให้ฟันบนแตะริมฝีปากล่าง: hover /ˈhɒvə/, visibility /ˌvɪz.əˈbɪl.ɪ.ti/, dive /daɪv/, viewport /ˈvjuːpɔː(ɹ)t/, observer /əbˈzɝvɚ/
/z/ — เสียงก้อง ไม่ใช่ /s/: visibility /ˌvɪz.əˈbɪl.ɪ.ti/, browser /ˈbɹaʊ.zəɹ/, observer /əbˈzɝvɚ/

วิธีฝึกกับวิดีโอนี้

ฟังวิดีโอให้จบหนึ่งรอบโดยยังไม่ต้องพูด แล้วจดคำที่ยังไม่รู้จัก
เริ่มที่ความเร็ว 0.75× พูดตามทีละประโยค แล้วกลับไปใช้ความเร็วปกติเมื่อเริ่มคล่อง
อัดเสียงตัวเองแล้วเทียบกับต้นฉบับ โดยสังเกตคำอย่าง scroll, calculator, pointer เป็นพิเศษ

เทคนิค Shadowing คืออะไร?

Shadowing เป็นเทคนิคการเรียนรู้ภาษาที่ได้รับการรับรองทางวิทยาศาสตร์ พัฒนาขึ้นสำหรับการฝึกนักแปลมืออาชีพ วิธีการนี้เรียบง่ายแต่ทรงพลัง: คุณฟังเสียงภาษาอังกฤษจากเจ้าของภาษาและพูดตามทันที — เหมือนเงาที่ตามผู้พูดด้วยช่วงเวลาห่าง 1-2 วินาที การวิจัยแสดงว่าเทคนิคนี้ปรับปรุงความแม่นยำในการออกเสียง ทำนองเสียง จังหวะ การเชื่อมเสียง การฟังเข้าใจ และความคล่องแคล่วในการพูดได้อย่างมีนัยสำคัญ

เทคนิค shadowing: อ่านคู่มือฉบับเต็มทีละขั้นตอน →

ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: 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...

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

Unreal Engine 5.8 - Experimental MCP Server Support Walkthrough | State of Unreal 2026

คำศัพท์และข้อสังเกตด้านการพูดสำหรับบทเรียนนี้

คำศัพท์สำคัญในวิดีโอนี้

ไวยากรณ์ในวิดีโอนี้

การออกเสียงที่ควรระวัง

วิธีฝึกกับวิดีโอนี้

เทคนิค Shadowing คืออะไร?