Awesome Parallax Scrolling Effect Using HTML & CSS & Vanilla JavaScript

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

Комментарии • 202

  • @TrueCoder
    @TrueCoder  4 года назад +35

    Make sure to SUBSCRIBE for more tutrials like this one !!

    • @chrisjob356
      @chrisjob356 4 года назад

      Done!

    • @alexachadan1753
      @alexachadan1753 4 года назад +1

      can I use this in one of my projects with the same images???
      The project is for a real client

    • @kavinsiva8018
      @kavinsiva8018 3 года назад

      I like how you liked your own comment 😝

    • @Bellsprout123
      @Bellsprout123 3 года назад

      How do I add more bodies?

  • @seitolove
    @seitolove 4 года назад +52

    As a beginner studying web design, I have to say... holy mother of God!

  • @briandesign
    @briandesign 4 года назад +18

    this is fire! 🔥 prob my favorite scroll effect out there!

  • @brad6803
    @brad6803 3 года назад +3

    Didn't watch the video, but viewed the source code. Amazing work making this look so easy! Thanks a ton!

  • @chrisjob356
    @chrisjob356 4 года назад +18

    After watching the intro, my jaw just dropped. God Goodness, This is awesome.

  • @scorpion32
    @scorpion32 3 года назад +6

    I love this effect , so many applications. Thank you for showing how to prepare the images , I never seen that part before

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

      Happy to hear that !

  • @edbarrientos1009
    @edbarrientos1009 3 года назад +1

    Jaw dropped when the responsive part of the video kicked in. Amazing!!

  • @MdARahim
    @MdARahim 3 года назад +6

    I always love it when a youtube web developer puts source code in the description. Great work!

  • @Vishal_____-
    @Vishal_____- 3 года назад +1

    Great thing is you done this without any library...
    You are defination of Perfection.....
    👏👏👏👏👏👏👏👏👏

  • @darin4934
    @darin4934 4 года назад +5

    Wow.
    I'M YOUR BIGGEST FAN IN JUST 5 MINUTES.
    CONTINUE THE GOOD WORK CHAMP!

    • @TrueCoder
      @TrueCoder  4 года назад

      Thank you !! I appreciate that

  • @khaldounal-nuaimi3594
    @khaldounal-nuaimi3594 4 года назад +2

    Honestly I have yet to see a design as awesome as this!

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

    I am from Vietnam, I love this video, thank you

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

    Compared to others, this is the absolute best tutorial on the parallax!!!! Thank you for sharing!!!

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

      Thanks🙏! I appreciate that 💚

  • @RominaMontiel
    @RominaMontiel 4 года назад +5

    I don't speak English but I understood the tutorial perfectly, I loved it! thank you

    • @TrueCoder
      @TrueCoder  4 года назад

      You're welcome bro :)

    • @theman7050
      @theman7050 3 года назад +1

      Its a song actually

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

    This is definitely the ULTIMATE tutorials!!

  • @joshuajaytabuada7201
    @joshuajaytabuada7201 3 года назад +1

    thanks dude this helps me understand parallax more.thumbs up!!

  • @arshadsamdani5086
    @arshadsamdani5086 4 года назад +3

    Dude you develop the most jaw-dropping animations, I am new to this but watching ur videos is pushing me to learn more and more thanks man, pls never stop keep dng this, u deserve more (I am appreciating u from the bottom of my heart)... Flawless

    • @TrueCoder
      @TrueCoder  4 года назад +1

      Thank you bro ! I appreciate that

  • @오징어-n6k
    @오징어-n6k 2 года назад

    It was extremely awesome. It makes me obsessed with the world of web dev. thanks for your splendid video.

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

      Thank you! Glad it helped you

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

    There it is, true Parallax. Amazing work!

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

    Great tutorial man, i can't believe someone can write the code that clean 😶

  • @Sナツ
    @Sナツ 4 года назад +3

    thanks for including the code and tutorial, would recommend people check do a crash course on css+html from w3 schools to help understand the code.

  • @RelaxingMusic-lk4xj
    @RelaxingMusic-lk4xj 2 года назад

    Damn Sir I was sleeping on that precious content. would love to see more Thanks Alot

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

    You r awesome bro love it 😍

  • @Нелысый-э6о
    @Нелысый-э6о 4 года назад +1

    U're the best bro🔥🔥 . I really enjoyed the video and the soundtracks. Thank you!!!

  • @RemoteJuniorJobs
    @RemoteJuniorJobs 4 года назад +5

    Absolutely amazing! Great tutorial! I would only like to see the mathematic explanation of the formulas to understand your thinking proccess :) again, thanks for sharing! Very clean code and great explanation overall.

  • @PrabhjotSingh_
    @PrabhjotSingh_ 2 года назад

    Best parallax tutorial

  • @eldenhor737
    @eldenhor737 4 года назад +3

    Amazing tutorial! Thank you!

  • @chome4
    @chome4 3 года назад

    In Chrome browser, there's a grey bar where the menu should be, but in Firefox, there is none. I'm going to put a regular nav bar in anyway. This is a perfect and very simple site. Thanks.

  • @TOOLruls
    @TOOLruls 4 года назад +1

    True Coder you are the hero

  • @SujayKantiPaul
    @SujayKantiPaul 3 года назад

    Thanks a lot. This video makes many couple of solutions for me. Only thanks is not enough for you, best wishes for you.

  • @ShubhamSingh-xm4no
    @ShubhamSingh-xm4no 3 года назад +1

    Thanks for this awesome content !

  • @altahaaa
    @altahaaa 3 года назад

    5:14 i never see this technique before. thanks for sharing.

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

      You're welcome bro !

  • @annapurnasahoo7051
    @annapurnasahoo7051 4 года назад +1

    It's great plz next part of this plz plz plz plz

  • @AH-cf9cv
    @AH-cf9cv 4 года назад +1

    Thank you very much bro for your kind help on web devlopment ..

  • @quenting.6460
    @quenting.6460 3 года назад

    This is awesome dude ! I love it !! Thanks for explanation, always nice to see people still sharing tricks for free. Does there is a way to insert that effect to a Wordpress project ?

  • @mariamartseniuk8862
    @mariamartseniuk8862 3 года назад

    Intresting video, but it's a special case. I mean your mathematical formulas. If we need put block with parallax bg from header in any other section in page - all broken. If we put section with text and image in any other section in page - it's broken. And text and image don't stop on 0 position - its meet together and go further

  • @abhiworld4579
    @abhiworld4579 3 года назад

    Great work bro as I am beginner I feel good with this tutorial

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

    this want i want great work bro, i still don't know how to edit paralax website in ps but now i did

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

    Thank you so much, bro. Keep it up!

  • @erfansoori3385
    @erfansoori3385 3 года назад

    So professional... thanks for sharing🌹❤

  • @MPlaza-ve7dr
    @MPlaza-ve7dr Год назад

    It's great thanks and good luck

  • @dantutu.
    @dantutu. 4 года назад +1

    Awesome as always! Which theme of VS do you use? Keep up the good work!

    • @TrueCoder
      @TrueCoder  4 года назад +1

      Thank you !! I use material theme

  • @thannaung6363
    @thannaung6363 4 года назад +1

    It is very useful . Thank you bro!.

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

    Wow thank you ! Was looking for such tutorial after seeing this on dribbble

  • @TheYanCardoso
    @TheYanCardoso 3 года назад

    he makes it look easy 0_o

  • @il4938
    @il4938 3 года назад

    Thank you so much for your nice videos for learning codes. I really appreciate about your kind captions in videos too :)

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

    this effect is amazing!!

  • @adamemcover939
    @adamemcover939 4 года назад +1

    What software did you use? Also, your video is amazing!

  • @40minsmusic
    @40minsmusic 3 года назад +1

    Bro !!!! Insane

  • @harishpadi5508
    @harishpadi5508 4 года назад +1

    Very informative

  • @nightowl1596
    @nightowl1596 4 года назад

    Just what i need to study, thanks m8

  • @jamemamjame
    @jamemamjame 4 года назад +1

    Many thanks

  • @RaphaelKONG
    @RaphaelKONG 3 года назад

    Awesome ! I subscribed

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

      Happy to hear that !

  • @safsafaf2838
    @safsafaf2838 4 года назад +1

    Great video, thanks a lot

  • @karygordo
    @karygordo 4 года назад +1

    Woww....this is impressive!

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

    Niceeee job bro ❤. Onother program or page IA for cuttin img? That is Not photoshop. Thanks

  • @orhancekic_
    @orhancekic_ 3 года назад

    Awesome tutorial

  • @choosebest3709
    @choosebest3709 4 года назад +1

    Awesome

  • @AcademyOmen
    @AcademyOmen 4 года назад +1

    Awesome, this made me subscribe

  • @kokomaung_is_me
    @kokomaung_is_me 4 года назад +3

    I like this

  • @priyanzhu8537
    @priyanzhu8537 3 года назад +1

    So sick dude

  • @msb1288
    @msb1288 4 года назад +1

    You are awesome bro🔥🔥🔥🔥🔥🔥

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

    When you are cropped out the images in photoshop, you can use the previous cutout as a mask for the next one, creating a more exact cutout. Over all, its best to work non-destructively to allow modifications over the lifetime of the project. Also, using select subject will save you a lot of time selecting people in an image, especially if its on a flat background.

  • @judithvillagracia4773
    @judithvillagracia4773 3 года назад +1

    AAAMMMAAAAAAZING!!!

  • @athos.empreends
    @athos.empreends 3 года назад

    this is ridiculous of soo perfect

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

      Thank you, I appreciate that !

  • @lichaytiram9246
    @lichaytiram9246 4 года назад

    Thanks for video

    • @TrueCoder
      @TrueCoder  4 года назад

      You're welcome bro !

  • @frmods
    @frmods 3 года назад +1

    thanks bro thanks!!

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

      Most welcome 💙💙

  • @sriram9786
    @sriram9786 4 года назад +1

    Bro is this design conatins copyright or shall i use it

  • @shaderone07
    @shaderone07 3 года назад

    Yes... that's indeed amazing.

  • @tiaan_va
    @tiaan_va 4 года назад +1

    Thanks for the tutorial it was good. You would however get infinitely more engagement if you actually recorded audio as well and worked through everything step by step even if you broke it up into multiple videos. Most people watching this will only be able to copy and paste without knowing how to customize it for their own needs.

    • @TrueCoder
      @TrueCoder  4 года назад

      Thank you bro !
      I'm going to use my voice in the next video

    • @hackerprime9722
      @hackerprime9722 2 года назад

      I agree.

  • @phanuc2199
    @phanuc2199 3 года назад

    Thank you very much

  • @Julimar
    @Julimar 3 года назад

    amazing

  • @SnowBall19
    @SnowBall19 4 года назад +1

    Awesome 👌🌟

  • @Sabbirs.Creation
    @Sabbirs.Creation 4 года назад +1

    Incredible.. 💯

  • @bentaylor10
    @bentaylor10 3 года назад +1

    just a heads up, this will break on any screen wider than 1340px

  • @wisatagowok4268
    @wisatagowok4268 3 года назад

    Amazing stuff

  • @diogoferreira1870
    @diogoferreira1870 4 года назад +1

    eu to espantado vendo isso, tenho que fazer um tcc de técnico em informática integrado do ensino médio, minha meta é entregar algo parecido. Em português não tem conteúdo bom como esse :(
    você é um super heróis da edição?

  • @danielmorales0917
    @danielmorales0917 4 года назад +1

    It's so great!

  • @elhamzeinodini4828
    @elhamzeinodini4828 3 года назад +1

    🤩🤩🤩thanks

  • @rumanzahid6671
    @rumanzahid6671 4 года назад +1

    Great

  • @somebody-17546
    @somebody-17546 3 года назад

    Can you do navbar change on scroll. Form the horizontal navbar to the sidebar

  • @akkilicoguzkagan
    @akkilicoguzkagan 4 года назад

    Can I use the background images for my portfolio site?

  • @garyhernandezgt1800
    @garyhernandezgt1800 4 года назад +1

    Awesome!

  • @pooyands2399
    @pooyands2399 3 года назад

    ok how do u figure out the mathematic equations ?! is there like a big formula idk about or what ? :D

  • @wrends
    @wrends 3 года назад +1

    wow!

  • @hbv896
    @hbv896 4 года назад

    Hi i am a beginner and started a new project with Angular. I wanted to adapt this beautiful effect to my procet but i dont know now how to use your vanilla javascript code in Angular. Adding the angular.json file didnt work. It loads the file but the effect wont appear. Can maybe u help me ?

  • @nwwy273
    @nwwy273 3 года назад

    Your tutorial is AWESOMEE🔥 Just a few questions. When I resize my screen my mountains will disappear and when i enter full screen the background will have a white space on the right, seems like my background is not fit the screen. How can I solve these problems?

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

      you just have to resize the images for your screen

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

      because my screen resolution is smaller than yours

    • @nwwy273
      @nwwy273 3 года назад

      @@TrueCoder ah I got it. Can you make a tutorial about how to make a sidebar in this website, please? Cause it would be really cool if the website has a sidebar! Anyway, tysm!

  • @emesueemmanuel1641
    @emesueemmanuel1641 3 года назад

    Good day, beautiful work, pls while writing out the code myself, I got an Uncaught typeError: translate.forEach is not a function....pls do u know or does anyone know how to solve this error. Feed back would be much appreciated 😊

  • @MrDestinyproduction
    @MrDestinyproduction 4 года назад

    Hey bro! Wonderful video but I have a problem, after following your steps. The images would link on vsc. I understand why- it keeps saying error

  • @akagamestory7665
    @akagamestory7665 3 года назад

    Ahahaha next level🔥🔥

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

    Why z-index: 30; for the nav? The values
    Do you have any calculations for the values to be these?

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

      No there are no calculations, an element with greater z-index value is always in front of an element with a lower z-index value.

  • @alonsorodriguez8691
    @alonsorodriguez8691 2 года назад

    Quisisera quitarle el oscurecimiento cuando bajo el scroll.... como le hago

  • @autocadbd.2023
    @autocadbd.2023 3 года назад

    Love u man :) love this

  • @copyrightfree-videosmusic3667
    @copyrightfree-videosmusic3667 3 года назад

    What is the name of your editor theme
    I like it a lot

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

      Vscode Matherial theme

  • @VisualAIStudios
    @VisualAIStudios 4 года назад +1

    Can I use your source code for my projects?

  • @quenting.6460
    @quenting.6460 3 года назад

    The website won't display properly if we are using a device below 2100px width.... :/
    Does there is a way to adapt the full landscape at the beginning according the device used for the display ?

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

      That's because i have been working with a 1280x720 screen. So just try resizing the images and it will be good

  • @alirez.rahimi
    @alirez.rahimi 3 года назад

    greeeeeeaaaattttttt😍😍😍😍😍😍

  • @cggaleri8608
    @cggaleri8608 3 года назад

    cool auto subscribe

  • @Misterkt1
    @Misterkt1 3 года назад

    Question guys : Why there is no width in Css in the body section ? My elements are moving according the size of my windows if I am not in full screen for example... :/

  • @TravellingTuber
    @TravellingTuber 3 года назад

    bro while scrolling there is some gap between mountain 2 and 3 and also between mountain 2 and sky

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

      Just play around with positionings and speed until you don’t have anymore those gaps