The background scroll animation wasn't really 'generalized' like I had hoped it would be. Next time I should test things a bit more!!! But I have revised the code, so if you have multiple backgrounds that you'd like to use this effect on, this should work! codepen.io/kevinpowell/pen/YVOLGz
Kevin Powell subscribed you keep this good work going.a question for you.do u have video on how you make this template?how toy have who we are border around thais text.I have a idea but need to know.yours.
Kevin Powell good content keep doing and i think your channel will grow up fast, i found lot of usefull stuff in your chanel and what i like is videos are small i can learn something new in half hour when i have break or im in bus i can just pick phone and watch one of your videos. Thanks
Super sorry for the really late reply rasel! It's probably too late, but this is the series where I built that page How to create a responsive website from scratch: ru-vid.com/group/PL4-IK0AVhVjOH5r4GAtlk1-tLUlEdiqXG
plenty of people post code that works and I'm grateful to them but Kevin actually succeeds in understanding what's going on and communicating it to boot.
Amazing! I never would have guessed Parallax was THAT easy. Thanks Kevin for yet another great tutorial. (Okay I know this is from more than two years ago, but there's just so many great videos of you I have yet to watch)
I've been racking my brain and keyboard trying to implement this onto a site i'm building. Wish I would've watched this first! Would've saved me a lot of frustration and headaches. Great video!
Thank you for this video, I've been looking for responsive parallax effect for a long time now and now I've finally found a parallax effect that also works well on mobile devices!
One of my friends is designing a website and picked a template specifically because it had parallax effects. This really make a site feel more modern and high-end. I was also a little confused about what "parallax" meant because to me it looked so similar to background-fixed so seeing the coding and comparison really helps explain it in a way I can understand :D
Thanks, Kevin! Just finished this series, adding another line of code which stops the parallax of the box if wScroll < 600, so if I scroll down a little bit more, the box just stay aligned and not going down anymore. I'll try to create my own version of this, then continuing your portfolio playlist, then your bootstrap playlist. Your channel is really awesome!
Awesome thanks for actually doing it! I'm at a stage where I rather use vanilla JS for everything so I might try to translate what you wrote to plain javascript. Thanks again! hopefully you have more in store for us!
I find it great the parallax--box has got to move slowly as people will try to read its content as you scroll. However, I was thinking, what if the parallax--box was a css animation and I want it to move upwards instead. Maybe I will try with the numbers. Thank you so much Kevin. You are helping me a lot.
Thanks for a very useful tutorial. I was wondering about this line of code: if (offset > screenHeight && offset) - could you explain the offset > offset part. Many thanks.
Hey u are awesome 🤩..after applying this parallax ,my image repeating vertical ,if add background -repeat:no-repeat; my image is not visible showing white space..could please give me solution ..cheers
the parallax--box: would've been a nice idea if the css was like top: 0; and when you scroll down it moves slowly up until it reaches -5em :D nice and clear tutorial!
Glad you liked it 👍. And if you play around with it, I'm sure you could get that type of effect. In an older comment, I mentioned how you could stop it scrolling when it reaches a certain point
I had a problem with the wScroll variable returning 0. If anyone is having this problem, you can use the vanilla JS solution of window.pageYOffset. Awesome job with this tutorial!
Great video! It's really cool that you explain why you do something instead of just saying that you _should_ do it to just get it to work. It shows that you've really prepared for this and want us to actually learn it. I did have a problem though. When resizing the web page, the image started repeating. This was especially obvious whenever I tried to scroll. Do you have any advice for this problem?
Glad you like my approach trenvert123! It could be an issue with the size of the image, and it might also be where the image is located. There is a link in the description of the post to my codepen that has an updated bit of code for this, which *might* fix the issue.
Kevin Powell Thanks for getting back to me so quickly! Lol. I was tinkering with the code for hours trying to find a perfect balance for the parallax and the image's current size. It never occurred to me that my image was simply too short. This solves my problem perfectly. Thank you.
if the box is way down this -5 will not work properly. Now is -5+0 and it is ok, but if it is -5 and lets say you are in the middle of the page for example scrollTop(2500) your element will be already moved down. You must apply this logic only when the desired element is detected something like elem.top - scrollTop = 0. Otherwise it is good example tnx. edit: Oh you did it in the codepen example my mistake :). Good tutorial
It's been a great series and everything has been going great until I got a warning message about $ not being defined, I presumed I had messed up a src link so I checked your code on GitHub and even copied directly to make sure I had it right and it's still giving me warnings. Anyone got any ideas?
Thanks so much for this tutorial, really great to see you problem solve on the fly too 👍🏻. I have the first example of parallax working well on a hero image, however it always starts the image at the top. Is there a way for the parallax movement to take into consideration the vertically centred image please?
var currentPosSt = $('.parallax-bg').css('background-position-y'); var currentPos = parseInt(currentPosSt); //turns returned string into integer function parallax(){ var wScroll = $(window).scrollTop(); $('.parallax-bg').css('background-position', 'center '+(currentPos +(wScroll*0.5))+'px'); } this works
Thanks for this, Kevin! So helpful! I wanted to know how one might adapt the calculation in JS in order to enable the background position to start in a position other than position: center 0; . I'm hoping to having my background image start at position: center 100px; or even position: center center;
Good question, lol. It would take some fiddling aroun with maybe, and it might also depend on the height of the image. Sorry that I don't have a more concrete answer.
Hi! Nice effect Kevin. It's working fine but I have a little problem, maybe you can help me. When I start to scroll the page,right at the beginning, the background image suffer a little scale or size adjustment, and then the effect works fine. And still working fine till I refresh the page and start to scroll, again, the background-image dimension do the adjustment. Hope I made myself clear. :) Thanks!
I honestly have no idea what might be causing that. Is the site live somewhere where I can see it? It sounds like the size of something is changing when you start to scroll, but I'm not sure why that would happen.
Quick fix would be to change the initial css on the hero image to "background-position: center 0px" (instead of just 'background-position: center). That fixed it for me.
Awesome, i like the desing, the work and everything, i wonder if you can make other video the effect parallax just with vanilla javascript, advanced like you maked, from de begining to the end, i mean, for seeing all the process, please ... thanks so much.
Thanks for the video +Kevin Powell - An issue i've seen often when experimenting with this is a background image in the middle of my site will completely disappear once I put in the JS code. Of course this could be difficult to answer and quite vague, however perhaps you could throw some ideas why this may happen for those of us that have this issue. Thanks! You're making the world a better designed place :)
It's strange if the image is just missing... if you have a no-repeat on it, it could be that, by the time you scroll down to it, it's scrolled away. In the code I did in my video, I didn't take into account where on the screen the image was, in the codepen linked in the description, it is set up to have the image positioned perfectly, no matter how far down the page it is... if that doesn't solve the problem, I'm not sure what might be causing it :\
Hello! New to coding and love this tutorial! I was wondering if you happen to know my issue. So if I click on and use the actual window scroll, it's beautiful, nice smooth scrolll. However, if I use my mouse pad on my laptop, it's quite jumpy. I made sure the transition was set to initial and my code looks like yours. Thoughts are appreciated! Thanks!
I could be wrong, but I think it has to do with how the browser is interpreting the scrolling when you use your mouse pad? It might be moving it in jumps of X pixels, similar to how a mouse wheel is interpreted. We could fix it with some scroll jacking to make sure it's always smooth, but I personally *hate* scroll jacking, because it makes it not scroll in the way that I'm used to or expecting.
Ahh. That makes sense. Would you suggest using something like Scroll Magic? Or do you have any animation libraries you personally like? Or would you consider that scroll jacking?
Sorry for taking so long to reply! I like Scroll Magic, but even with their demo, I get the same problem. If I scroll with my mouse wheel, the magic hat animation is a bit janky, but if I use the scrollbar on the side, it's nice and smooth. Honestly, I'm not sure if there is a perfect solution. Please do let me know if you find something that you find works really good though! (and just because I'm not a fan of it doesn't mean that scroll jacking is inherently bad and you shouldn't use it, it's just my opinion!)
Hi Kevin, wonderful video! I have an issue with my background image. Everything works great according to the tutorial but the problem is that my bg image is repeating on scroll. Any tips/advice on that? Thank you in advance.
Is your image further down your page? This will start scrolling things as soon as you start scrolling the page. If you follow the link in the description, there is an updated version that should fix your issue.
Great tutorial, only downside is that it's on jQuery and not vanilla JavaScript. Probably not much of a difference and not too difficult to look up though!
If you wrapped everything inside an if statement, I think it would work... if(scroll < X) { $.parallax--box ....... } - where X is how far from the top you'd want it to stop at... so as long as your scroll is less than the number you put, it works, but then it stops doing that once you get past that point. Does that make sense?
Haha, it's really hard to write these things out in a clear way, especially for people who are just learning. Let me know if you still looking to do this, I'll see if I can be more clear.
I'm glad you like the tutorial Caden! You should be able to use an if statement like this: if( $window.width() > 800 { // parallax stuff here } Here is a codepen as an example: codepen.io/kevinpowell/pen/ZeRwdz
No problem! One of the advantages of having a small channel is that it's easy for me to keep up with the comments, hah. Seriously though, I'm glad I could help!
how to create box like that , i mean that box are between 2 divs right ?? i tried but it always change its position , whenever i zoom in/out the page ! plz help :)
I'm on mobile ATM, so I haven't tested this, but I think If you wrapped everything inside an if statement it would work... if(scroll < X) { $.parallax--box ....... } - where X is how far from the top you'd want it to stop at...
Hi Kevin, first, thank you very much for tutorials you are doing. I am new to jquery, followedthis tutorial and managed to make it on the page I am building. The problem I got is stuttering (going back down) in the beginning while background is still near the top. I know it has something to do with my navigations and waypoint. Is it ok to send you a link, maybe you can check it. Thanks in advance, Sasa
As Nate Lentz helpfully mentioned, it might be fixed by changing the "background-position: center" to "background -position: center 0px". That keeps it horizontally centered, but will make the image align with the top of the div. If that doesn't work, let me know!
Thank you very much. In the meantime I found the script for smooth scrolling, it kinda helped. I will try with center 0px also. Thanks again for the effort you put to teach us :) Cheers
Great video! :) but I have a question: for one of my sections that uses this parallax effect the background image is split horizontally and just gets repeated after that. I couldn't figure out how to position it on the y-axis. My other section with that effect works fine. I hope you can understand what I mean...
If you want it to start at a specific position, you could build that into the jquery. So $('.classname').CSS('position' , 'center ' + '300' + wHeight + 'px') That would stop it from jumping when you scroll. Obviously change the 300 for whatever is in your CSS.
I really like the way you did it. I just got a problem, my parallax isn't as smooth as yours and even less when I start scrolling up & down quick, do you have any solution? Thanks
It could be related the the file size of the image. It's actually a pretty intensive thing for the browser to handle, and large images tend to kill performance.
so I am trying to do that what you are doing with 2 pictures for background fixed pictures in different sections, yet the second picture ends up at a halfway point, is there a solution for this?
I want to have several backgrounds with text-boxes in between. How can I do that? When I use your code, it works for the first background, but the second background does not even appear. Can someone help me please? (great video btw!)
When I made this, I thought it would work for multiple backgrounds, but yeah, it can cause problems, and that bugs me... I've come up with a few extra lines to add to the JS that should help, check them out here - codepen.io/kevinpowell/pen/YVOLGz
Thank you very much! However I still got a problem. When I apply no-repeat on the background there's a white area above the picture. Also, when the div class for the parallax is empty, it does not display. How can I solve this problem?
For the empty div thing, you'll want to use some padding top and/or bottom. As for the white bar, the best solution is to have the image be taller than the div... so if your div is 500px tall, aim for an image that's, say 1000px tall, so as it scrolls by, you have enough image that we can always see something.
Well, if you have a solid color and you do a parallax, you won't really see that it's scrolling at a different speed... the effect is caused by the 'box' moving at one speed, and the image inside it moving at a different speed.
Hi, is there any difference between making the background attachment: fixed on css and with the one you made on javascript? that's on .parallax--bg. Thanks
I take a look at background-attachement: fixed at about the 1:45 mark. It works great, but it makes the image locked in place (it stays the same, as the rest of the page scrolls). With what I do in this video, the image still scrolls, but at a different speed than what the rest of the page is scrolling at.
Hi, yeah i noticed that i just couldn't find my reply to correct my comment. your playlist is awesome i subscribed btw. looking forward to see other parallax effect tutorial PS: i used this tutorial on applying the effect instead of using the "background-attachment: fixed. good work
For some reason your comment got classified as 'Likely spam', so I had to approve it for some reason. Thanks for subscribing, I'm glad you're enjoying the videos!
But what if I put this section with a parallax effect somewhere else, for example in the middle of the website. A background position is moving according to the scrollTop, therefore its gonna be ruined. Do you have any ideas how to make this universal?
Start simple. If you really have 0 experience, I do have a series that looks at the very basics. Be ready to not be able to get things exactly as you want them to start. What type of site are you making for him?
Kevin Powell Yeah i have no knowledge, I will be sure to check out your series of the basics. Im trying just to make a Simple website in which there is a Gallary,Contact,About. Maybe a recessive Page?
I totally wish I could go in and edit my video to fix this! Thanks for pointing it out though, I'm going to keep this pinned at the top in hopes that others see it.
Hrm, not sure without seeing the code. Could it be an issue with linking to jQuery? Otherwise, I can't really say. If you put your code in a jsFiddle or CodePen I'll check it out if you'd like.
I really appreciate that, but I figured out the issue. It was strange, everything worked in CodePen but not locally. Turns out I had overflow-x:hidden; in my css which was causing the problem. Weird.
Thanks a lot Kevin. One last question. The parallax is smooth when using the scrollbar however its somewhat jerky when using the mouse wheel, is there a way to correct this somewhat? Thanks in advance.
Not really (that I know of). It has to do more with the way the mouse wheel works, jumping a bit at a time, instead of moving pixels slowly. A magic mouse on a mac, or even some other mice would probably have a smoother experience. You could 'scroll jack' as well, where you use JS to control how the scrolling works when someone uses the mouse wheel, but that personally drives me nuts, because it changes how I expect my mouse wheel to work.
It would be better if the black box appeared from the bottom to the top as u scroll...cuz otherwise the landing page looks ugly when the black box was some what popping up from the bottom....while scrolling the black box gains default position slowly it would look sexy 😎😎😎😎😎😎😎
8:51 *A simpler solution:* *:not(.parallax--bg) { transition: all ease-in-out 250ms; } This will apply a transition to everything _except_ for the class .parallax--bg 😉
I should work on any device, though in general, it might be best if it doesn't work on mobile anyway, except for high-end phones, it might cause some performance issues.
Kevin Powell I have the LG G5. I open my Webside in Chrome. It works but not when i scroll. Its a delay. Like a transition. But i dont have transition. On Desktop this works perfect. On mobile its legging horrobile. Here my Side. Go to Portfolio www.marcustutorials.tk Its not optimized for mobile. Dont be scared, im working 😂 Sorry for my bad english im from german :)
Definitely works, but it's not exactly the same as what I'm doing here, where both are moving, but at different speeds, as I also do it with a div, instead of only with background-images. I do think background-attachment: fixed is underused though!
