Parallax Scrolling Effect | HTML CSS & JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ม.ค. 2025

ความคิดเห็น •

  • @adenera8844
    @adenera8844 6 หลายเดือนก่อน +1

    You show exactly what the code does while coding it helps so much to understand everything. Amazing work

  • @YungDachi7
    @YungDachi7 9 หลายเดือนก่อน +2

    Wow! this needs more views, just followed your tutorial and it came out amazing, thanks!

  • @CivilizedGamingYT
    @CivilizedGamingYT 10 หลายเดือนก่อน +46

    These creative people make me (a learner) nervous

  • @Al-Hussainy
    @Al-Hussainy 8 หลายเดือนก่อน

    Props to you man this looks amazing

  • @soumelee5661
    @soumelee5661 9 หลายเดือนก่อน

    very good video!! I like how you do everything step by step.

  • @edsHTML
    @edsHTML 10 หลายเดือนก่อน +1

    Cool effect😏I like how it looks👍👍

  • @Amirkalateh_1380
    @Amirkalateh_1380 9 หลายเดือนก่อน

    It was very, very great❤🎉

  • @efekaanbengi
    @efekaanbengi 9 หลายเดือนก่อน

    thanks, thats the what i wanted to learn

  • @arpangarg5149
    @arpangarg5149 8 หลายเดือนก่อน

    Bro Loved it, tbh I downloaded the code without watching the complete tutorial and I extracted the file, opened the terminal to install the dependencies and other libraries just to find out this is built in pure html, css and js only, like bro bs this is literally so cool.
    Keep doing it, if only you can add your voice and explain a bit about this as well, I think you got great skills that the community can learn.
    Still great work

  • @roycechua
    @roycechua 10 หลายเดือนก่อน

    Instant like and sub. Very straightforward content.

  • @ValidatingUsername
    @ValidatingUsername 9 หลายเดือนก่อน

    I was working on a bootstrap kind of php repository about a decade ago that you could use like an object oriented quick call, again just like twitters bootstrap, but random people kept approaching me in public asking me about the project I was working on.

  • @giovanavn
    @giovanavn 10 หลายเดือนก่อน +2

    Hi! Thanks so much for this tutorial! Do you have Github?

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน +2

      Yes I have github.com/ArryPutra

  • @viky_ok
    @viky_ok 10 หลายเดือนก่อน

    Muchas Gracias!

  • @greensherman18
    @greensherman18 10 หลายเดือนก่อน

    Super 🎉🎉🎉

  • @ava_crey
    @ava_crey 5 หลายเดือนก่อน

    Where did you get this image? Give me links to such photos

  • @besssels
    @besssels 9 หลายเดือนก่อน

    Kind of off topic, but what keyboard do you use?

  • @ritwiksingh4937
    @ritwiksingh4937 8 หลายเดือนก่อน

    From where do we get those images?

  • @gameover007
    @gameover007 10 หลายเดือนก่อน

    Awesome

  • @nebulka-
    @nebulka- 9 หลายเดือนก่อน +1

    how did you create the images (mountain, plants, etc.) in the first place?! Would love to know! Figma?

    • @Al-Hussainy
      @Al-Hussainy 8 หลายเดือนก่อน

      He liked and didnt reply😂😂

    • @walbur2214
      @walbur2214 8 หลายเดือนก่อน

      Fr 😂😂​@@Al-Hussainy

  • @donkerraxhija8659
    @donkerraxhija8659 10 หลายเดือนก่อน

    Hello, is this open source because i would like to implement this into a school project

  • @yulan8348
    @yulan8348 10 หลายเดือนก่อน +3

    hello where u find image like this ?

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน

      freepik.com

  • @ssscreations7604
    @ssscreations7604 8 หลายเดือนก่อน +1

    Source code link not working... This site can't be reached

    • @patelmilind7621
      @patelmilind7621 3 หลายเดือนก่อน

      where did you got codes?

  • @ssscreations7604
    @ssscreations7604 8 หลายเดือนก่อน

    Source code link not working please update

  • @muhammadrodrigues4571
    @muhammadrodrigues4571 9 หลายเดือนก่อน

    How much would it be worth if you were to sell it?

  • @Anonymous34958
    @Anonymous34958 10 หลายเดือนก่อน +1

    what theme are you using?

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน

      Ayu

  • @zainshah478
    @zainshah478 9 หลายเดือนก่อน

    bro develop website like he is playing need for speed😂

  • @beastytsimnt98
    @beastytsimnt98 9 หลายเดือนก่อน

    Yes can be done with css only by using perspective and z index

  • @aryadi2877
    @aryadi2877 10 หลายเดือนก่อน

    Where you got the picture

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน +1

      Freepik website, "landscape illustration" the keywords

  • @nomadshiba
    @nomadshiba 10 หลายเดือนก่อน +24

    you can do this with css only

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน +2

      How, any reference?

    • @nomadshiba
      @nomadshiba 10 หลายเดือนก่อน +11

      @ry it should be named `scroll-timeline` and `animation-timeline`, there should be videos on youtube how to use them or you can just check the docs.
      only safari support is missing, but should be there soon, and it doesnt break anything anyway, if you are on safari you just see the normal page without the effect until the support comes. 70% of internet users globally uses a browser with the version that supports it atm. so its ok. when this video becomes like 6 months old there should be at least 95% support

    • @KiddyParkerz
      @KiddyParkerz 10 หลายเดือนก่อน +7

      Idk but maybe z index and scroll animation can mimic parallax

    • @hotsoda46
      @hotsoda46 9 หลายเดือนก่อน

      You can do anything with css even though it still isn't a language

    • @pfb1830
      @pfb1830 8 หลายเดือนก่อน

      ​@@CodeArryWith CSS use perspectiv and with JS use position Moving

  • @un_defined
    @un_defined 10 หลายเดือนก่อน

    нормас! спасибо

  • @eternitysv
    @eternitysv 10 หลายเดือนก่อน

    Do you have a business contact? I want a website design done.

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน

      I am currently not opening a website design service

    • @tonsomar-coder
      @tonsomar-coder 9 หลายเดือนก่อน

      Sure..
      I can help you with this.

  • @eleistervlack9587
    @eleistervlack9587 10 หลายเดือนก่อน

    Bro source code has an error

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน

      Which error are you getting?

  • @ritikpatni7021
    @ritikpatni7021 10 หลายเดือนก่อน

    source code link not working

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน +1

      I tried the source code link it working

  • @thekiiisan
    @thekiiisan 10 หลายเดือนก่อน +1

    Vs code theme name

  • @finnalandem
    @finnalandem 10 หลายเดือนก่อน +2

    You display some of the worst code examples I think I've seen on here. Don't EVER teach someone to write CSS without using selectors, it's bad etiquette. The fact that you're targeting only the elements, is going to lead a newcomer to believe that they don't need selectors. But what happens when there's more than one type of element on the page, and you'd like to keep them separated? Well typically you'd use selectors, otherwise all those elements turn out to be the same exact thing. Don't make HOW TO videos, if you're not going to display accurate, educational content.

    • @nomadshiba
      @nomadshiba 10 หลายเดือนก่อน

      i dont care about he is only using element selectors, since most of CSS is scoped to components. Using html semantics and aria attributes to style things is actually pretty good and clean way to not repeat yourself, there are CSS libraries like PicoCSS that does exactly that. for example instead of `header nav a.active` he could have said, `header nav a[aria-current]`.
      what is bothering me with the video is the use of "px"(s) instead of "rem" or "em", and abuse of "flex" while they can just use "grid" and write less.
      but also there is one more thing, you don't even need JS for this anymore, you can do this all CSS only, seeing this example in 2024 is just wrong.
      its like teaching people how to do layouts with s and "float", while there is "flex" and "grid".

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน +2

      Thanks for the advice

    • @youarethecssformyhtml
      @youarethecssformyhtml 10 หลายเดือนก่อน

      Bruh take it easy and relax

  • @MdRizwan_351
    @MdRizwan_351 10 หลายเดือนก่อน

    If anyone wants a website Give me your designed, I will do it for Rs 200. Only html and css

  • @googleway
    @googleway 10 หลายเดือนก่อน +2

    Source Code link is not working

    • @CodeArry
      @CodeArry  10 หลายเดือนก่อน

      Which error are you getting?