FINALLY a KZfaqr that understands what parallax actually is.

Liked! Can't wait to follow along. This was incredibly easy to follow along! I love parallax sites. Making one for my music project and spent about 3 hours on it yesterday, my buddy was blown away.

I just tried it out (Nov 2020) and all still working magnificently. Thanks!

Thank you so much bro! finally a did with just two line on code

For those having problems with the second example make sure the syntax of your script tag is correct. Use NOT src="parallax.min.js" .If you're not used to running javascript on your websites this can be a rookie mistake and the console won't give you an error.

Thanks a ton. This is the easiest way ever. Bootstrap sucks a great deal of time in figuring out. CSS is always the best.

My image was also not showing, turns out I was not applying the path correctly. My parent directory has the folders: "images", "scripts", "styles" and the file "index.html" in it. The "index.css" file which is what the css reads by default, is in the directory: "parent/styles/index.css". Since the image is placed in a directory above that of the css file ("parent/images/image.jpg"), the needed path for the image is this: "../images/image.jpg", where the two dots indicate that CSS should start the directory from the parent folder of the current running directory. The line of code in the end should be: "background-image: url('../images/image.jpg');" without the "no-repeat" and "center". TL;DR Use this: background-image: url('../images/image.jpg');

Great video! Easy to follow and allowed me to create a beautiful parallax website. Just a thought, you should include info on how to make the parallax image responsive; it was a bit of a challenge trying to figure out how to get image to scale for mobile screens.

Cool and simple feature

Awesome video that explains everything in depth and fast! Comparison at 4:30 and 9:12 would be nice side by side.

This was super helpful, thank you so much

Hey man, just wanted to say thinks for this vid. I've been battling this all day and your vid finally helped me solve it (the z-index thing haha)

Thank you, for this tutorial, I already had this good script, but honestly, I was not pretty sure how to run it. Now, it´s working neatly! THANk you!

Thank a lot sir... Very easy way to get this effect..

Sick!! I'm entering design from the back-end (python - flask/django), and this is exactly what I've been looking for. In fact, I was specifically curious as to what the "parallax" effect was that I've seen so much of lately, and lo and behold you've mocked it straight up here. Thanks a ton bro, and I'll be sure to check out the rest of your vids. Keep it up!

5:16 second part

thx for saving my life

Thank you so much!! Great tutorial, easy to follow and everything explained.

it doesnt work for me :/ altough the css and html parser cant find an issue.

i love you man so so much 2020, this help mi a lot

awesome!!! simple and straight forward tutorial. thanks a lot

thanks this helped out a lot!

if i could, i would leave a thousand likes for u man, thank you.

Thanks for this. I just wanted that simple css parallax. I wasnt aware it was so simple!

Excellent video, easy to follow, thank you!

Nice! Thank you.

Great, thank you!

my elements are placed behind that parallax image , i have given z-index correctly but still elements are placed behind that parallax image. I have given data-z-index="2" and the elements that i want to over the parallax image is given 999 value for z-index, then too this elements are placed behind the image

omg tysm i liked and subbed u r grt

Hi, when i write this code i have two texin on hight . text-text-image not text-image(beetwen the text)-text can you help me?

That was super easy to follow and simple to replicate! Thank you for sharing :D

Worked perfectly on the first try. Thank you!

The CSS solution doesn't work on older Android devices and breaks on mobile Safari. For more check the property on "Can I use". Cheers!

I've followed along step by step, and yet the second example doesn't work in any capacity. The only thing different is the file path, which I'm quite certain I've gotten correct. The image is also a png instead of jpg. Any help?

Thank you for taking to time to show us that, it was very helpful.

I just don't know what to say thank you, you helped me a lot :)

I can't find Index html in my default templates which dir is it in?

So good Thank you guy

Is this distorting the photo? It doesn't look like it, but when I do it, it seems like it's distorting the photo.

If the image doesn't appear make sure you're referencing the parallax.min.js file and not the folder its in

Very simple waouh, thank you man, God bless

does this work in Electronjs ?. My image does not appear and I follow all the steps

Thanks for explaining in a nice way, I just want to know how to make it full width as you can see your examples were also not full-width pages? Please help.

When I open the website with liveserver, it works fine. But when I open the .html page from its folder, the image doesn't show up. Same case when I host it online. data-src-img doesn't show. Any idea how to fix this?

Thankyou so so much!

thank you for video !

very helpful thank you a lot!

I just loved your video, liked and subscribed. This is what I really looking for to learn! Thanks Man!

Help. It only shows half of the picture

WOW!! Simple and to the point! thanks

Wow..it was awesome

Thanks, man. Really appreciated this.

How do you use the negative z-index to have it in the background? Is it just the container that blocks it?

thank you thank you thank you!

Excelente, muchas gracias por compartir !!! Thank you very much for your help !!!

THANK YOU SO MUCH, YOU'RE THE BEST!!!

Thank you kindly, this tutorial was exactly what I needed!!!

*Man great tutorial

Dayum, this is interesting bro

The problem with Parallax from the research I have done is that it doesn't work with SEO. This is due to all the content being on one page as opposed to multiple pages as in traditional design. While this may be great for mobile, killing SEO results is a very bad idea. This is like the old days when we used anchor tags to reference different parts of a page through the #.

Hi, I think there is a problem with the jQuery plugin and the other scripts running on the page. Because when I tried all steps I got a blank page and nothing was there. Can you please help me with this

Thanks , Thanks very much .very good lesson ....

THANK YOU

Image never shows up. The container for the image holds the correct width but no picture. I even added the z index.

Bice video man. Thank

Wich plugin did you used in Atom to create a div with this syntax (div.className)

Yo good one,and also easiest Thankyou really appreciated it🌸

bro my hero is you

can we add more smoothness in the effect or it would be the same as it is provided in the JS file ???

NICE

ty soooo much!!!

Im a little bit confused - in the first example the back ground image changes whenever it appears. How have you done this effect?

got all the way to z-index, using 1 as my value does nothing. what should i do?

the position of the image is getting fixed to the bottom while scrolling...what am i doing wrong ??

Hello, is there any kind of way to get this effect on mobile. Because every time I tried it the picture was only enlarged.

I'm using Sublime Text Editor, I can't apply the CSS to the HTML. Can you help me please?

So I have the jquery before the parallax and the parallax says "Jquery is not defined"

THANKS THANKS THANKS THANKS

awesome

since writing parallax effect by ourselves is very easy, why do we need to import a plugin parallax js file?

how to do that image url ?

can you jst help me how to add image along with txt as u do ?? I really find it difficult to adjust image in those sections....

Hello I've a problem that parallax background is stack. it not scroll.

please help.Why my img does not appear?

This was just what I needed. Thank you.

Short, sweet, simple great video 👌

its really osm tq for this video .....keep posting more

I'm kinda new to this, so what is making it switch the images? I only saw you put in image0.jpeg. Does it automatically use all of the images in that containing folder? FYI, the last time I did HTML was 1997, so I'm a bit behind.

How do you make it bigger? Like how the website has it.

Thank you!! you are awesome bro!

it's really cool. Very useful. Your channel is great.

How can I add another photo?

How can we perform the same scroll along right instead of down

thc for the vid but when i do this for a picture on top my pic doesnt center any tips

THANK YOU!!!!!!!!!!

thanx buddy

Sir Images does not show I follow everything whatever you done in video

how to do responsive this page ?

how can i add it on WP? via js?

You are the best. Thank you for the video(Ты лучший. Спасибо, за видео);