Nextjs + Tailwind Parallax Effect using React Scroll Parallax
Nextjs + Tailwind Parallax Effect using React Scroll Parallax
🔴 Complete code at GitHub - https://github.com/nyctonio/yt-parall…
🔴 Connect with me here:
- Github : https://github.com/nyctonio
- LinkedIn: https://www.linkedin.com/in/nyctonio/
- Twitter: https://twitter.com/nyctonio
------------------------------------------------------------------------------------------------------------------------------------------------
Read Some of my articles at dev.to 👇🏻
https://dev.to/nyctonio/parallax-in-n…
https://dev.to/nyctonio/all-react-hoo…
https://dev.to/nyctonio/authenticatio…
--------------------------------------------------------------------------------------------------------------------------------------------------
#nextjs #parallax #tutorial #react #frontend #development #explained #tailwindcss
Content
0 -> parallax a very cool looking effect which can
be achieved by changing the speed of the layers
5.52 -> of the background if you will go to awards
you can easily find that all those beautiful
11.04 -> looking websites listed over there uses parallax
a simple parallax effect can make your website
17.92 -> look from good to amazing today we will try to
code a simple parallax effect using a package in
24.4 -> react called react scroll parallax so here is
a simple demo that we are going to code today
34.56 -> okay so let's create a nextjs application using
create next app and here i'm using the official
41.04 -> starter template of tailwindcss you can find it on
the vercel's github repository and now i'm moving
48.8 -> inside the project that i created parallax and
like cd parallax and i'm opening it with vs code
58.56 -> and closing my terminal so yep uh here's my
project the first thing that we need to do is
68.08 -> remove all the typescript as the starter template
just came configured with typescript so i'm
74.48 -> removing those typescript and you can just like
rename ts from js okay so yep now i'm installing
85.28 -> the react scroll parallax package which we are
gonna use today and now let's start my dev server
95.36 -> yep okay so now i will wrap my component
inside the underscore app.js file with
103.76 -> parallax provider let me just do this real
quick let me copy parallax provide just a sec
118.8 -> okay so yeah yep something like this okay so
now moving towards the index.js file first i
130 -> will import uh use parallax hook from the react
scroll parallax package that we installed here
140.4 -> yep and now okay so i will import react and useRef
from react basically what i want to achieve is i
154.48 -> want to create an effect in which like my main div
the outermost which will have a background image
161.76 -> and all those different assets like the train and
sun which will move relative to the outermost if
168.64 -> so here i will create a constant target using
use ref which will like return the object basic
176.08 -> stuff about hooks you know and i will refer i will
use the target element to refer the outermost div
184.48 -> right yeah i will do it like this and i will
give a background image to my outermost div
193.04 -> i have all those assets already in my public
directory i will put the link of all those in
198.96 -> the description my github repo will also be in my
description so you can check it out you can check
205.6 -> the code okay so the url is slash scene.png
you can find like those assets here yeah
217.84 -> and i will give the background size cover and the
background position center and the width will be
226.08 -> i guess around 3000 pixels uh yeah 3000
pixels and i will uh give the height i will
237.44 -> just a sec i will use tailwind and i will
give the height using class name is equals
243.6 -> to edge screen it will cover the like whole
screen and as we want this effect to be like
251.12 -> in horizontal so we have to like mention in
our parallax provided that our scroll axis is
257.04 -> horizontal okay so now we have our inner elements
so in the main div inside the main we will create
266.4 -> those elements like my sun and the train and cloud
etc okay so here i'm creating my sun um i want my
277.12 -> sun to be fixed at a place and my background
and the train and clouds to be moving so i'm
283.84 -> giving the sun a class name of fixed and here i'm
using the image tag and slash sun dot png yeah
295.28 -> okay i will give it a height of around
120 and width of about same like 120 yeah
311.12 -> now uh as i want my other elements like i want
to create the train to for the parallax so
324.16 -> here here comes the interesting part so i will
create a train constant and i will use now the
332.56 -> use parallax hook and i will pass some arguments
like what i want the speed relative to my main
340.96 -> element and i also have to mention that main
target element which is like the outermost target
348.16 -> right so and i have to refer that to my div which
i want to move okay so like i'm here referring
358.96 -> the train dot ref and i want to position my train
in in the in the image like at the right position
370.48 -> obviously so i will give it a style of i want
it 11 view height from top and i guess around
380.24 -> 20 or 30 view width from
i guess left yeah okay and
388.8 -> in the image tag i will
393.52 -> put my train dot png here yeah the
height will be around i guess 350
403.6 -> and what will be around i guess one thousand
or 700 okay let's go with 700 and now i want um
419.84 -> i want to have my clouds so i will also position
my clouds i want it 10 from top okay and let me
437.28 -> yeah so slash oh uh i guess it's cloud just a sec
451.68 -> yep and the height will be around i guess 200
460.64 -> and the width will be around 1000
465.2 -> okay and for the cloud i just want it to be
a little bit slower than the train so i will
472.8 -> use the use parallax again and i will like um make
the speed around 200 and again i have to refer the
481.36 -> our main outermost target element
like and here we have to refer that to
491.2 -> cloud dot ref yeah
498.16 -> okay
500.8 -> and i guess oh sorry as you know like uh
the used ref returns you like dot current
512.24 -> uh like the value of that object in dot current
so i have to like change that real quick so yeah
518.72 -> this will be our output if you will scroll
horizontally you can see that trainer train
524.64 -> is moving and the train and clouds are moving
in different speed so if you want to like uh
532.64 -> dive deep into these you can check out this page
i will provide those links in the description
539.44 -> and if you also want to play around those
layers you can check out like this project
547.44 -> that's pretty cool okay so thank you for watching
Source: https://www.youtube.com/watch?v=vPhdhA3lZVs