Vanilla JavaScript Parallax with just a Few Lines of Code

skl.sh/designcourse18 - First 500 people to sign up will get their first 2 months free!
Today's Question: Is your head bigger than an airplane? (See video)
-- Many of you have requested that I cover certain topics in straight-up JavaScript (vanilla), so for today, I'm showing you how to achieve parallax greatness without relying on any scripts. You'll find it's quite easy and perhaps discover that you can do much more.
Codepen for this project:
codepen.io/designcourse/pen/O...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Join my Patreon! / designcourse
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Sub up! To answer today's question: My head isn't bigger than an airplane, but if I don't take control of myself tonight and drinking for new year's eve, my head might be as high as an airplane!

[@cosmicdarkmatter1128]

I know this was over a year ago. But in answer to the question: No, my head is not as big as an airplane. But my mind/brain CAN fly like an airplane. & That, my friends, is what counts....

[@LabhamJain]

Your Child Spotted At 0:35 😄😄😄😄😄

[@AntiAtheismIsUnstoppable]

I think you should not listen to scroll because it is fired constantly and it is not good for performance. The new way is to use intersection observer, which also works asynchronously.

[@robithnurielhaq]

I try to make this code work for the other divs far below the viewport, because it messed them up (their transform attribute has already been modified by scroll even before entering viewport). I've tried using IntersectionObserver and getBoundingClientRect(), but still can't find a way to make it work.

[@amey7064]

.myhead { width:100%; height:100%; }

[@mysto9115]

It should have been an id not a class tho

[@calmsh0t]

you forgot overflow: visible;

[@farooqueabdullah5098]

You forgot to mention one thing .myhead ::before::after{ content: " null " ; }

[@hughhe4209]

#myhead { width: 100000000000000000000000000000000000000000vw; height: 1000000000000000000000000000000000000000000vh; }

[@drapala97]

Lmao

[@krzysztofmusia8665]

This is the best parallax tutorial i have found on internet. Thank you so much.

[@nagisaando6546]

I had been browsing hours to find good tutorial and this is the best one, you saved my day, thank you!

[@alexgochenour8740]

This is such high-quality content. I can't get enough of your videos. Thank you!

[@arthurlara7343]

Now we're coding like a charm! Great videos you've been putting there, hail from Brazil!

[@imtanuki4106]

Thx for a tut that's to-the-point, with end state codepen provided, great pace. Will definitely check out your site.

[@mitchjohnson4714]

Thanks so much. I keep looking for stuff on parallax, and it doesn't do a good job of teaching me. You do an excellent job of helping me to understand the concepts and the programming behind them.

This was amazing. It makes me excited to build something myself to try it out :) And my head is huge, I have trouble finding hats that fit but thankfully it's still smaller than an airplane.

[@leoktupq]

Happy new year man! Great videos!

[@arturmuellerromanov4438]

Best tutorial for parallax scrolling out there. Well done.

[@82Dragan]

Awesome stuff Gary. Keep that way!

[@ibernohoffmann5427]

Hey Gary, Happy New Year man... Thank you so much for all your afford to share knowledge, experience and code. Appreciate all your content, personal I learned a lot with you. Thanks 2019 times...

[@charlescampista9384]

Simple stuff like that can be used to create beautiful things, Thanks for the video and a happy 2019!

[@everestgjonaj]

Thanks a lot for your videos and happy new year!

[@mohitaggarwal432]

Happy New Year!! another cool video.

[@erwinmesi]

Happy new year Sir Garry!

[@brendensong8000]

What a great tutorial! Thank you for sharing!

[@JacobChenn]

Nice tutorial, thanks. One thing that bugged me was the query selector to get the element was inside the event listener rather than outside so it had to re-get the element every scroll event. Worked perfectly but could be a performance gotcha at some point 😃

[@techwake360]

that's it what i m looking for. Thankyou so much

[@carlcaya285]

Happy new year!!cheers

[@hernangarcia77]

Simple example. Easy to understend. Thanks!!

[@danielChibuogwu]

Thanks you, for this video it was just what I was looking for

[@Gelu84]

My head is as big as a really small airplane. Thanks fir the videos, keep it up and happy 2019 for you and your family!

[@sarthakdandotiya]

This is amazing, beautifully explained!

[@skhubs]

Happy new year sir and amazing video😎

[@sighiggins8024]

Best Teacher, thank you!

[@fuddyduddy]

Gary did not mention about the scroll bar problem due to the continuous scrolling down lax. You would be unable to scroll to the end of the web page. Anyway, thanks for sharing.

[@alexandros-markovits]

Very cool video! Happy new year :)

[@pashapasha845]

Your children are great and your content are very useful. Thanks!

[@antonpolishko5012]

Thanks a lot for this video! It has helped me in a real project.

[@Dipendu12101992]

That was truly amazing

[@freshmotiondesign]

thanks! very helpful as allways!

[@kirillpenkin1535]

So cool! I learn so much from you!) In this particular case thought, I have a few suggestions: - It's the ideal case to use position fixed on the circle - It's easier to use percents as transition values since we can access viewport height on window as innerHeight const parallax = `${(window.pageYOffset / window.innerHeight) * 100 * 5}%`;

[@sashatv138]

Nice and very useful! Thank you.

[@aleksd286]

Wow, insightful video. Thanks

[@frank.boerner]

Nice, happy new year! btw: yes, my head is bigger (:D)

[@Johnjohn35961]

super useful thanks!

[@ed1849x]

AWESOME! Thanks man

[@nzedn1527]

Hi, I like so you tutorials so much, you can explain things and make them easy to understand, can you make for us a tutorial of "how to apply parallax effect when the element is in viewport" ?

[@manoj1505]

Thank you, guess my voting in last video for what in 2019 should we learn, so here you with vanilla JavaScript yay :)

[@sueholder703]

What I love is that you explain as well as show how to do it. Awesome! Cute kiddies and kitties too. :) Uhm yes; but only if the plane is at the right position in the viewport (window).

[@alexbaskov]

different guitar on the wall now. looks like some Ibanez prestige. and you have really nice tutorials, thanks!

[@DesignCourse]

I wish, that's actually a lower end Ibanez RG470AHM. But yeah, I'm getting rid of the white one that used to be there (RG8, what a waste of $) because my new Charvel DK24 arrived a few days ago.

[@mh5854]

The best teacher thanks a lot

[@siriusgd4753]

Great video! Mine's as big as the "Spruce Goose"... Really old and has a really hard time getting up in the air. Cute kids and kitties.

[@seanpheneger6632]

A model airplane maybe, thanks again for a great video. Love the channel. Btw, is there a particular reason other than habit that you are using var in place of let?

[@akashtakawale9074]

thanks enjoyed that !!!!

[@ginoxorion]

Very helpful! thanks! I'm still kinda beginner in JS, can you explain in a video case uses of these loops? I "think" that I can understand how it works in this example, is to target each ".scroll" by the index length, right? But I don't understand how the increment works here and why exactly use a for loop. Thanks anyway!

[@esportsnexus]

Hey Gary, wish you a happy new year 2019. Make something on React/Redux/Thunk

[@AlexLightmanTV]

Thank you!

[@dburnside22]

My head is and is not as big as an airplane. Depends on the perspective... Great videos! keep it up! thank you so much

[@enzocosson]

really cool tutorial ! :) but how do you activate the parallax effect on an element only when it is visible, because if the element is in the middle of a long page, it will have already started to scroll without so we can see it

[@xstrafez_c2017]

Very useful, tysm c:

[@ouza1430]

Happy new year

[@jvoynar5826]

Thank you! If I were roughly 7 miles away from a commercial jet, my head would appear the same size as the airplane.

[@marimuthunagappan5344]

Awesome thank you

[@sethm3194]

Big than an airplane. Is that a relative term? Love the tutorial.

[@franciscomontesgomez2067]

Depends on the z-index and transform functions you chose!

[@rodrigoorellana2389]

very nice !

[@mikaeleriksson1602]

Awesome tutorial, thank you! And to answer your question, my head is bigger than some airplanes. Bigger than some. Does this parallax effect work in IE11? I struggled to make parallax work in IE11 a few months back but eventually gave up and just used "position: fixed" instead.

[@codejoke9976]

amazing!

[@leoxu7826]

Thank u gud sir

[@DevPalliSri]

Thanks for the tutorial. But if I add empty section above parallax section, than output is not good. Any suggestions. Thanks.

[@KrisAkaVenno]

Yes, my head indeed is Boeying 777 Happy New Year

[@constantinross7911]

Hey Gary, I used to use the transform3d for parallax effects as well. I just recently tried out matrix3d and I found it looked better and smoother. Do you know anything on which is better or which one is more friendly for mobiles etc? I'm 16 and just getting my first paid clients, so I am not so sure about what is the best.

[@adimaralimuddin96]

my head is bigger than my brain - thanks for a great toturial

[@dbedoyat]

Thanks bro, nice tutorial. How i could stop the infinite scroll or stop the event at the certain point of the page? Salut!

[@leoxu7826]

Oui Oui Bonjour Baguette

[@MrRedhawk16]

Wow good stuff

[@flyinghead1147]

YES, IT IS. It is HUGE.

[@codeIMperfect]

Thanks for the great video! It works perfectly on PCs but for some reason, it doesn't work on phones. Any suggestions on fixing that??

[@habibi9497]

tag is a bad idea cuz screen reader recognazes as list-up items. How about using instead?

[@chicledomenta]

my head is as big as a Torta de milanesa con queso, great vid

[@arthurshaidullin7981]

Thank you for great lesson, you have great kids )

[@sSJunSs]

Thanks from korea 😁😁

[@titusgzz]

yes

[@borealfox]

Hey! How can I apply this to an image? What I'm trying to do is to make an image bigger inside a rectangular div so that when I scroll the image inside gets pushed down a little like in the video but not the div. Because the image would be bigger than the div, the image would be coming down but we would not see any white space increasing! Please! This is the best parallax tutorial I've watched since I started to make that effect like 3-4 hours ago. Also, the mentioned image is small, all the tutorials show always an image that covers the entire width of the page or something like that. My image is just on the left side of a paragraph. The size of the div parent is "245px X 245px". Some examples of that effect are seen on the Soundcloud app where the covers have a parallax effect.

[@waldemarenns4874]

Thank you Gary, i love your videos. Please keep going! Greetings from germany ✌

[@louddude]

any of those parallaxes work fine with mousewheel jumps?

[@saandesh32]

Does the paralax become roll-lax at the end ?

[@binihalex8097]

Cool video. There is no if by the way. My head is as big as an airplane by nature

[@michongoma7598]

Happy new year! my friends usually tell me my head is very big but i guess not as big as an airplane. I have proof :-D

[@frederickobeng-nyarko2868]

12:56 if you're watching this in 2020 please use template literals... I realized '+rate+' didn't work for me

[@mjkodonk]

Awesome :)

[@digitaltrash]

I prefer to use the getAttribute function instead of the dataset function

[@marlonrei5083]

Hey, thanks for the Tutorial! I have a quick question, i tried it myself and when i start to scroll, every .scroll-object on the page gets transformed. Is there a way that a .scroll-object in a section only starts to transform when the section comes into view? Cheers Jakob

[@psilocybin-]

Yes, you can use IntersectionnObserver

[@booby_trap777]

Kids...let me Answer your question please!!! Yeah, my head is even bigger than an airplane. Everybody should have big flying heads in order to dream, to learn and share knowledge, beauty and good ideas!!! Thanks Dad for your great class and Thanks Kids to make our KZbin class much more friendly and lovely. Apreciate it big time! All the best!

[@ThunderBow98]

Is this more or less how Parallax js libraries are made?

[@aarshpatel9240]

has there been any updates in css or javascript? I am following word for word but the parallax effect is not working.

[@hamza201183]

Wouldn't it be better to query-select the targets outside of the event-listener function?

[@Nikki-os2df]

The cats are everything.

[@AndrewTonneman]

Nice cats!

[@mechmarvel9031]

10:10 the text looks familiar 😂😂

[@jonaldpenpillo5724]

How to limit the scroll? it has endless scroll

[@telekarma]

A very good question! My head is as big as a human head sized airplane.

[@MuhammadAdamFirdaus]

So, in this scenario, it's easy if we want to make disappear on scroll. How about if we want make something translate3d(0,0,0) on current viewport active and put this effect in the middle of page?

[@prateekbhardwaj9943]

how do you get time to learn and play electric guitars as a software engineer?

[@karthickrajalearn]

Vannila is also javascript javascript libraries

[@crs]

Are you kidding me? Who makes such noob statements? Either you don’t know what vanilla Javascript means or you don’t know what do we call as ‘library’ or ‘framework’.

[@lukor-tech]

I am sure you've responded before, but.... What is the beauty hanging on the wall? Ibanez?

[@lukor-tech]

Also: adorbs cats, cheers for the kiddos and check what happens when you scroll too much ;>

[@maskman4821]

lovey kids, cute cats, cool project

[@robithnurielhaq]

This only works for topmost div, anything under the visible viewport will act erratically. the further down from the viewport, the worse it gets.