Vanilla JavaScript: horizontal Smooth Scrolling Parallax Slider
ฝัง
- เผยแพร่เมื่อ 26 ก.พ. 2021
- Hi guys,
Back with another video where we will be creating a parallax slider.
We will be using the lerp function to create out own horizontal smooth scrolling effect with JavaScript.
Thanks for watching and please subscribe if you wish to see more videos like this.
Conor - วิทยาศาสตร์และเทคโนโลยี
So cool! I learned a lot about smooth scrolling ! Thanks! Have a good day!
My brother, you are so underrated. You have skill that not many developers have. Please keep making videos, I believe more people will discover you, it just takes time. Love your content bro!
Thank you for your Tutorial!! I really enjoyed recreating the end result :) A mobile Version for this type of site would be sooo cool. Meaning, when you scroll on your phone it would be vertical scrolling with the same parallax effect. That would be bonkers!!!! Maybe consider this as a video idea.
Thanks for the tutorial!! From Brazil 🇧🇷
Thanks for the tutorial, Great Content.
You are amazing! Thank you very much.
Very useful. Thank you!
Thanks for the tutorial!
Thanks, @Conor Bailey for sharing your solution. I have tried to implement this in React js but it isn't working. The part I had issues with is iterating over the directory containing the images and then displaying them. Every other aspect of the code worked but just that part of looping over the image folder. I tried using the import and map function but became a pain in the neck as everything scattered. Any solution to this?
Absolutely amazing content! Could you please also make this kind of projects on react too ? Would really appreciate it!
Appreciate your work. Thanx
Thanks for watching! 👍
👌 love your content , Make more video like loading screen animation, Thank you
Thanks dude! I’ll get some more vids like that put up. Thanks for the suggestion!
Thanks man!
gotta like first before watching this awesome content!
Legend! Thanks Lawrence!
Thank you for the tutorial!!! But why is my window addeventlistener resize not working for scroll??
very nice pro I love this effects thinks for teach me this !
thankyou for this!
AMAZING
Okay it's really nice but how can i do this in a smaller container, because when i scroll the images scrolls but the page also
And i just want the images to scroll independently
can you also use this with react ?
hello! the window.addEventListener('resize',init); didn't work for me, and how do i add small spaces between each images? please help
how to make this effect on slider plugin - owl or slick
THanks brotha
Thanks! Let's see how my instructor likes this example as opposed to theirs when I hand in my assignment...
my images arent showing up at all ;(((((
Our University needs your help........😁
Thank you for your Tutorial!! Please send source code of this demo
can anyone plz give intiution behind lerp function
Hay Connor.
My name is Dekdi, I am beginner front end programmer from Bali, Indonesia. I am succeeded in making one as the same as your tutorial. But when i applied to my project i got little stuck. I want to make the parallax slider work when it touch my third section not from the begining of my page, it become weird and error. Do you mind let me know which line in your code that i should change and adjust to make it work to the section that i want? Could you give me the example of the code?. I would appreciate it thanks.
i am having the same issue please let us know any method available...
When i print imagewidth i get 0
can you provide the code pls
👍🏻👍🏻👍🏻👍🏻🤝🏼
Trying to place this slider further down the DOM breaks the functionality as it calculates scrollY value since the top and already substantially moves the slider much to the left by the time we reach there. Any fix?
Hey. Hmm you could try getting the offsetTop property of the slider parent element and then subtract that amount from the transformation? Will be happy to take a look at a codepen if you post II here 🙂
@@ConorBailey yeah I just saw a similar comment by you on the infinite image horizontal scroll video. Looks like a wonderful fix. Will try later today. But if it doesn't, i shall post a codepen here, please take a look then. :D
You are doing a commendable job. Never stop these quality Vanilla js vids.
@@ConorBailey Ok it works!
setTransform(slider, `translateX(-${current - (sliderOffsetY - window.innerHeight * 0.7)}px)`)
But one thing. Assume I have about 8 images, and I want the last one to come in view by the time the page has scrolled about 90-95% of the slider div so the viewer can atleast know he has seen all the images in the slider. The transition speed doesnt matter here. How would thatbe made possible? Currently I changed the width of slider to 3200px for 8 images and added 3 new images 6,7,8.jpeg. but obviously the 7-8th dont manage to come in the view.
You know, tbh a solid kick a$$ solution in cases of 8+ images could be to detect which images have gone offcanvas on the negative X axis, then append them on the div below and translate them in reverse towards the positive X axis giving us 2 rows of moving images in alternate directions. What do you say? :D
@@theman7050 sounds good mate. Also sounds like it will be a tricky one to get the calculations correct (as my maths is pretty terrible haha 😅) but will look amazing when done!
I get this error: "Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
at init (app.js:18)
at app.js:30" (line 18 is function init and line 30 is calling this function.) I did everything the same... why is it null?
Hi Tina. Can you send a link to your code via codepen or GitHub? I can take a look. Looks like the image containers are not being selected as the code is returning null. Thanks. Conor
@@ConorBailey I'll send the code soon. Thank you.
Hi conor ! Big Hello from France ! A music man who loves development too ! Thank you very much for your videos really i love your way to explain and to do and your work. I need your help if it's possible because i would like to add a drag horizontal function to your slider (in vanilla js of course). Is it possible to do ? Thank you again, i'm blocked about this for a very long time ! (ps sorry for my poor english)
Hi mate. This is possible and I do cover a draggable slider effect in the following video:
th-cam.com/video/KHGc7eZyxKY/w-d-xo.html
I should be simple to implement the drag functionality with this Parallax slider. I'll look into this for a further video.
Thanks bud.
@@ConorBailey Hi, this is a very cool effect, is it possible to do one with plugins - owl or slick?
I like the way this guy says haytchtml
my setTransform() isn't working it's throwing syntax error pls help
just found out it worked as Stransform thanks
Try to use GitHub repository to ease ur subscribers from coding this after watching the video, it helps because it will ease them d stress. It’s just to download d zip and run it
Make a slick sliders with vanila js,
how to make same slider with only draggable not scrollable, please help
🤐🤔😔
th-cam.com/video/LPBGK1gqXoU/w-d-xo.html
This may help. This is a draggable slider so you will just have to try to merge the 2 ideas.
Thank you sir for reply.....
I try my best if i have any doudt i ask you...
@@ConorBailey sir i try but it not work 😕😟😰. sir can you make it please please sir.... , i have collage project so i want put this slider in my project. i try but i can't do it...... can make same slider with draggable only.please please sir
I did every code and followed your steps, but my images would not show on the screen. It's just a black page. Any suggestions?
meaning, when I type in the img.style.backgroundImage = `url(./images/${idx+1}.jpeg)`, it wont collect my images
@@christoffersrensen2068 hey mate can you put your code on code pen. I’ll take a look. Maybe the image div size hasn’t been set or something? Any errors in the console?
@@ConorBailey I have no errors in the console. codepen.io/christoffer-traynor-s-rensen/pen/WNpoRWg
@@christoffersrensen2068 I have the same problem. could you fix it?
@@ConorBailey I have the same problem. could you fix it?
Please Source code 🥺🥺
Provide source code
if your image don´t show make sure you have all the image same like.
1.jpeg 2.jpeg 3.jpeg 4.jpeg 5.jpeg 6.jpeg ✔
1 .jpeg 2.jpeg 3.jpeg 4 .jpeg 5.jpeg 6.jpeg ❌ it´s have space. 1.jpeg ( 1 .jpeg ), 4.jpeg ( 4 .jpeg ),
you're a good poop finder, but bad developer
On line 24
document.body.style.height = `${sliderWidth - window.innerWidth / 2}px`;
this line works as well
everything works perfectly except the
@Jb Xn I did it but it stills not working
this is a problem I came across too. I tried changing the paths of the folders but it does not work
My images are located in this style
img:
1.jpeg
But the code does not render in JavaScript as of recently!