Parallax Scrolling Effect | HTML CSS & JavaScript
HTML-код
- Опубликовано: 20 май 2024
- How To Make Parallax Scrolling Effect Using HTML, CSS and JavaScript
⏱ Timestamps:
00:00 Preview
00:54 Folder Structure
01:22 Header
04:24 Home Section
07:42 About Section
08:56 Create Parallax Effect
14:18 Preview
🎵 Music Credits:
lukrembo - biscuit
• lukrembo - butter (roy...
📁 Download Source Code (Please Subscribe)
www.mediafire.com/file/brv0qn...
#html #css #htmlcss #javascript #websitedesign #coding #codingtutorial #javascriptproject #javascripttutorial
#reponsivewebsite
These creative people make me (a learner) nervous
Wow! this needs more views, just followed your tutorial and it came out amazing, thanks!
Props to you man this looks amazing
Cool effect😏I like how it looks👍👍
very good video!! I like how you do everything step by step.
thanks, thats the what i wanted to learn
Muchas Gracias!
Super 🎉🎉🎉
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
Kind of off topic, but what keyboard do you use?
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.
It was very, very great❤🎉
Instant like and sub. Very straightforward content.
Hello, is this open source because i would like to implement this into a school project
Awesome
From where do we get those images?
нормас! спасибо
Hi! Thanks so much for this tutorial! Do you have Github?
Yes I have github.com/ArryPutra
Source code link not working... This site can't be reached
how did you create the images (mountain, plants, etc.) in the first place?! Would love to know! Figma?
He liked and didnt reply😂😂
Fr 😂😂@@Al-Hussainy
Yes can be done with css only by using perspective and z index
How much would it be worth if you were to sell it?
hello where u find image like this ?
freepik.com
what theme are you using?
Ayu
bro develop website like he is playing need for speed😂
Source code link not working please update
you can do this with css only
How, any reference?
@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
Idk but maybe z index and scroll animation can mimic parallax
You can do anything with css even though it still isn't a language
@@CodeArryWith CSS use perspectiv and with JS use position Moving
Where you got the picture
Freepik website, "landscape illustration" the keywords
Source Code link is not working
Which error are you getting?
Do you have a business contact? I want a website design done.
I am currently not opening a website design service
Sure..
I can help you with this.
source code link not working
I tried the source code link it working
Vs code theme name
Ayu
Bro source code has an error
Which error are you getting?
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.
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".
Thanks for the advice
Bruh take it easy and relax
If anyone wants a website Give me your designed, I will do it for Rs 200. Only html and css