This Cool JavaScript Effect Will Make Your Website 3D !

Поделиться
HTML-код
  • Опубликовано: 28 дек 2024

Комментарии • 1 тыс.

  • @AkiraMeow
    @AkiraMeow Год назад +657

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

  • @alessandromorelli5866
    @alessandromorelli5866 Год назад +558

    wow mr beast really knows how to code

  • @KalpeshPanchal
    @KalpeshPanchal Год назад +119

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

  • @7arNar23
    @7arNar23 Год назад +473

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

    • @TrueCoder
      @TrueCoder  Год назад +12

      I appreciate that ! Thank you too for watching !

    • @Yoskio
      @Yoskio Год назад +4

      Piece oh shit miniature but yeah

    • @walkdino8771
      @walkdino8771 Год назад +3

      Mr beast V

    • @feltronnn
      @feltronnn Год назад +2

      memes ☑

    • @minidragonlady
      @minidragonlady Год назад

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

  • @franzpeterdiaz7818
    @franzpeterdiaz7818 Год назад +77

    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
      @TrueCoder  Год назад +6

      Glad it helped!

    • @omaralatas1345
      @omaralatas1345 Год назад +1

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

    • @TACDetective
      @TACDetective 10 месяцев назад

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

  • @jitesharyan6736
    @jitesharyan6736 Год назад +123

    This is hands-down one of the best tutorials I've come across .... excellent explanation with great visuals 👌

    • @TrueCoder
      @TrueCoder  Год назад +3

      Thanks mate! That means a lot to me

    • @KAEcqR
      @KAEcqR Год назад +3

      ​@@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

  • @legendsj7400
    @legendsj7400 9 месяцев назад +3

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

  • @chadelz
    @chadelz Год назад +171

    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.

  • @rivvelmusic
    @rivvelmusic Год назад +48

    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
      @TrueCoder  Год назад +5

      Thank you! Glad you liked it

  • @mr_clean575
    @mr_clean575 4 месяца назад

    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
      @Hsn-The-future 4 месяца назад

      can you share all css use in this video

    • @mr_clean575
      @mr_clean575 4 месяца назад

      @@Hsn-The-future ?

  • @Drop_cat
    @Drop_cat Год назад +20

    I really appreciate the effort to make your tutorials beginner friendly! Thank you.

  • @yasirtahirkheli74
    @yasirtahirkheli74 Год назад +2

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

    • @Chenny-mw9gl
      @Chenny-mw9gl 7 месяцев назад +1

      Where did you see it/whats the link?

    • @yasirtahirkheli74
      @yasirtahirkheli74 7 месяцев назад

      @@Chenny-mw9gl as a matter of fact i saw it on youtube and was quite shocked how beautiful it was.

  • @loicleray
    @loicleray Год назад +9

    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
      @TrueCoder  Год назад

      Thank you! I appreciate that 💚

  • @hivinline5184
    @hivinline5184 10 месяцев назад

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

    • @TrueCoder
      @TrueCoder  10 месяцев назад

      Glad it was helpful!

  • @evanz7136
    @evanz7136 Год назад +23

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

    • @TrueCoder
      @TrueCoder  Год назад

      Thank you man 💚
      Glad you liked it !

    • @jesCiTy
      @jesCiTy Год назад +3

      responsivity is not a word

    • @himanshumaal5466
      @himanshumaal5466 Год назад

      @@jesCiTy maybe responsiveness

    • @neanda
      @neanda Год назад

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

  • @evavargas5549
    @evavargas5549 9 месяцев назад

    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.

  • @zizak143
    @zizak143 Год назад +5

    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

  • @alechansen3036
    @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.....

  • @matthewward1346
    @matthewward1346 Год назад +7

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

  • @divyanshpandey8355
    @divyanshpandey8355 Год назад

    This guy taught photoshop, html, css, and javascript in a single video. He lives up to the name of the channel. Kudos bud!

    • @TrueCoder
      @TrueCoder  Год назад +1

      Thank you mate 💙🙏

    • @divyanshpandey8355
      @divyanshpandey8355 Год назад

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

    • @TrueCoder
      @TrueCoder  Год назад

      I appreciate your support ! More to come this summer !!

  • @mathiasfantoni2458
    @mathiasfantoni2458 Год назад +5

    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.

  • @PoplovPanda
    @PoplovPanda 6 месяцев назад

    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
      @TrueCoder  6 месяцев назад

      Glad I could help!

    • @Hsn-The-future
      @Hsn-The-future 4 месяца назад

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

  • @Flipbug_The_Whimsical
    @Flipbug_The_Whimsical Год назад +3

    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
      @TrueCoder  Год назад +1

      Thank you mate ! Glad it was helpful 💚

  • @jardagalvao
    @jardagalvao 10 месяцев назад

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

  • @wialy
    @wialy Год назад +4

    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.

  • @mayhan5212
    @mayhan5212 Год назад

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

  • @maskman4821
    @maskman4821 2 года назад +147

    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 👍

    • @TrueCoder
      @TrueCoder  2 года назад +37

      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.

    • @rivvelmusic
      @rivvelmusic Год назад +1

      But he did provide the assets?

    • @guptaarpit
      @guptaarpit Год назад +5

      ​@@TrueCoder plz continue to do so. How to make assests 🤘😎 its cool

    • @dxpdigital5343
      @dxpdigital5343 Год назад +1

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

    • @rivvelmusic
      @rivvelmusic Год назад

      @@dxpdigital5343 ? What in the description dissproves what I said?

  • @heetaghera5401
    @heetaghera5401 10 месяцев назад +2

    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
      @TACDetective 10 месяцев назад

      @heetaghera5401 Have you a url to share please?

    • @vishalghule4807
      @vishalghule4807 10 месяцев назад +1

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

  • @zizak143
    @zizak143 Год назад +10

    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 🎉

    • @TrueCoder
      @TrueCoder  Год назад +1

      Glad it was helpful 🙏

  • @brogottech
    @brogottech Год назад

    Watched the entire video without knowing the basics of html,css,javascript and loved it.

  • @julianklumpers
    @julianklumpers Год назад +9

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

  • @lils1988
    @lils1988 2 месяца назад

    One of the coolest videos. I saw you don't upload anymore so I hope you are really rich and very happy with your life so you don't have the time anymore for RUclips

  • @TrueCoder
    @TrueCoder  2 года назад +64

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

    • @AlexMoom-t1s
      @AlexMoom-t1s Год назад +1

      I did

    • @BLACKMOON_.013
      @BLACKMOON_.013 Год назад +3

      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
      @guptaarpit Год назад +1

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

    • @TrueCoder
      @TrueCoder  Год назад +5

      .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
      @guptaarpit Год назад +2

      @@TrueCoder 🥺🥺🥺 thanks

  • @oussamareghay7081
    @oussamareghay7081 8 месяцев назад +1

    Glad to see a Moroccan dev out there 😉 keep up the good work!

    • @Justyln
      @Justyln 6 месяцев назад

      lmao, he gave all comments a heart but yours

    • @oussamareghay7081
      @oussamareghay7081 6 месяцев назад

      @@Justyln does that even matter ?

    • @Justyln
      @Justyln 6 месяцев назад

      @@oussamareghay7081 it does dawg, everything matters.

  • @NiranjanND
    @NiranjanND Год назад +3

    How did you even manage to edit like this. perfect

  • @vladislove_bdhm
    @vladislove_bdhm Год назад +1

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

    • @TrueCoder
      @TrueCoder  Год назад +1

      Glad it was helpful 💙

  • @dienazty8820
    @dienazty8820 Год назад +2

    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!

  • @abhisheksahay2194
    @abhisheksahay2194 11 месяцев назад

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

  • @codeabdo4487
    @codeabdo4487 2 года назад +6

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

    • @TrueCoder
      @TrueCoder  2 года назад +3

      Thanks for the support friend

  • @Usesamle
    @Usesamle 8 месяцев назад

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

  • @cerberusdarck
    @cerberusdarck 2 года назад +4

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

  • @MellowClipsTV
    @MellowClipsTV 6 месяцев назад

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

  • @Blunebear
    @Blunebear 4 месяца назад +3

    The thumbnail ☠️

  • @haitech1994
    @haitech1994 2 месяца назад

    You honored the name of the channel with this video. I really enjoyed it and learned a lot. Thank you

    • @TrueCoder
      @TrueCoder  Месяц назад

      Glad you enjoyed it !

  • @localhero44
    @localhero44 Год назад +4

    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 ?

  • @watiley
    @watiley Год назад +1

    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.

  • @ception7846
    @ception7846 Год назад +5

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

  • @bushrakhan7204
    @bushrakhan7204 Год назад

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

    • @bushrakhan7204
      @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
      @TrueCoder  Год назад +1

      Thank you mate 💙 ! Glad it was helpful !

  • @PollonPollow
    @PollonPollow Год назад +6

    did you literally put mr beast in the thumbnail

  • @arindam7demon
    @arindam7demon 10 месяцев назад

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

  • @trojan6897
    @trojan6897 Год назад +2

    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

    • @TrueCoder
      @TrueCoder  Год назад

      Thank you mate ! Really appreciate it 🙏

  • @ABDERRAHMANECH-CHOUITER
    @ABDERRAHMANECH-CHOUITER Год назад +1

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

  • @YUVRAJ_MAKWANA_GJ
    @YUVRAJ_MAKWANA_GJ 10 месяцев назад +6

    I'm not gonna write those 500 lines of codes 😢😭

    • @YoRu-Cat
      @YoRu-Cat 8 месяцев назад +1

      Bruh. No pain no gain 😔

  • @nguyen11b1inh2
    @nguyen11b1inh2 6 месяцев назад

    I really appreciate your efforts in creating high-quality content like this !

    • @TrueCoder
      @TrueCoder  6 месяцев назад

      Glad you enjoy it!

  • @test-rj2vl
    @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.

  • @1improver
    @1improver Год назад

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

  • @phoenix2gaming346
    @phoenix2gaming346 Год назад +1

    As an 3d and vfx artist now i need my own website thx for tutorial 🎉

  • @wizardomaticremix
    @wizardomaticremix Год назад +1

    Finally , i found best channel to Learn ,

  • @Ayydos
    @Ayydos Год назад

    incredible tutorial, more like this pls 🙏

  • @LucasBolzanOriginal
    @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
      @TrueCoder  Год назад +1

      Thank you mate! I really appreciate it 💙

  • @DVN_FPV
    @DVN_FPV Год назад

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

  • @maram.7657
    @maram.7657 10 месяцев назад

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

  • @pinkflower03
    @pinkflower03 Год назад +1

    As a Backend Developer, that is crazy. XD

  • @imTheAny
    @imTheAny Год назад +1

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

    • @TrueCoder
      @TrueCoder  Год назад

      Thank you ! I really appreciate that 🙏

  • @sinno2861
    @sinno2861 Год назад

    The craziest tutorial I've ever seen!

  • @eraye6955
    @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😅

  • @ryanbalaguer3481
    @ryanbalaguer3481 7 месяцев назад

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

  • @ravinarayanau692
    @ravinarayanau692 10 месяцев назад

    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

  • @sweatygoose1263
    @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

  • @DynamicSun
    @DynamicSun 10 месяцев назад

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

  • @hza3455
    @hza3455 Год назад

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

  • @Synkhan
    @Synkhan Год назад

    came for the website, stayed for the photoshop tutorial. Peaks stuff!!!!

  • @mahdimashallahkhankashi5702
    @mahdimashallahkhankashi5702 Год назад

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

  • @yan3724
    @yan3724 Год назад

    This is the best tutorial i ever see in my life

    • @davidwarner325
      @davidwarner325 Год назад

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

  • @PAFBEAST
    @PAFBEAST Год назад

    Bro you edited the video too? Never seen such a premium quality tutorial on YT

  • @sadness2739
    @sadness2739 Год назад

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

  • @junglegoose4648
    @junglegoose4648 Год назад

    wow, website conversion rate to the moon!

  • @younesbav0up316
    @younesbav0up316 10 месяцев назад

    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

    • @TrueCoder
      @TrueCoder  10 месяцев назад

      I appreciate that! 🇲🇦

  • @ziggy1454
    @ziggy1454 11 месяцев назад

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

    • @TrueCoder
      @TrueCoder  11 месяцев назад

      Thank you 🙌

  • @danielapinzonguzman9130
    @danielapinzonguzman9130 Год назад +1

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

    • @TrueCoder
      @TrueCoder  Год назад

      Thank you 🙏 Stay tuned !

  • @johnemmanuelbulaon8526
    @johnemmanuelbulaon8526 Год назад

    dude showcasing his bag out there! really impressive.

  • @JS-afa
    @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.

  • @balasandreiandrei4633
    @balasandreiandrei4633 Год назад

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

  • @b1.7.3
    @b1.7.3 Год назад +1

    Awesome new video style and the end effect! And, MrBeast in the thumbnail lol

  • @tireksik7193
    @tireksik7193 Год назад +1

    Very easy and helpful!

  • @ihsannuruliman4005
    @ihsannuruliman4005 Год назад +1

    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
      @TrueCoder  Год назад

      Thank you brother ! I appreciate that !

  • @iKlausPH
    @iKlausPH 9 месяцев назад

    You got me with the white themed VSC.

  • @webdevstart_01
    @webdevstart_01 Год назад

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

  • @haitech1994
    @haitech1994 2 месяца назад +1

    Good material.

  • @gyurxi551
    @gyurxi551 10 месяцев назад

    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.

  • @mouadkrikbou6675
    @mouadkrikbou6675 Год назад

    well done ! and proud of you ! wld bladi 💪

  • @SILVERFANG77
    @SILVERFANG77 11 месяцев назад

    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 👍

  • @NavelsUrith
    @NavelsUrith Год назад

    you are killing it mate you are smooth man. do make more tutorials like this one

    • @TrueCoder
      @TrueCoder  Год назад

      Thank you for your kind words. More to come !

  • @ogeochife2443
    @ogeochife2443 4 месяца назад

    I'll love to know how you searched for the images in unsplashed, I mean did you search for mountain and picked the top results or?

  • @ilmanmanarulqori5632
    @ilmanmanarulqori5632 Год назад

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

  • @viniciuszanato1715
    @viniciuszanato1715 Год назад

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

  • @Ko0_Official
    @Ko0_Official 2 месяца назад

    I got overwhelmed so fast. idk even know where to start and to get my own background

  • @mathiasfantoni2458
    @mathiasfantoni2458 Год назад +1

    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
      @TrueCoder  Год назад

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

    • @isaacwells6262
      @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",});
      }));

  • @FantasyMusics
    @FantasyMusics Год назад

    Finally💠 I understood Layer masking in Photoshop.. From a Coding Channel😅 Thnakyouuu!

  • @osfbro
    @osfbro Год назад +1

    I like the way you said beginner tutorial UwU