Parallax Tutorial - Scrolling Effect using CSS and Javascript
HTML-код
- Опубликовано: 6 авг 2018
- Learn how to create a Parallax effect using CSS and Javascript. We are going to create two different types of parallax effects.
Tutorial from GTCoding. Check out the GTCoding RUclips: / gtcoding
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org
![Roddy Ricch - Survivors Remorse [Official Music Video]](http://i.ytimg.com/vi/J5IeFzr2GgE/mqdefault.jpg)
I wish I watched this video 5 years ago.. Super simple and clearly explained. Kudos, author
First of all, Thanks, I've been looking forever for a simple tutorial like that. Who doesn't love parallax. But I noticed that that it only works to the first image. But I tried a few things and got to make it work in every image we wish the effect. Here's the code:
const parallax = document.querySelectorAll(".parallax");
window.addEventListener("scroll", function() {
let offset = window.pageYOffset;
parallax.forEach(function(prllx, i) {
console.log("Parallax " + i + ": " + prllx.offsetTop + " / Window: " + offset);
prllx.style.backgroundPositionY = (offset - prllx.offsetTop) * 0.7 + "px";
})
})
Sorry, do not consider the "console.log" line...
this needs to be at the top! exactly what i needed thank you sir
Thanks man!
I tried this code and it didn't work for me, not sure what it is am I doing wrong? any suggestions
I worked it out I didn't realise that the period referred to class rather than id
Awesome...awesome tutorial. No query, no plugins, just plain old javascript. I take/took courses on Udemy and all that, this was by far the best little tutorial I've seen in a long, long time. This right here is why I love to practice web design. Thank you.
i watched your tutorial on wordpress theme devolopement 4 times by now - you helped me so much!
and now this is so simple, well explained, concise and just perfect as well.
Also it is so funny how i am sitting here at my desk in germany in the morning (it is not even full daylight and there is no sound outside what so ever) and listening to all the foreign traffic sounds in the background - always makes me laugh and wonder thinking about the different worlds we are propably living in - and get connect via such an abstract thing as parallax via js.
In short: Thank you very much!
I have watched lot of videos for this effect, but u made my day rock with simple and very means very less css code..... Awesome tutorial... 👌🏻👌🏻
Crystal clear explanation. Thanks!
Straight to the point. Great tutorial. Thank you very much.
It was so simple and I was banging my head for a simple explanation.
Perfect Tutorial, thanks a lot!
Learned so much in just 10min! You rock dude! Thankyou for thiss vid ❤️❤️❤️
Btw i have a question. Can i use a video instead of image in the parallax background?? Thankyouu ❤️
Very nice tutorial, well done in explaining the CSS and JS ways of doing!
This is a very well explained video, thank you!!
Thank you my friend! Easy as pie, great tutorial!
thank you for the great video, very easy to understand and follow as well!
Perfect tuto and explanations. Very simple way for this effect but not for responsive. Thx a lot man. (if you have a responsive solution I take it 😉)
Liked! Simple and easy! Thanks!
thank you! a simple and practical tutorial
Awesome, thank you very much for this tutorial!
Thanks for video guys!
Great, easy to grasp. Keep it up
Just perfect. Love it
Great explanation. Very concise.
your just simply the best.............easy and simple
I LOVE YOU!!!!!! Thanks for this. I have liked and subscribed already...
Very well explained ! Thankyou so much.
Thanks, very helpful!
awesome tutorial!
You explain that so well~~
Your work is wow❤️
Thank you very much! Regards from Bavaria.
Are there any browser compatibility issues using this method as compared to using Jquery or other libraries?? Otherwise, thanks for the awesome tutorial loved it
nice concise little demonstration...with an authentic little touch of some city ambience in the background. 🙂 🚗
Great video thank you man
Thanks God. Thanks to you all guys there
Very nice tutorial, the content also the presentation, well done
well done tutorial!
Thank you! I am now a huge fan! So clear!!!!!!!!!!!😇😇😇😇😇😇😇😇
does anybody know how to add text below the "DIV 1" section withouot breaking the parallax effect? i tried
insert text
but the effect breaks when it is out of the tag and throws all the other out of order. when i put the tag inside the div the text appears to the side of the text and not below even when i try to break it with
OMG!!! Thanks so much! I watched other videos where it didn't work, but your method worked!!! Thanks very much!!
thank you very much best tutorial out there
Great teacher❤️❤️💓💓
Finally a video about this that's easy to understand and with short code, thankyou!
Cool implement! 📲
thnks man ...what a nice explanation
very helpful video thanks a lot>>> :)
great tutorial
:)
Thank you 😊
Very simple and helpful, but how do you make it less jittery if you're using a large background image or have a lot of content?
Have you find any solutions to this issue?
Awesome! Made my webpage look so much better. Could anyone help me with just one thing? Is there a way to disable this specific code for mobile devices?
Still haw questions, with this function I used to make new function for each Id, because getElementByClass returns array, so how to make it for class ? And strange thing , I have exact same code and my parallax moves in backward direction so I added -before multiplier ? but still have unanswered questions.
How do i make this work on only specific sections ( section ID="") etc. This tutorial is only for 4 specific DIVs, which isn't as convenient when working with multiple sections that are prebuilt. When I start this tutorial and get to the ( div:nth-child(1) ) , this changes every div background in my document.
Nice tutorial
Thank you so much for sharing this amazing tutorial :) I was wondering how can I also make the background image not to repeat itself while scrolling? I once tried to place the parallax div in the middle of the page, however, when I apply the js to it, the background image always repeats itself, and when I set background-repeat: no-repeat in the CSS file. The background then disappears :(
Same :( Did you find the solution
Try this:
parallax.style.backgroundPositionY = (offset - parallax.offsetTop) * 0.7 + "px";
@C7_ GHoST_YT damn sure i did but i don't remember. I just remember that it was something simple and stupid. Sorry for not being much of a help, but i hope you find your answer 🙏🏽
Thank you very much ! CU
Thank a lot
very very helpful, wish your success
wrr
thanks man.
o man, perfect for me:)
thank you
very cool bro
did the same as in the tutorial but I got an error of 'const'. It says:
"expected an identifier and instead saw 'const"
and
"Error: Parsing error: The keyword 'const' is reserved"
I tried to put it online and it works despite the error but will the error have an influence on my website after a certain amount of time?
Can you please help me remove that error?
My code in the 'js-file':
const parallax = document.getElementById("frontpage");
window.addEventListener("scroll",function()
{
let offset=window.pageYOffset;
parallax.style.backgroundPositionY = offset * 0.7 + "px";
})
Спасибо)
I've tried using this for my project using your div 1 and 2 only. However, the image seems to immediately zoom in when scrolled and gets stuck at that area unless the page has beem refreshed. Only then, will it display the full image. Would you happen to know what went wrong with my coding?
how do I do it for 2 or more elements on the page?
How many Parallax effects on one page, in particular the effect of the content gliding over set images?
How could you also create the same parallax effect for the second picture with making the picture repeat when you scroll down?
I had the same question, but solved that. You just need to reset each image offsetTop to the scrolling.
const parallax = document.querySelectorAll(".parallax");
window.addEventListener("scroll", function() {
let offset = window.pageYOffset;
parallax.forEach(function(prllx, i) {
console.log("Parallax " + i + ": " + prllx.offsetTop + " / Window: " + offset);
prllx.style.backgroundPositionY = (offset - prllx.offsetTop) * 0.7 + "px";
})
})
Sorry, do not consider the "console.log" line... :D
Go to the css for that div and add the following: background-repeat: no-repeat;
@@FlavioSantosdeAndrade bro I have tried your code it works but sometimes images just out of the place
good tutorial good tutorial good tutorial
Thanks
great
Thanks for video but
you can simplify this thing by just background-fixed without any javascript. Every div can work as expected
Reynaldo Navedo yeah I agree.
Mobile devices also don't support this feature
I did the exact same thing and structure but the parallax for the first div item just doesn't work :(
I have a non related question... How are your code suggestions so fast? For mine I have to wait a bit (sometimes more) before they show up 😱
wrr
thanks
How do you get this to work for 2 image on the same page?
in this tutorial he applied the parallax effect to the dom elements with the parallax id. So maybe if you would want to have the same effect to work on multiple elements then instead of using id as a selector use a more common selector? class? element type?
My background always jumps right at the beginning when I start scrolling and then works fine...any suggestions how to get rid of that jump at the beginning?
you probably gave it background-position: center.
don't give background-position: center;
nice
I keep getting "Cannot set property 'backgroundPositionY' of undefined" whenever I try the parallax. What's going on?
Do you have a link to your code?
1.) did you set the Id?
2.) did you link the js at the end of the body?
copy the first line of code that grabs the id at document.getElementById into the function that should fix the problem
Great
3 years of university and now I discover how simple this is... I feel dumb
Don't feel bad. I did the college thing, graduated, and learned this on youtube. Hey, at least we got it, my friend.
please kindly using the more video background in parallex, provide the tutorial
Thanks1
im searching for this for like 2 hours, thankyou bro
This does not work when a background image is positioned center.
If we put parallax effect in middle of a page its not working properly pls help
yep having same problem
util gracias
const parallax = document.getElementById("banner");
window.addEventListener("scroll", function () {
let offset = window.pageYOffset;
parallax.style.backgroundPositionY = offset * 0.7 + "px";
})
index.html----------------
Div 1
Div 2
Div 3
Div 4
CSS-------------
* {
border: 0;
padding: 0;
margin: 0;
}
div {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
width: 100%;
height: 100vh;
}
h1 {
font-size: 60px;
color: black;
padding: 8px 24px;
border-radius: 16px;
}
div:nth-child(1) {
background-image: url(../images/1.jpg);
background-size: cover;
}
div:nth-child(2) {
background: brown;
}
div:nth-child(3) {
height: 400px;
background-image: url(../images/4.jpg);
background-size: cover;
background-attachment: fixed;
}
div:nth-child(4) {
background: aquamarine;
}
main.js---------------------------
const parallax=document.getElementById("parallax");
window.addEventListener("scroll",function(){
let offset = window.pageYOffset;
parallax.style.backgroundPositionY=offset * 0.7 + "px";
})
how to do this in react.js?
the parallax doesn't work. i've copied the code letter by letter aside from the font and the image, and everything else works except for the top parallax. for reference i use chrome, but it doesn't work on explorer either.
have you linked your files properly,
give me your code link maybe i can help...
Thanks for tutorial. However you should be more consistent- You are using both single and double quotes for strings etc. Parallax although very easy to implement can ruin website’s performance
Anyone having issues with a choopy scrollling effect?
it's probably because of your images size are too large, resize and compress them according to your use..
and don't give background-position: center;
I had to use nth of type, not nth child, to get it to assign the right image or colour to the right div, not sure why... I copied exactly, it always treated div 1 as the third child. My understanding of it maybe poor, like why is the first div the Parent? I could beleive it treats maybe head or body as the parent, but that clearly didn't happen for the tut and I didn't see anyone else report it
assuming this doesn't work on ipad
why no source code ;(
Now div display: flex does not work anymore. You have to use flex instead of flex, inline-flex.
Thnx...but he part did not work bro
Js
this code just not runing correctly .
sorry code is runing correctly
Best!!!