This Cool JavaScript Effect Will Make Your Website 3D !
HTML-код
- Опубликовано: 13 июн 2024
- Learn how to create an amazing 3d parallax effect from scratch.
-- JavaScript Effects Tutorial --
Today, we got a special tutorial, we're going to learn how to create an awesome parallax effect on mouse move that will turn our website into a 3D landscape. I'm gonna walk you through that process from scratch. We're gonna start first by cutting the images and editing them in photoshop, after that we're going to be using HTML and CSS to create the website markup and do the stylings, then we're going to move to JavaScript to make the parallax effect.
You think that's it ? No, in addition to all of this, we're also going to create a reveal animation, so when the website gets loaded, all different elements of the page will be coming from bottom in a beautiful and smooth way.
Wait, did I tell you that this is responsive as well? Actually it is responsive on all devices including tablets and mobiles. At the end, I'm going to show you how you can make the website responsive, and we're going to make sure that the parallax effect still works perfectly on smaller screens.
This is a good tutorial for you, especially if you’re a beginner, because it’s gonna help you to get familiar with JavaScript basics and increase your programming skills.
💚 Get Project Source Code
www.buymeacoffee.com/true_cod...
💚 Get Project Source Code by Paypal
ko-fi.com/s/ad6560acd8
👍 Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.
🛎 Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
💖 Please feel free to support my channel. Your donation will motivate me and push me to keep making more of these tutorials.
- Paypal : paypal.me/truecoder
- Buy me a coffee : www.buymeacoffee.com/true_coder
📁 Assets
Icons: fontawesome.com/
Fonts: fonts.google.com/
GSAP Library: greensock.com/
GitHub: github.com/sefyudem
🚫 DON'T CLICK THIS : bit.ly/2SuCfW3
💻 Start project from scratch (Images and files used in this tutorial)
bit.ly/3Gksss0
✉️ For Business inquiries : truecoder.business@gmail.com
⏱ Timestamps:
0:00 - Intro
1:20 - Preparing the assets (Photoshop)
8:17 - Project Setup
9:23 - Navbar
17:32 - Assembling the background layers
24:30 - Parallax Effect
41:10 - Reveal Animation
50:53 - Making things Responsive
The dude just taught us Photoshop better than an actual photoshop tutorial. 10/10
make it yourself
@@YxK112 thenks 🫶
NO doubt 😁
wow mr beast really knows how to code
Lol
😂😂😂
😂😂
😂😂
Reported for scam and false thumbnail.
I'm a developer myself and I must say you designed, developed and explained this responsive parallax so well. 👏 Keep it up!
Glad you like it!
and fun video editing too. great content
voice over ☑
no loud music☑
great explanation☑
awesome design☑
thank you for this masterpiece
❤
I appreciate that ! Thank you too for watching !
Piece oh shit miniature but yeah
Mr beast V
memes ☑
@@TrueCoder What VSCode theme is this? Thank you :)
would be dope if you scrolled back up to smash that like button
I did
20:40 .bg-img is show in half screen.... I will check it many times but i don't know where is error... Plzz help
@@masterjerry_.013 he didnt show those background images css properly
.bg-img
- width: 2800px;
- top: calc(50% - 390px);
- left: calc(50% + 10px);
- z-index: 1;
.fog-1
- z-index: 2;
- top: calc(50% - 100px);
- left: calc(50% + 300px);
- width: 1900px;
.mountain-10
- z-index: 3;
- top: calc(50% + 69px);
- width: 870px;
- left: calc(50% + 230px);
.fog-2
- z-index: 4;
- top: calc(50% + 95px);
- left: calc(50% + 7px);
- width: 1833px;
.mountain-9
z-index: 5;
top: calc(50% + 119px);
width: 463px;
left: calc(50% - 457px);
.mountain-8
z-index: 6;
top: calc(50% + 96px);
width: 786px;
left: calc(50% - 202px)
¬¬¬
.fog-3
z-index: 7;
top: calc(50% + 171px);
left: calc(50% + 29px);
width: 449px
.mountain-7
z-index: 8;
width: 515px;
top: calc(50% + 134px);
left: calc(50% + 305px);
.mountain-6
z-index: 10;
top: calc(50% + 86.5px);
width: 383.5px;
left: calc(50% + 590px);
.fog-4
z-index: 11;
top: calc(50% + 242px);
left: calc(50% - 64px);
width: 543px;
.mountain-5
z-index: 12;
top: calc(50% + 269px);
width: 583px;
left: calc(50% + 130px);
.fog-5
z-index: 13;
top: calc(50% + 149px);
left: calc(50% - 28px);
width: 1435px;
.mountain-4
z-index: 14;
top: calc(50% + 221px);
width: 717px;
left: calc(50% - 381.5px)
.mountain-3
z-index: 15;
top: calc(50% + 133px);
left: calc(50% + 736px);
width: 419px;
.fog-6
z-index: 16;
top: calc(50% + 177px);
left: calc(50% - 30px);
width: 1418px;
.mountain-2
z-index: 17;
top: calc(50% + 188px);
left: calc(50% + 412px);
width: 625px;
.mountain-1
z-index: 18;
top: calc(50% + 91.5px);
left: calc(50% - 601px);
width: 450px
@@TrueCoder 🥺🥺🥺 thanks
This is the first time I watched a coding tutorial that didn't make me feel sleepy! I love how you explain things clearly and adding some humor. With that, you've earned a new subscriber!
Glad it helped!
i didnt even watch the video, but because of your comment i subscrbed
@@omaralatas1345 He aint posted any content for a year.
The jokes and memes throughout this video are hilarious, coupled with clear and precise explanations of every little detail and the video editing emphasizing said details, dude this video is ridiculously good. Nice work my man.
Thank you man! Glad you liked it
Yesss!))))
This is hands-down one of the best tutorials I've come across .... excellent explanation with great visuals 👌
Thanks mate! That means a lot to me
@@TrueCoder i wish you showed the exact css values for layers, i had to go frame by frame and re write this, but still awesome
I really appreciate the effort to make your tutorials beginner friendly! Thank you.
Glad it was helpful!
8 minutes in and Im shocked you managed to edit like this for an hour long video. Great work, this is a fantastic tutorial.
Thank you! Glad you liked it
Your editing, explanation and coding skills are so awesome that I don't even realise it's a video of an hour first I was thinking it's a 10 to 15 min longer 😂❤
Awesome tutorial, you can't imagine how long I've been looking for a paralax toturial like this... you also added responsivity.... so amazing!🐒. You definitely deserve coffee and more subscribers! 🔥🔥🔥
Thank you man 💚
Glad you liked it !
responsivity is not a word
@@jesCiTy maybe responsiveness
@@jesCiTy yes it is. "Responsivity measures the input-output gain of a detector system. In the specific case of a photodetector, it measures the electrical output per optical input."
btw, no one cares any more about those who spend their time looking for mistakes in the english used in comments, it's the meaning that counts.
sometimes english is not their native language, and sometimes they've got better things to do than write perfect comments.
the meaning is the only thing that matters, be smart enough to work it out, not remain dumb to just nit pick.
don't reply
Dude, this video is criminally underrated. The whole production is next level. Very impressed. Gonna buy you a coffee now. Well done! and thank you!
Thank you! I appreciate that 💚
I'm not a web designer, but I'll be using this for my animation website for sure! Thank you so much!
This tutorial is a career maker! You explain everything so nice, I understood basics of js I used to take for granted. Thank you really 🎉
Glad it was helpful 🙏
This video/tutorial is amazing! I really enjoyed watching it! Nice editing and not to annoying :)
Thank you 🙏
Great video and super helpful! I like how you used position: absolute for the - I've also solved the 100vh scrollbar issue by setting a --header-height: in :root, then assigning the height for to var(--header-height) and assigning height for to calc(100vh - var(--header-height)). Thanks again!
I'm hugely grateful for the inclusion of the Photoshop tricks and the thorough THOROUGH explanation of all the code. I feel like i knew much of it already but i learned through painful trial and error. Wish I'd seen this video years ago! Huge effort. Thank you so much!
Thank you mate ! Glad it was helpful 💚
This guys videos have taught me more than any other tutorial on youtube, hope to see more in the future, such as the advanced calculator tutorial that u once said you would do
The way you explained and your hard work, hats off to that, Literally this is gonna by my next project.
A tip for easy overlapping layers I always use: parent{display:grid} parent >*{grid-column: 1 / -1; grid-row: 1 / -1;} and just make all images are same width height and position elements in layer in photoshop as you like. The just use order: 1 ….2,3…and so on to stack them as you like
30:18 I believe if you rename the `data-speedx` to `data-speed-x`, then in JS you can use camelCase and rename `speedx` to `speedX` so it's consistent with the naming scheme of `e.clientX` (which is also using camelCase). Just details, but if anyone was wondering, there you go.
this is brilliant, thank you so much!
what a great video and a great tutorial.
very informative easy to follow, thank you!
What a fantastic walkthrough, thank you so much for the hole effort and share this knowledge!😍
Thank you, Glad you enjoyed it !
whole*
I like the way you explain it is professional and motivates me to be more effective in terms of design innovation , Thanks !
Thanks for the support friend
This Video Editing is awsome man! Love it.
It's so cool that you added the part how to create the assets and work with photoshop!
This is awesome, but it involves photo editing using photoshop which some developers are not familiar with / used to, I will build it using the assets provided, thank you for this amazing work 👍
Thank you for your support, I appreciate that 💚
I involved the photoshop part cause many people were asking me how I prepare the assets, so I thought It would be a good idea If I showed that in this video. Anyway thanks for your feedback.
But he did provide the assets?
@@TrueCoder plz continue to do so. How to make assests 🤘😎 its cool
@@rivvelmusicdo you know how to read the description? Dude if that part is that hard how do you think you can actually do this? Smh.
@@dxpdigital5343 ? What in the description dissproves what I said?
Nice tutorial, well described. Just a question : as you use GSAP for page landing animations, why don't use it for the parallax effect itself ?
Never have I learned so much in 1 hour from a single coding video, and I did the CS50 course. Thank you so much dude!
Glad I could help!
This tutorial is simply amazing. Thank you!
Man, this editing is just awesome! Can't imagine how much time you spent on it. Great job!
Thank you 😊
How did you even manage to edit like this. perfect
awesome, magnificent, very clear instruction with detailed image sample, super amazing.
The craziest tutorial I've ever seen!
Great tutorial! Just one suggestion: to have more realistic effect, the front layers should move faster than background - imagine you move in a train, and railroad poles move fast, but the landscape barely changes.
Loved it !! can you bring same animated landing pages in REACT js ? ❣❣
Very nice tutorial, you cover the entire process. Thank you!
im so glad youre doing videos again
I generally like alot of videos but donot comment much but seriously after watching whole video i have seen how much efforts you put in this single video totally loved and enjoyed memes, explanation and other things and want more awesome content like this in future keep it up buddy waiting for new video :-) new subscriber btw
Thank you mate ! Really appreciate it 🙏
did you literally put mr beast in the thumbnail
What an incredible tutorial!!! Thank you so much for this and I would love to see more of this content soon.
Thank you 🙏 Stay tuned !
Man this is awesome, please keep it up!
I'm not gonna write those 500 lines of codes 😢😭
Bruh. No pain no gain 😔
one of the best video tutorial , a lot of hours of work
Thanks man! The best thing ever!
This is the most fantastic show of skill and knowledge I've ever seen. This man knows more about Photoshop than he knows how to code. And I could never reach his JS skills. Insane. This video will blow your mind if you pay attention to the time and effort he put in this. Holy.....
lolll broooooo, Thank you man, this is exactly what I've been looking for for a long time. Instead, I will press the subscribe button and like button to support you. Please continue to make videos with ideas like this!!!
Thank you for this amazing video
this is dope, and why this isnt viral yet..... keep up the good work
Great video. Thank you.
incredible tutorial, more like this pls 🙏
As an 3d and vfx artist now i need my own website thx for tutorial 🎉
Great tutorial!
Awesome! Keep up the good work!!
wow what a really well done video !
I could definitely see this type of transition taking place especially in game menus.
I really appreciate your efforts in creating high-quality content like this !
Glad you enjoy it!
You are a boss, thanks for sharing.
Definitely worth a subscribe.
You're the king of the hill.👏👏👏 You're a real inspiration to me.
this video made html css js more fun, i was doubting if i should continue studying, now, no more hesitation!
well done ! and proud of you ! wld bladi 💪
I am literally astonished by the level of this tutorial...
You're a legend 🔥
Wow. I wish all trainings can be like this!
Amazing! Beautiful indeed
I saw this website two months ago and was blown away by the parallax ....always wanted someone to create and explain it...Prayer answered...Long live...😍
Where did you see it/whats the link?
@@Chenny-mw9gl as a matter of fact i saw it on youtube and was quite shocked how beautiful it was.
كاين اساط كمل للهجة المغربية حاضرة مي راك ناضي تبارك الله 🔥💪
One of the best end tutorials I've ever seen! Keep it up! Subscribed :)
Thank you 💙🙏
You got me with the white themed VSC.
Thanks for doing this!
yeay eventually hearing your voice! Damn, for a video this quality + voice narration + all the meme and animation stuff, I know you put in a lot of work bro. Keep it up!
Thank you brother ! I appreciate that !
Very easy and helpful!
Broo your video is easy to learn,its greatt
you are awensome, i suscribed
This tutorial is incredible!!!!!!
Pure gold !
Watched the entire video without knowing the basics of html,css,javascript and loved it.
I've been up since 3am, and it's been worth every second. Now that's a tutorial. The jokes and memes make the tutorial lighter to watch.
sick, need more!
Second time, a tutorial that actually works. If you want to get your code purchased just say at the beginning, so we don't waste time trying to figure where is the error for 3 hrs. Thank you.
I love it 💯💥
10/10 for the effort
Finally , i found best channel to Learn ,
really very well made
this is just GREAT
Thanks! Really good video, I learn so much from this.
Glad it was helpful!
Great idea, now ima try do that in React
Awesome! thanks
Love it, looks awesome!
🙏💙
Really nice video! Both photoshop and code examples :D
Great Video for a Photoshop tutorial.
The voice of this dude gives me the sensation that he is very friendly. By the way, amazing tutorial.
Thanks!!
this is so damn sick. Great idea
Awesome efforts brother 🔥🔥 , subscribed ❤️
It was the awesome editing that kept me watching
you are killing it mate you are smooth man. do make more tutorials like this one
Thank you for your kind words. More to come !