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!
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.
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.
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
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...😍
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.
What I think is so valuable about this tutorial is not how to create the actual parallax effect, but the description of your whole process. You explain what tools you use and how you use them, what certain syntax means, hotkeys, explanations of different values and aspects of CSS, HTML, and Javascript. How to insert icons and use libraries with CDNs. You're even teaching people how to speed up development with Emmet abbreviations and live server extensions. Fantastic.
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! 🔥🔥🔥
@@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
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.
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'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!
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!
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.....
@@TrueCoder your video tutorial was easy to follow and the way you explained everything keeps a coder out of tutorial-hell too. I wish you keep doing what you do and come up with more interesting projects for your subscribers. and with that You've earned a SUB!!!
It's interesting that video where Photoshop was just 1 part of it taught me more me more Photoshop than hours of videos that I have intentionally searched and watched.
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
I came here for JavaScript, but I started learning Photoshop. The interesting part is that the presentation is so enjoyable that now it doesn't matter what they're talking about; I'm watching it like a series with my snacks by my side😅
STILL watching it, I'm impressed, amazed and motivated, you gained yourself a subscriber, I'm going to watch every other video on this channel. This is simply awesome. I'll like to give you a chocolate.
half an hour ago i saw this effect in a website and was wondering how its made and wanted to learn it,shocked to see this video in my homepage !Crazy coincidence, or maybe just google spying on me
how to blur when in some z point, like when closer to the screen it gets blur like camera effect?
6 місяців тому
The further in the background an object is the less it should move, you got it the otherway around. On hand helds you could get the the devices gyroscope/acceleration alpha,beta,gamma values to have the site parallax without user having to touch background.
I love this video, every part of it! Good job. In reality (31:07) parallax effect makes the background appear to move more slowly, foreground things faster - I say as semi-professional landscape photographer. You can also test it. Close one of your eyes and hold your index finger 10 centimeters in front of your nose. Turn your head left and right. What moves more? Your finger or the background? I fixed the height issue in JS by adding clipPath with inset values, it listens on window.resize as well.
khoya I sense a moroccan accent here, otherwise your video is freaking generously informative, the amount of work you put it is amazing man, thank you so much for the effort
I know nothing about photoshop and website creations, but the result is impressive and the memes throughout the videos are so hilarious that my like wasn't optional. Good job!
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
I have been looking for parallax when moving the mouse for JS. The only parallax effect google would give me is the background image being static to the viewport.
Title is pleasantly misleading coz this tutorial is not just about having cool parallax effect in website, this is a tutorial in: 1. Basic photoshop skills for removing background.2 2. Basic website creation, creating navbars from scratch.... 3. Using flexbox 4. Basic and advanced CSS skills mostly needed in layouts. and I am just 15 minutes in .... Amazing Tutorial... Class apart, specially the efforts and memes put to keep it entertaining .
![Lp. Сердце Вселенной #1 НАЧАЛО ПУТЕШЕСТВИЯ [Новый сезон] • Майнкрафт](http://i.ytimg.com/vi/380Q7gLWGvk/mqdefault.jpg)
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 :)
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
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
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?
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
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.
I really appreciate the effort to make your tutorials beginner friendly! Thank you.
Glad it was helpful!
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.
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 💚
What I think is so valuable about this tutorial is not how to create the actual parallax effect, but the description of your whole process. You explain what tools you use and how you use them, what certain syntax means, hotkeys, explanations of different values and aspects of CSS, HTML, and Javascript. How to insert icons and use libraries with CDNs. You're even teaching people how to speed up development with Emmet abbreviations and live server extensions. Fantastic.
can you share all css use in this video
@@Hsn-The-future ?
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
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.
Glad to see a Moroccan dev out there 😉 keep up the good work!
lmao, he gave all comments a heart but yours
@@Justyln does that even matter ?
@@oussamareghay7081 it does dawg, everything matters.
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'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 🙏
كاين اساط كمل للهجة المغربية حاضرة مي راك ناضي تبارك الله 🔥💪
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 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!
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.....
As a Backend Developer, that is crazy. XD
How did you even manage to edit like this. perfect
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
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.
This guy taught photoshop, html, css, and javascript in a single video. He lives up to the name of the channel. Kudos bud!
Thank you mate 💙🙏
@@TrueCoder your video tutorial was easy to follow and the way you explained everything keeps a coder out of tutorial-hell too. I wish you keep doing what you do and come up with more interesting projects for your subscribers. and with that You've earned a SUB!!!
I appreciate your support ! More to come this summer !!
did you literally put mr beast in the thumbnail
Man, this editing is just awesome! Can't imagine how much time you spent on it. Great job!
Thank you 😊
Watched the entire video without knowing the basics of html,css,javascript and loved it.
It's interesting that video where Photoshop was just 1 part of it taught me more me more Photoshop than hours of videos that I have intentionally searched and watched.
I'm not gonna write those 500 lines of codes 😢😭
Bruh. No pain no gain 😔
Loved it !! can you bring same animated landing pages in REACT js ? ❣❣
As an 3d and vfx artist now i need my own website thx for tutorial 🎉
bro i can't purchase from India is there any other way to purchase.
What a fantastic walkthrough, thank you so much for the hole effort and share this knowledge!😍
Thank you, Glad you enjoyed it !
whole*
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!
@@TrueCoder can you share all css use in this video
The voice of this dude gives me the sensation that he is very friendly. By the way, amazing tutorial.
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 🙏
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
@@BLACKMOON_.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 video made html css js more fun, i was doubting if i should continue studying, now, no more hesitation!
I don’t even know how to code but I feel like I could now, especially with how well explained you made this video!
Finally , i found best channel to Learn ,
I came here for JavaScript, but I started learning Photoshop. The interesting part is that the presentation is so enjoyable that now it doesn't matter what they're talking about; I'm watching it like a series with my snacks by my side😅
came for the website, stayed for the photoshop tutorial. Peaks stuff!!!!
I am literally astonished by the level of this tutorial...
omg i was watching game videos, clicked on this only to humor myself and now i'm HOOKED SO GOOOOODDD
STILL watching it, I'm impressed, amazed and motivated, you gained yourself a subscriber, I'm going to watch every other video on this channel. This is simply awesome. I'll like to give you a chocolate.
Thank you mate 💙 ! Glad it was helpful !
half an hour ago i saw this effect in a website and was wondering how its made and wanted to learn it,shocked to see this video in my homepage !Crazy coincidence, or maybe just google spying on me
GOD BLESS YOU!!!! YOU ARE THE BEST WEB DEVELOPER AND BLOGER I'VE EVER SEEN IN MY HOLE LIFE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Glad it was helpful 💙
I like the way you said beginner tutorial UwU
8:50 that Ghidorah got me laughing 😂
neftakhro ki 7na la3reb 3ndna an artist kima nta akhi , keep up ma man 🙏
💚
I really appreciate your efforts in creating high-quality content like this !
Glad you enjoy it!
Wow! Didn’t know Gimp was sooo similar to Photoshop
wow, website conversion rate to the moon!
Awesome new video style and the end effect! And, MrBeast in the thumbnail lol
Glad you like it !
I can tell by the accent that this guy is a fellow moroccan brother
Keep going my guy !
ytouub 🙏
You're the king of the hill.👏👏👏 You're a real inspiration to me.
Nadi a khy 3raftek meghribi rir men l accent 😂💯
Lol, the way he adds memes to the video is hilarious.
how to blur when in some z point, like when closer to the screen it gets blur like camera effect?
The further in the background an object is the less it should move, you got it the otherway around. On hand helds you could get the the devices gyroscope/acceleration alpha,beta,gamma values to have the site parallax without user having to touch background.
What you did is not important, how you did it is more important. And its brilliant!
I love this video, every part of it! Good job. In reality (31:07) parallax effect makes the background appear to move more slowly, foreground things faster - I say as semi-professional landscape photographer. You can also test it. Close one of your eyes and hold your index finger 10 centimeters in front of your nose. Turn your head left and right. What moves more? Your finger or the background?
I fixed the height issue in JS by adding clipPath with inset values, it listens on window.resize as well.
I made it 🎉🎉🎉
thanks for this tutorial
Your explanations real helped me when I stuck & I really learn lot due to this project.
Thank ❤☺️
@heetaghera5401 Have you a url to share please?
did you get animation working properly , i need help in animation can u ?
khoya I sense a moroccan accent here, otherwise your video is freaking generously informative, the amount of work you put it is amazing man, thank you so much for the effort
I appreciate that! 🇲🇦
awesome, magnificent, very clear instruction with detailed image sample, super amazing.
This was so good content it made me from "I'll sleep in a bit" to "I NEED TO SEE THE ENTIRE VIDEO"
Guess who's back🔥🔥🔥🔥
I could definitely see this type of transition taking place especially in game menus.
Very easy and helpful!
you're a lord
Thanks man 💙
the way his present make me laugh 😂 this is just like .EXE in CODING version
This is dope 🎉 Keep going
Finally💠 I understood Layer masking in Photoshop.. From a Coding Channel😅 Thnakyouuu!
You're welcome 😊
I know nothing about photoshop and website creations, but the result is impressive and the memes throughout the videos are so hilarious that my like wasn't optional. Good job!
Thank you mate! I really appreciate it 💙
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
dude showcasing his bag out there! really impressive.
Appreciate it!
This guy make me like Im watching a funny video instead a tutorial 😂
l'anglai dyal lmgharba hadi hhh nadi
Intro made me think I was gonna hear:
“Hey you. My name is Mike. And in this ol’ video -“
You got me with the white themed VSC.
A tip for the developers :
for cutting out the Rocks, the "select subject" function could work fine.
this is dope, and why this isnt viral yet..... keep up the good work
I don't usually comment on videos, but this one deserves a like, subscribe and a comment. Great tutorial.
Thank you ! I really appreciate that 🙏
hey bro i know you you are moroccan and i like that tuto
The way you explained and your hard work, hats off to that, Literally this is gonna by my next project.
this is really amazing man, I bet blli mghribi wa9ila ntaya hhh
Beginner friendly? even better......beautiful, i want to make this for my bakery website :D indulge into cake layer by layer
Hello my friend
In this tutorial, the sound, the quality, the effects, everything is great, the class is legendary
peace be upon you
I have been looking for parallax when moving the mouse for JS.
The only parallax effect google would give me is the background image being static to the viewport.
Title is pleasantly misleading coz this tutorial is not just about having cool parallax effect in website, this is a tutorial in:
1. Basic photoshop skills for removing background.2
2. Basic website creation, creating navbars from scratch....
3. Using flexbox
4. Basic and advanced CSS skills mostly needed in layouts.
and I am just 15 minutes in ....
Amazing Tutorial... Class apart, specially the efforts and memes put to keep it entertaining .
Thanks a lot for your feedback. Glad you liked it 💙🙏
Olah ila l3aaazz lik akhoya ❤
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 !
editing ❤🔥