Simple Parallax Scrolling Effect with CSS & Vanilla Javascript

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

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

  • @metaverseplayer
    @metaverseplayer 3 года назад +24

    You’re just amazing for giving such gold to us who need to learn. Really appreciate you.

  • @thisarasilva3048
    @thisarasilva3048 3 года назад +5

    Sir, I love your tutorials. They are full quality ones. I love front end development. Just 14 years and learned many things from you …thank you. From Sri lanka .

  • @marcusscott4024
    @marcusscott4024 4 года назад +6

    You are an artist not just a developer.

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

    I am literally...Watching your Every Video...and experimenting all these..CSS styles.
    Thanks A LOT...

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

    I've watched three parallax videos on youtube, only yours really work and with most amazing effect

  • @maccyberchicken
    @maccyberchicken 4 года назад +6

    I also ordered your online course from the link above and that's great stuff too. Thank you so much, you rock.

  • @boyjunet8500
    @boyjunet8500 4 года назад +15

    why u so brilliant, dude?
    *cry

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

    Thank you for publishing the resources needed. It helps a lot!

  • @talhausman3109
    @talhausman3109 4 года назад +15

    Bro bro bro! wait, tell me what are you?
    you are so amazing and you are also making me a successful freelancer.

  • @iQuickest
    @iQuickest 4 года назад +15

    My favorite css channel, have learned so many cool effects from you, i was wondering if you could do a tutorial to make them responsive, i am new to web development, as of now i know basic css stuff but i want to learn about @media and keyframes

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

    You are king of css.

  • @QwertyQwerty-jv8cu
    @QwertyQwerty-jv8cu 4 года назад +15

    Невероятно, большое спасибо за такие видео :)

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

    Woooow..... why use libraries while it’s this simple. You win my subscription. Nice video

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

    The background made everything better

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

    Sir, You Are Pro Web Dev...

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

    You picked a great inspirational tune to work with plus the tutorial awesome.

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

    Thanks Bro, I have learned more in this channel than in school or in any course

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

    Excellent tutorial! Finally a one with pure vanilla Javascript without that hateful jQuery!

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

    muy buen trabajo! no es la primera vez que vengo a verlo. very good job man,.

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

    I just want you to know sir, that I am your big fan!

  • @medev3349
    @medev3349 4 года назад +14

    This is great! Bravo!

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

    That is a beautiful one. Nicely done.

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

    I love how the cursor spasms out everytime he reloads and it works

  • @AhmedGamal-cw2ct
    @AhmedGamal-cw2ct 4 года назад +1

    I have just done it ..................thanks very much .....continue

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

      Great....i hope you learned some new thing by this :)

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

    Beautiful, simple and elegant

  • @Saudavelpro
    @Saudavelpro 4 года назад +6

    very cool, and simple effect, congratulations man !!!

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

    Thanks, you have helped me in my work problem xD

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

    Gold content. This is amazing! Thank you for helping us!

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

    Brother, you are a gem.

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

    Unbelievable! Thank you!

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

    He is CSS God ❤️ who else agree to this?

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

    Awesome work, Keep up the good work.👌😃

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

    This is really cool! Thanks for making this video!👏👏👏

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

    That one is PERFECT. Thank you so much.

  • @t7Wp8iA7JjPSc
    @t7Wp8iA7JjPSc 4 года назад +14

    want to know how to do scroll animation like this since I learn web development.THX

  • @alyster8397
    @alyster8397 2 года назад +2

    Very nice as usual ! Thank you Sir ! :)

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

    This is great! So simple!

  • @deanjames6997
    @deanjames6997 4 года назад +6

    Thank you for another amazing lesson :)

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

    bro overall night effect and z-index not working plz tell alternet code...

  • @DavidElstob73
    @DavidElstob73 4 года назад +4

    Nice work, as always.

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

    you earned my respect bro

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

    Im a beginner , i just wanna know how do i do this with other images
    and change the directions? and also i want to go to this tutorial more detailed.

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

    Awesome Please do more work on vanilla javascript. i love this project..

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

    Awesome video. Learnt a lot from your videos. Thank you keep it up.

  • @chaostrader
    @chaostrader 4 года назад +9

    Again for people who have a problems try changing "Let"' for "let" all small letters

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

    Does anyone know how to get links to work once the ::before & ::after are added to provide a tint for the background?

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

    Thank you for the amazing tutorial!

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

    Excelente trabajo es mi canal de css de cabecera 👍🏻👏🏻👏🏻

  • @khan.hassan
    @khan.hassan 4 года назад

    Thanks works like charm and smooth!

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

    Thank you so much for this wonderful video tutorial.

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

    Awesome! Thank you!

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

    How can I write the Loren ipsum text like you had in the beginning?? I don’t see my text

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

    great video. thanks

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

    Useful and very awesome

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

    Thank you soo much for sharing your knowledge :)

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

    So amazing☺️❣

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

    amazing tutorial, thank you very much

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

    my images don't cover each other. What can it be?

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

    Thank you so much!!

  • @bySterling
    @bySterling 4 года назад +17

    Parallax has been my single favorite site design style for years. Does this work on mobile view?

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

      most of the time parallax does not fit most of the phones :/

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

      it does if you make mobile specific layout :)

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

      @@JtagSheep how do you do that?

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

      @@hyper190 cssn media queries can be helpful

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

    help!! this need any library? because i do the exact code like in the video but the scrolling is not working...

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

      Exactly, I did the code correctly but the scrolling is not working and elements are not moving.

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

      Try to change "Let" with "let" all small

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

      @@adarshurmaliya9901 tried but didn't worked

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

    Great and useful video, clean code. Thank you very much!

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

    Please help how come when i put another copy of it, it doesnt have the effect?

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

    Thank you so much for this video!!!!

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

    Great tutorial!

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

    thank u bro, i love ur videos

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

    How we can handle it in responsive design...it will be destroyed in small screen like tablet and mobile

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

    its not working for me my code is exactly the same

  • @nataliayarysheva7316
    @nataliayarysheva7316 4 года назад +6

    thank you so much, parallax has been my dream for the last couple of months! though I have an issue - why moon.style.right has no any effect?

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

      Just do float: right;
      in your css, but you'll have to put in bootstrap to use float: right;
      I can help you if you need me to

  • @jedediah-fanuel
    @jedediah-fanuel 4 года назад +4

    I think its better if when scrolling, the mountain going down

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

    super helpful !

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

    amazing work , i really like it

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

    Excellent 👍☝️

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

    hello, i just tried to do this on my own but i am facing some issues
    1. my transition is not smooth
    2. no matter how much i down scale the size of the moon it just does not gets any smaller

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

      I edited the moon png size by finding png resizer online

  • @claudiorigollet5820
    @claudiorigollet5820 4 года назад +42

    gran trabajo gracias.
    responsive cell
    @media (max-width: 360px) {
    #text{
    font-size: 3.8em;
    margin-bottom: 200px;
    }
    section{
    height: 80vh;
    }
    img#moon{
    height: auto;
    width: 400px;
    }
    }

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

      Gracias, bro!

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

      super cool.

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

      Where to use becoz it's not working

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

      Disculpa sabes su hay que tener algún documento para que me funcione la opción script? lo escribo escribo igual que el video y no me resulta
      Saludos

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

      @@alejandrogallano4300 gracias mi amigo!

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

    Wow really amazing

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

    Code doesn't work for me and I don't know why, do I need special extensions on VS code or something?

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

      same. hoping for an answer

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

    Awesome ❤️❤️

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

    I have a problem with js part, so the scrolling animation doesn't work.
    I use WS, and it recommends changing the code from var to const or let.
    What can I do for applying this parallax effect?

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

      I forgot, but thank you for your beautiful tutorial!! :D

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

      I found my mistake that I didn't enter the id = "bg" for background image. But, I wonder why all images are influenced by only one image's id.

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

    Thanks it’s really handy

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

    Just WOW!

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

    So nice😇

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

    Beautiful

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

    Hey, can you help me making a sticky sidebar, that holds position after the picture???

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

      I hope its help you ruclips.net/video/qOwhVDGNOAE/видео.html

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

    for some reason section before part is only covering 50% of the width, though I am specifying the width : 100%. Please help me out

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

      idk but he never helps anyone... i commented in one of his vids and its beeen like a year and he still no respond

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

    Wonderful.

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

    Can you please share it in a zip file so we can add it to our website also .

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

    Thanks. Good tutorial.

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

    Awesome i like it

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

    Extanary creativity and super design. But one mistake in description below there was please upload source code file and link please

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

    is this project responsive? (very cool by the way)

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

    omg, this is epic.

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

    Bro my JavaScript will not work help me out this situation

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

    Grave stylé

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

    AWESOME

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

    Great video

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

    u are really awesome

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

    How do you make this responsive?

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

    My script tag don't work correctly........what to do?

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

    where you got the snippets?