This Cool JavaScript Effect Will Make Your Website 3D !

[@AkiraMeow]

The dude just taught us Photoshop better than an actual photoshop tutorial. 10/10

[@YxK112]

make it yourself

[@frixzoss]

@@YxK112 thenks 🫶

[@bukhtyarhaider4045]

NO doubt 😁

[@alessandromorelli5866]

wow mr beast really knows how to code

[@zorith]

Lol

[@DRAKAEN]

😂😂😂

[@KunalKumar-bf5ts]

😂😂

[@johnskuter6680]

😂😂

[@PeterS123101]

Reported for scam and false thumbnail.

[@7arNar23]

voice over ☑ no loud music☑ great explanation☑ awesome design☑ thank you for this masterpiece ❤

[@TrueCoder]

I appreciate that ! Thank you too for watching !

[@Yoskio]

Piece oh shit miniature but yeah

[@walkdino8771]

Mr beast V

[@feltronnn]

memes ☑

[@minidragonlady]

@@TrueCoder What VSCode theme is this? Thank you :)

[@chadelz]

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.

[@TrueCoder]

Thank you man! Glad you liked it

[@vladislove_bdhm]

Yesss!))))

[@franzpeterdiaz7818]

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!

[@TrueCoder]

Glad it helped!

[@omaralatas1345]

i didnt even watch the video, but because of your comment i subscrbed

[@TACDetective]

@@omaralatas1345 He aint posted any content for a year.

[@rivvelmusic]

8 minutes in and Im shocked you managed to edit like this for an hour long video. Great work, this is a fantastic tutorial.

[@TrueCoder]

Thank you! Glad you liked it

[@loicleray]

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!

[@TrueCoder]

Thank you! I appreciate that 💚

[@mr_clean575]

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.

[@Hsn-The-future]

can you share all css use in this video

[@mr_clean575]

@@Hsn-The-future ?

[@zizak143]

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

[@KalpeshPanchal]

I'm a developer myself and I must say you designed, developed and explained this responsive parallax so well. 👏 Keep it up!

[@TrueCoder]

Glad you like it!

[@ryanbalaguer3481]

and fun video editing too. great content

[@mathiasfantoni2458]

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.

[@legendsj7400]

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 😂❤

[@evavargas5549]

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.

[@matthewward1346]

I'm not a web designer, but I'll be using this for my animation website for sure! Thank you so much!

[@alechansen3036]

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.....

[@Flipbug_The_Whimsical]

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!

[@TrueCoder]

Thank you mate ! Glad it was helpful 💚

[@PoplovPanda]

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!

[@TrueCoder]

Glad I could help!

[@Hsn-The-future]

@@TrueCoder can you share all css use in this video

[@julianklumpers]

This video/tutorial is amazing! I really enjoyed watching it! Nice editing and not to annoying :)

[@TrueCoder]

Thank you 🙏

[@watiley]

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.

[@dienazty8820]

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!

[@MellowClipsTV]

I don’t even know how to code but I feel like I could now, especially with how well explained you made this video!

[@NiranjanND]

How did you even manage to edit like this. perfect

[@vladislove_bdhm]

GOD BLESS YOU!!!! YOU ARE THE BEST WEB DEVELOPER AND BLOGER I'VE EVER SEEN IN MY HOLE LIFE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@TrueCoder]

Glad it was helpful 💙

[@codeabdo4487]

I like the way you explain it is professional and motivates me to be more effective in terms of design innovation , Thanks !

[@TrueCoder]

Thanks for the support friend

[@mayhan5212]

this video made html css js more fun, i was doubting if i should continue studying, now, no more hesitation!

[@ABDERRAHMANECH-CHOUITER]

كاين اساط كمل للهجة المغربية حاضرة مي راك ناضي تبارك الله 🔥💪

[@cerberusdarck]

What a fantastic walkthrough, thank you so much for the hole effort and share this knowledge!😍

[@TrueCoder]

Thank you, Glad you enjoyed it !

[@FALCON9GAMING]

whole*

[@jardagalvao]

The voice of this dude gives me the sensation that he is very friendly. By the way, amazing tutorial.

[@gyurxi551]

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.

[@test-rj2vl]

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.

[@ception7846]

Loved it !! can you bring same animated landing pages in REACT js ? ❣❣

[@Usesamle]

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!!!

[@PollonPollow]

did you literally put mr beast in the thumbnail

[@LucasBolzanOriginal]

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!

[@TrueCoder]

Thank you mate! I really appreciate it 💙

[@pinkflower03]

As a Backend Developer, that is crazy. XD

[@wizardomaticremix]

Finally , i found best channel to Learn ,

[@maram.7657]

You're the king of the hill.👏👏👏 You're a real inspiration to me.

[@eraye6955]

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😅

[@heetaghera5401]

I made it 🎉🎉🎉 thanks for this tutorial Your explanations real helped me when I stuck & I really learn lot due to this project. Thank ❤☺️

[@TACDetective]

@heetaghera5401 Have you a url to share please?

[@vishalghule4807]

did you get animation working properly , i need help in animation can u ?

[@abhisheksahay2194]

I am literally astonished by the level of this tutorial...

[@TrueCoder]

would be dope if you scrolled back up to smash that like button

[@AlexMoom-t1s]

I did

[@BLACKMOON_.013]

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

[@guptaarpit]

@@BLACKMOON_.013 he didnt show those background images css properly

[@TrueCoder]

.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

[@guptaarpit]

@@TrueCoder 🥺🥺🥺 thanks

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.

[@vanshumahore19dec]

this is dope, and why this isnt viral yet..... keep up the good work

[@ihsannuruliman4005]

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!

[@TrueCoder]

Thank you brother ! I appreciate that !

[@Zinthose]

Now for the next Level: Add camera support to track head movements to make it TRULY 3D

[@FeeltheHorrorvibes]

i love it..... i will remember you in my prayers ....

[@arindam7demon]

What you did is not important, how you did it is more important. And its brilliant!

[@imTheAny]

I don't usually comment on videos, but this one deserves a like, subscribe and a comment. Great tutorial.

[@TrueCoder]

Thank you ! I really appreciate that 🙏

[@johnemmanuelbulaon8526]

dude showcasing his bag out there! really impressive.

[@TrueCoder]

Appreciate it!

[@mahdimashallahkhankashi5702]

Hello my friend In this tutorial, the sound, the quality, the effects, everything is great, the class is legendary peace be upon you

[@TrueCoder]

I appreciate that!

[@HarisTurki]

neftakhro ki 7na la3reb 3ndna an artist kima nta akhi , keep up ma man 🙏

[@TrueCoder]

💚

[@sweatygoose1263]

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

[@ryanbalaguer3481]

awesome, magnificent, very clear instruction with detailed image sample, super amazing.

[@balasandreiandrei4633]

This was so good content it made me from "I'll sleep in a bit" to "I NEED TO SEE THE ENTIRE VIDEO"

[@mikesinclair66]

I could definitely see this type of transition taking place especially in game menus.

[@ippulnugroho]

how to blur when in some z point, like when closer to the screen it gets blur like camera effect?

[@MYViVOBOOK]

thanks brother for this detailed video on this topic it helped me so much

[@DVN_FPV]

That is one of the best tutorials I have ever seen in my life.

[@TrueCoder]

💙💙🙏

[@bushrakhan7204]

omg i was watching game videos, clicked on this only to humor myself and now i'm HOOKED SO GOOOOODDD

[@bushrakhan7204]

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.

[@TrueCoder]

Thank you mate 💙 ! Glad it was helpful !

[@RohanShrestha-rz3ic]

8:50 that Ghidorah got me laughing 😂

[@moumous87]

Wow! Didn’t know Gimp was sooo similar to Photoshop

[@victorsamgichuhi2486]

Lol, the way he adds memes to the video is hilarious.

[@thatoneamerican]

The way you explained and your hard work, hats off to that, Literally this is gonna by my next project.

[@ilmanmanarulqori5632]

the way his present make me laugh 😂 this is just like .EXE in CODING version This is dope 🎉 Keep going

[@DynamicSun]

one of the best video tutorial , a lot of hours of work

[@Rollyourown1]

A tip for the developers : for cutting out the Rocks, the "select subject" function could work fine.

[@ahyanarizky641]

Definitely worth a subscribe.

[@tutorialstogether25]

Guess who's back🔥🔥🔥🔥

[@richardchiodo2200]

Great Video for a Photoshop tutorial.

[@positivesph]

tanigna galingmo tol keep it up

[@sinno2861]

The craziest tutorial I've ever seen!

[@danielapinzonguzman9130]

What an incredible tutorial!!! Thank you so much for this and I would love to see more of this content soon.

[@TrueCoder]

Thank you 🙏 Stay tuned !

[@mathiasfantoni2458]

44:53 Using both `filter` and `forEach` results in the client's browser having to loop over all the images twice, which doubles the workload for their computer. If you simply add an `if (el.classList.contains("text")) return;` at the top of your `forEach`, you'll cut the workload in half and make it run twice as smooth in the client's browser.

[@TrueCoder]

I haven't noticed that. Thanks for the tip !

[@isaacwells6262]

Tried adding it into the code but receiving an '{' expected error when I hover of the if statement: Array.from(parallax_el).filter((el) => if (el.classList.contains("eye")) return; forEach((el) => { let timeline = gsap.timeline(); timeline.from(el, {top: `${el.offsetHeight / 2 + +el.dataset.distance}px`, duration: 3.2, ease: "power3.out",}); }));

[@estonian44]

Beginner friendly? even better......beautiful, i want to make this for my bakery website :D indulge into cake layer by layer

[@osfbro]

I like the way you said beginner tutorial UwU

[@wertoshnaminus6074]

Great tutorial!

[@AntonDev]

yeah, man it's cool!! Hello, from Sochi

[@hivinline5184]

Thanks! Really good video, I learn so much from this.

[@TrueCoder]

Glad it was helpful!

[@viniciuszanato1715]

I learned more about coding in your video than I did in 3 years of college...

[@fazlerabbi9200]

There is a basic mistake. The far background images should move lesser than the closer ones.

[@ziggy1454]

Dude it's awesome , your tutorial, Explanation ,video editing , images/memes in video are just 🔥🔥 keep it up , loved it ❤

[@TrueCoder]

Thank you 🙌

[@webdevstart_01]

Awesome, best I've seen. Thanks for making a tutorial like this

[@TrueCoder]

Glad it helped!

[@earthonmusic4339]

editing ❤‍🔥

[@ansserab2074]

l'anglai dyal lmgharba hadi hhh nadi

[@PeterPannekoek1850]

This is insane! You are a true coder sir! Deff earned my sub!

[@TrueCoder]

Glad you liked it 💚

[@siamaksaadatpur]

hi thank's for you'r best tutorial

[@hza3455]

I can tell by the accent that this guy is a fellow moroccan brother Keep going my guy !

[@TrueCoder]

ytouub 🙏

[@abdessittirharkati7603]

Nadi a khy 3raftek meghribi rir men l accent 😂💯

[@yan3724]

This is the best tutorial i ever see in my life

[@davidwarner325]

hey from where i can download free photoshop or is there any alternative

[@JS-afa]

keep it up bro,i gotta say i understood the easiest from your channel and the editing really makes it a lot easier.

[@TrueCoder]

I appreciate that!

[@AyoubAyoub-hj7jv]

Olah ila l3aaazz lik akhoya ❤

[@pułkownikkaczodziobyzpodlasia]

The light mode gave me shell shock 😂

[@karan_0207s]

nice animation , will try to do in react , i think it will be easier in react with hooks .

[@SILVERFANG77]

You said I got you covered and proceed to show that "never trust anyone" meme ...😂😂 Also thanks for covering other topics like Photoshop and all. This is how I'm going to learn Photoshop and similar softwares as well 👍

[@nehemiahwilliams80]

You straight up got me with that light theme prank 😂 read my mind

[@subhambetal5371]

Bro you deserve millions of followers, subscribers for your appreciative hard work ❤ love from india, kolkata ❤❤❤

[@TrueCoder]

Thank you so much 😀

[@ZombieHeadCrasher]

This Video Editing is awsome man! Love it.

[@sadness2739]

this is really amazing man, I bet blli mghribi wa9ila ntaya hhh

[@haystackdmilith]

I used to do such effects like this, but then I discovered Adobe Illustrator (or any other svg-compliant editor). After that, I started using svg as the main page layout. Then I only CSS assign images to given SVG nodes… Much easier than hacking calc() and translate() with px shifts.

[@bt9816]

I mean... @AkiraMeow ain't wrong! This is a fantastic Photoshop tutorial!