Layered Parallax Scroll with React & Framer Motion - バイリンガル字幕
Today we're going to check out how we can make a multi-layered parallax effect like this one using React.js and framer motion.
We'll go over how you can find a source image,
chop it into multiple layers using Figmo,
which free, then finally how you can lay out all of that onto your page with React and animate it using framer.
We're going to style everything using tailwind css,
but there really isn't a whole lot of difficult styling going on here so you You can follow along and use plain old,
normal, vanilla CSS if you prefer.
Quick shout out before we get started, this video is sponsored by your boy.
I just released a new personal portfolio template on my gumroad,
this is the exact template that I used in my last job search in which I landed interviews at companies like Microsoft and Amazon,
and now you can use it in your job search without having to spend tens of hours putting something.
together yourself.
This actually my second portfolio template, the first of which is already received some awesome feedback.
Happy hunting, link in my description, now back to the video.
Awesome.
So we can go ahead and get started now.
The first thing that we're going to have to do is find some kind of source material.
I like just going on unsplash.com.
If you haven't heard of unsplash.com before, it is a free royalty free image website.
They do If have a pro tier,
you'll see some of these on Splash Plus,
but the majority of these are completely free to use, and you can look up just about anything.
They millions and millions of pictures.
For our example, I'm going to look up mountains.
I find this effect looks really,
really good with mountains and forests and stuff,
but the main thing that we're looking for is just a clear separation between the foreground and the background.
So say something like this top right image might be a little bit harder because you're gonna have to do some kind of cut like this
And then you're gonna have some empty space at the bottom
So that might be a little bit trickier or something where you have a whole bunch of different layers like this image
You kind of have all these different layers
That would be really cool
If you want to spend the time to cut all of these out and then maybe have all of them move at different speeds totally
free to do that if you want to take the to do that.
But for us, I'm going to something a little more straightforward like this picture right here.
You the foreground is obviously just these images and then the background is the sky.
So this is perfect for our example.
Once you've figured out which image you want to use,
you can come up to the top right over here, click this little guy right here and then download whatever size of image you need.
I think I just downloaded medium for this, which should be good for for most screen sizes to not look too bad.
And once we've got that, I'm going to it on over oops to Figma and we can actually start cutting out our shapes.
If you haven't used Figma before, you can just go to figma.com.
It's completely free to sign up, completely free to use for individuals for just about everything that you need.
And once you're in here, you're just going to draw.
drag your image in, and we can start cutting it out.
Before I actually do this cut on this piece, you can kind of see what we're going for here.
So just cutting out the mountains, and then we're gonna export both of these separately.
We're gonna layer them right on top of each other,
and then we're gonna move them at different speeds, and it's going to create this effect that we're looking for.
To actually do this cut, again, if you're good in front of Photoshop or something like that.
It's probably gonna be a lot easier than trying to do it here because it's pretty tedious,
but I wanted to make sure I do this with something that's free.
To actually do this cut though, just come up to this little pen icon up here on the top left, click on that.
And you can just kind of zoom into the far left and start drawing a around your shapes
You don't need to be perfect with this
Just kind of get as close as you can like really what I'm doing right now is probably about as close as I got for my example
If you have something that's a more detailed example with a of little trees and stuff obviously you got to do a little bit of a better
Job, but this is a pretty rough shape.
So you don't need to be perfect.
I'm not gonna go ahead and do this whole thing because I've already done it and it takes like 30 minutes actually do it
perfectly but I'll just show you essentially the steps after that so if
I zoom out a bit here we're just gonna do a rough shape like this click
click click whatever I'm just gonna go all the way out because I don't want to make
this take too long but pretend you know you're you're being careful with it and
really cutting out
your Once you're done like once you get all the way to the far right just click as far right on that as you can try to get
Right on that last pixel go from there all the way up to the top
So that's gonna be like this top right corner
Then you're gonna go all the way over to the left and go to the top left corner right there
And then back down to where you started you'll see once you hover this little cursor over wherever you started,
it's going to kind of change the cursor a little bit.
That means it's going to join that path together, and now you should be free from drawing any lines.
Once you're from drawing any lines, you can come back up to this move tool.
I'm going to turn this shape into, I'm going to some fill so you can actually see the difference.
So that's kind of what our shape looks like that we just drew.
Obviously a beautiful path that I've drawn here,
but if you have something that looks like this and you're happy with your cut You can kind of go through if you're not happy with it once you add some fill and adjust the points
if you want But yeah,
so once you're ready you got something like this All you have to do is go ahead and grab both of these just kind of take your cursor drag it over both of
them Come to this little double squares thing up here at the top and click.
I believe it's intersect selection Oh wrong one no subtract selection.
There we go It's going to do this cut for you.
So you'll see that all we have in this image is my super super rough outline of these mountains The one thing we want to make sure of
though I'm gonna go back a couple of steps here and we'll actually just look at the example that I already have Actually,
just like this, vector here, there we go.
So back to just my normal image, looking at my actual example here, it's going to look something like this.
And once you select or subtracted your selections,
you'll see that the size of the kind of image that remains is not scaled to the size of the original image,
it's scaled to the size of your cutout.
You want to make sure whenever you export this that you're exporting it at the exact same size as your original image,
because we're going to have to be layering these directly on top of each other.
So what I'll do to do that is I'll just make a rectangle,
so you see this rectangle over here on the left, I've grouped it along with this whole group that includes the cutout image.
If I add some opacity of this, I'll go 100% and then maybe make this black so you can really see it.
I've essentially just added a background rectangle that is the size of our full image,
so that whenever I export this, they're going to export at the exact same size.
Just make sure that whenever you actually go to export it,
the same way that I had it a ago, you just take that opacity and turn it down to 0%.
So you'll have that opacity.
Once you're actually ready to export though, just click on these right here.
I've named mine,
so whatever you have the name over here,
like I've named this image bottom and the other one is image full,
I'll go into ready to export,
just click on it, scroll down on the right section down to export, and you can just export this as a PNG.
already done that, so we can jump over to our code editor now and I'll show you how to actually make this effect.
Taking a look over at our code,
I've already scaffolded out a little bit of what we're going to be using,
but I don't have any of our actual component in here yet, just some other stuff to kind of make this look good.
So I'm using Next.js.
If you're using Great Rackdap or whatever else,
you might have to adjust the layer a little bit, but you definitely want to adjust the actual component.
If you want to match exactly how I have this,
this file that I'm in right now this index.tsx file is essentially our home route file.
And in here I have our component imported and being used for where I'm going to implement all of that logic,
as well as just some extra stuff down here to fill up some space.
So we have some somewhere to scroll to essentially over on the left.
in my public directory.
So is like my static assets directory.
I've added in our two images,
the one with the complete crop,
you can see it as the transparency on the top, and this other one with the entire image, which is going to be our background.
Now that I have all of this in place, I can come over and I can start actually creating our component here.
All that I have to start is this wrapping div,
and The first thing I want to do is actually set this to be the size of the screen.
So I'm using till and CSS,
like I said, all of these class names should be pretty self-explanatory if you're wanting to use normal CSS.
There's nothing fancy about till and CSS.
If you're just using normal CSS class names, just look at these class names and you should be able to see essentially what they do.
But yeah, like I said, all that I'm doing is I'm setting this to the size of the screen.
So starting with with full height screen.
I guess the more important part here is this position relative the reason that we have this is we're Gonna have our images absolutely positioned within this element
So we need this so that they set to the element and not the screen
Other than that
We're really just doing grid with the place item center so that we can add this text to the center because the text is not going to
Be absolutely positioned we can go ahead and add in that text now as well.
It's going to be an h1 tag and the only real important part about this besides the basic styling here is that I've also set this as a position relative and I've set a z index
of 10 to this h1 tag.
The reason I'm setting this to 10 is because the background image is going to have a z index of zero and the foreground image is going to have a z index of 20.
I want this parallax text right here with this h1 to be sandwiched in between those two layers,
that's why I have the same index of 10, and then the images around that.
To go ahead and add in the images, I'm going to undo that.
So you have those work, both of these are exactly the same, more or less.
So they're both absolutely positioned.
I'm just using a background image on a div,
putting those to a position of bottom so that we always make sure that we have the mountains at the bottom,
like actually in the screen background size cover.
So it covers the entire screen.
And then like I said, Z index of zero and Z index of 20.
So they sandwich around this H one,
this inset of zero,
if you haven't used inset before,
it's essentially the exact same thing as saying top zero, left zero, bottom zero and right zero, it's just a show.
shorthand for that.
So since we were just saying,
hey, make this absolute position to the element and then fill the entire element with this element, so element a lot of times.
What if we say that now we should see that we have a static version of what we're looking for.
So text in the middle of the screen,
we have two images, you should not be able to see any of the difference in the two images.
So we just have a foreground sitting directly on top of our background,
it should just look like one consistent image as you scroll down to actually start adding in this animation.
The first thing I'm going to need is a stored reference to our wrapping div.
And the reason that we need this is because we're going to use the use scroll hook from frame motion to track the
why progress of this element.
So what we want to actually know is how far down the screen this element so from the very top to the bottom of this box we
have scrolled we want to know hey from right here this means we're all the
way scrolled all the way through the element and all the way up here we're all the
way at the top of the element so we're just passing in this target ref and then
we're passing in this offset array like this this offset array here is going to define exactly how and when we start triggering this animation.
So we want this to start when the start of our viewport meets with the start of the element.
And we want it to end when the start of our viewport meets with the end of our element down here.
And that is essentially what this means in shorthand.
It's a little bit confusing,
the easiest way that I have come to understood exactly how this works is just by changing these around and seeing how it changes.
my animation to be honest I still got to do that sometimes but if you have a
section like this and you're doing this exact same effect you can just know that it's gonna be start start and start now what this actually gonna
return is a handful of different values regarding where you're scrolled on the
page with this element The one that we want is scroll Y progress.
This is going to give us a value between zero and one,
where zero means you are all the way at the beginning of this animation,
or the all the way at the beginning of this element, like right here.
And one means you're all the way down to the end of this element.
Now just a value between zero to one is not particularly useful for us for this animation without the use of the use transform hook,
which also comes from frame or motion.
The use transform hook is just going to take in our value and the second argument is where in that value that we're passing in,
we want to map from.
And then the third is what we want to map to.
So like I said, scroll wide progress is going to go from zero to one, thus the zero to one here.
And we want to map at zero, we want to be at zero percent.
And one we want to be 100% for this value that I'm using right here.
So you know,
off or right in the middle of this,
if we're at 0.5 with the scroll Y progress, then the value that's actually going to be returned will be 50%.
I've defined two of these.
So one of them is a background Y is what I'm calling it the other one's text Y.
What these are is just a Y translate that we're going to apply to our different elements.
For this, we're first one, it's going to be our background image going from a zero to a 100%.
percent translate on this is essentially going to make it look like it's sitting in the exact
same spot like it's never moving and the text wise going to make it look like it's kind of
going down and shifting down behind the mountains as we scroll.
That might be a bit confusing so we can go ahead and just actually apply those.
I'm going to need this motion component which comes from frame or and what that's going to allow us to do is to turn this div
in this h1 and to a motion dot h1 and emotion dot diff.
With this,
we can actually just pass in our motion values,
which is the return values of these use transform directly to the style of each of these components.
So for my h1, I'm passing in that text y translate.
And for our emotion dot div, I'm passing in our background y translate.
And that is essentially all that you have to do.
So now, we'll see as I start to scroll.
The image looks like it's kind of staying in the same place and the parallax text is scrolling just a little bit slower than the rest of the page as it
translates down and slowly gets hidden down behind those mountains like that.
And that is going to be it for this tutorial.
If you got anything out of this, I would super appreciate and like and subscribe.
It helps me a lot.
Again, if you're interested in interested in the dev portfolios, those will be down in my description.
That's gonna be it for this one, guys.
I will see you guys next time, peace.
さらなる機能をアンロック
Trancy拡張機能をインストールすると、AI字幕、AI単語定義、AI文法分析、AIスピーチなど、さらなる機能をアンロックできます。
主要なビデオプラットフォームに対応
TrancyはYouTube、Netflix、Udemy、Disney+、TED、edX、Kehan、Courseraなどのプラットフォームにバイリンガル字幕を提供するだけでなく、一般のウェブページでのAIワード/フレーズ翻訳、全文翻訳などの機能も提供します。
全プラットフォームのブラウザに対応
TrancyはiOS Safariブラウザ拡張機能を含む、全プラットフォームで使用できます。
複数の視聴モード
シアターモード、リーディングモード、ミックスモードなど、複数の視聴モードをサポートし、バイリンガル体験を提供します。
複数の練習モード
文のリスニング、スピーキングテスト、選択肢補完、書き取りなど、複数の練習方法をサポートします。
AIビデオサマリー
OpenAIを使用してビデオを要約し、キーポイントを把握します。
AI字幕
たった3〜5分でYouTubeのAI字幕を生成し、正確かつ迅速に提供します。
AI単語定義
字幕内の単語をタップするだけで定義を検索し、AIによる定義を利用できます。
AI文法分析
文を文法的に分析し、文の意味を迅速に理解し、難しい文法をマスターします。
その他のウェブ機能
Trancyはビデオのバイリンガル字幕だけでなく、ウェブページの単語翻訳や全文翻訳などの機能も提供します。