Parallax Scrolling Effect Using JavaScript | HTML and CSS Tutorial
HTML-код
- Опубликовано: 12 сен 2024
- In today's video we will be taking a look at how we can create a parallax scrolling effect animation using vanilla JavaScript. This concept can be applied to various elements on the website ranging from images, text, and more.
Don't forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
Subscribe ► bit.ly/2Q3pCiB
[ PROJECT FILES ]
Previous video (image) ► • Build a Responsive Web...
[ SOCIAL MEDIA ]
Instagram ► / juliocodes
[ HOSTGATOR ]
Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.
HostGator ► bit.ly/2ZfR0u3
Coupon code ► JULIOCODES60
Video tutorial ► • Video
[ MY GEAR ]
Programming/Video editing laptop Specs & extras
Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
-- Extras --
Monitor: Dell Ultrasharp 27"
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti
[ DISCLAIMER No. 1 ]
In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.
[ DISCLAIMER No. 2 ]
This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!
Awesome effect. One of the best explanations i could find.
WOO thank you! my first ever JavaScript attempt. I'll try to apply it to my website now.
Super cool. Thanks!
Thanks for watching!
Thank you man!
Nice project
Thanks!
New to your channel. Love your videos bro. Keep up the good work
Very usefull video for me
Great teaching style, thanks
Thanks for watching!
hello Jolio very good job.... I have a question! using ScrollReveal in commercial website is free or have to pay ?
Thank you for another great video. I have a question. Using the window scroll top works well for me when it's the top element but window scroll top value is not the right number to base transform translateY when the element is down the page some. I hope my question makes since. Again thanks for your contribution to the community.
plz scale up your font size
BTW great video bro
useful, thank you
Nice explain. If this section will be on bottom of a webpage then .
Beautiful Code, Simple & Easy
wow what a nice explanation :)
Thanks!
Some kind of holy christmas gift, thanks dude :)
Glad you enjoyed it!
hello, I tried your code but it doesn't work for me. The console gives me an error "Uncaught TypeError: Cannot set properties of undefined (setting 'transform')"
any advice on why this happens or how to fix it?
JavaScript cannot find the element you are trying to apply this property to. Make sure that you typed in the element class name correctly or that there are no spelling mistakes with the variables
Firstly, Great tutorial Julio. Thank you for putting in the time to create it. Is there a way to isolate this effect to just the image (section 1) and the overlaying text? In the second section (overflow) I still seem to have a parallax effect? Thank you
He man, I watch you tutorial now, and its so helpfull, I have one question for you or maybe for someone else.Can you or other guys put here any code for how you can do that in css,how its the difference, that is so important the see that how it working in different way, you know? Im begginer,but I think its interesting question, maybe for yu or other ppl :) Thanks for help me, and coment dowm pls :)
thank you, and of course please create more vanilla js parallax effect project and js programming apps that will highly appreciate
Sure thing!
thanx sir
also we can use background-attachment: fixed property with background: url()
Yes, but a javascript parallax effect is different. In this example, javascript allows you to control the speed at which the image moves. When you used the css method it’s always at one fixed speed
@@juliocodes thank you
hey julio isn't this the same when you use : background-attachment: fixed ??? i don't see any diffrence ?
No. If you compare both side by side when you used background-attachment: fixed the image is always set at a specific point. When you’re doing this with javascript like in this video the image is actually moving along with the scroll. If you were to increase the speed you’d see the image fly off. This way you can also control the rate at which the image moves. With background fixed you can’t
@@juliocodes so this is dynamic and more efficent , thanks for replaying
Yes. It gives you more control over the element as you scroll. On its own it’s a good effect, but if you use it on multiple elements at the same time it looks better by having them all move at certain speeds as you scroll
@@juliocodes yes yes i just finished the tutorial and i tried it with diffrent speed it looks amazing nice, btw is there any project tutorial coming soon like the squeeze ? it would be great
I posted the ‘revamped’ “The squeeze” tutorial last week. Not sure if you’ve checked it out yet. Though, there will a lot more responsive website tutorials in the future.
Bro How to apply to multiple div when appling to multiple divs the image does get attachment
Which OS are you using? Probably linux I think
Which theme you used??
Yes, Ubuntu 18.04 with the Flat Remix theme and icons
@@juliocodes which app you use for designing then?
@@aryanshmahato I don't do design. But if I need to do light editing images wise I use GIMP.
IMPORTANT QUESTION
--------------
How do I apply the parallax effect for the next images that come later in the next sections?
I have zero javascript knowledge. I copied you, and it worked. But only for ONE image on the landing page.
Thanks,
It’s because it’ll only grab the first one. You’ll have to grab all the references using something like ‘query selector all’ and then you have to loop through them. Inside that loop you want to apply the parallax effect
@@juliocodes Sir Thanks so much for the reply!!!
But I have no idea what you're talking about cuz I haven't learned Javascript yet.
I am so eager to learn this and apply it to my real project.
Can you explain it simpler?
What should I do?
Hi, julio I love your content but I found some of the videos are missing. Have you deleted them ??
Yes, I deleted ‘The Squeeze’ because it was outdated and I have a new tutorial to replace it out now. I also deleted the bootstrap store series because I lost all my files and there was no way to complete it anymore. However, I also plan on creating a better store that will have a better design and cleaner code.
@@juliocodes sorry for the loss of files. you making awesome content can't wait for your upcoming videos.
Can you link the source code?
code?
I would of used back ticks like `translate(${scrollPosition * -.7}px)`
Bro JS Course for beginners with mini projects please ? If u need more views :D
Hi, nice video and thanks for creating such good content however I would you to make a video or website using a stroke dash-array and in HTML, CSS, and js like on the wonderful website called @t. Must visit this website and please try to make the video as soon as possible. Thanks again