Parallax Tutorial using Parallax.JS

goo.gl/BBse40 - Design + Code a Professional Android App from Scratch
**Join DesignCourse Premium for 1-on-1 Design Training with Me:*
goo.gl/Hc7Flm
Project Files: www.designcours...
Learn how to integrate a parallax effect using the popular Parallax.JS: wagerfield.gith... - It works with your mouse cursor in a desktop environment and alternatively uses your smart device's gyroscope to affect the movement.
Sky Background Image:
cathleentarawhi...
Follow us:
Facebook: / designcourses
Twitter: / designcoursecom
Google+: plus.google.com...
Dribbble: dribbble.com/de...
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
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!

[@csumityaday]

Cursor driven interactivity,, wow that's what i'm looking for thank you so much for introducing it.Within 21 min you summarize the Parrallax.Js from the scratch great.I'm always keen towards high level user interactivity and it is one of them.I have just enter into the ocean of UI and your tutorials are helping me a lot.Thanks again for making these wonderful tutorials and i'm looking forward for your next video.God Bless You ! Take Care & keep smiling ^_^

[@DesignCourse]

Thanks for the feedback.

[@csumityaday]

DesignCourse Make few more advance examples..

[@ChrisFotosMusic]

yo all my sickest front end skills are from watching your videos lmao, people think I'm a genius because of you my dude.

[@smitefau]

just some little workflow-tips: instead of using ctrl+sift+D to duplicat you could use ctrl+J. so no window pops up that u have to click or hit enter for to get rid of it. to get auto-select black arrow press ctrl and left click on your object you want to select. and last but not least for image-size you can use ctrl+alt+i instead of clicking ;) saves a lot of time bro (Y)

[@Dephorek]

omfg dude, you explain everything step by step, somethink awesome. Thank you a lot for learning in easy way. :)

[@IamGretar]

Nice tutorial, I like seeing something unique like this.

[@Shivamserenity]

best tutorial on parallax on youtube.....

[@Slash27015]

Notepad++ is a good free alternative to Sublime Text 2 and features the same, for those of you out there wondering

[@JerryMain1]

Thanks man great vids! I subscribed. Cheers from Bulgaria.

[@landahoy5829]

Thanks for this. Going to dive into your other tutorials

[@sankalpbhamare1850]

I like your channel so much , because of u learnt about many things

[@MarshalJose1]

Nice tutorial. I think data-depth for logos need a flip, so that large-logo will move faster than small-logo to get the right feel

[@jigsaw4770]

great tutorial! really appreciate the time invested!

[@Zofjap]

Great turorial!

[@herr_pouya]

Really amazing tutorial and a great tutor... Danke!

[@mikekaperys24]

Awesome tutorial, but instead of centering your images with text-align use display: block; and margin: 0 auto; - it's better practice since text-align is for strings

[@akiij9493]

damn bro this was my first video i saw of parallax and i have to say that was fucking well explained and demonstrated. it looks fucking easy just gotta up my photoshop skills now :) thanks for the upload and great job on the video!

[@seko6935]

Hey thanks for the video! helped a lot! subscribed! greetings from Hamburg/Germany!

[@marcinborkowski9567]

Thank you man ! You save me from the long confusion... I have one question: is there a way to lock movement only horizontal ?

[@juliabaguiar9124]

Awesome video! Thank you again :)

[@bikrampandey475]

me watching this video after 7 years: You noob

[@ccoquet]

Nice tutorial, i thought it was gonna be harder to learn :P

[@shabaddahuha]

for those that want a good and free alternative to sublime text 2, I suggest Brackets by Adobe :) It's really good

[@youfirst.]

Great tutorial as always :-), Could you by any chance show us how to make word template and ppt template many clients are asking for these things as part of identity package. Thanks

[@amitsharma-jb4kq]

Awesome, it helped

[@dilshanmadusanka2317]

your project file link is not working

[@impulzer1596]

This is awesome and gives lots of inspiration! But, I have one problem and thus a question. How do you disable the parallax.js/or the effect on mobile devices, in particulair when you touch to scroll? It looks so beautiful on a desk/laptop, but the effect is hidious on a mobile. Or is there any way to work around that, besides disabling it? Like, display:none and use a new block for mobile view?

[@Gigamlat]

Cudos for the video, but I'm interested in a little more... Could you direct me where can I learn to make the parallax movement as in the Matthew Wagerfield example (specifically the background move also when mouse is moved left-right to the edge of the screen)??

[@cursosdanilo]

the best tutorial, thanks for shared. =D

[@Jlurieful]

I created a div with links under my "bg" div, but I can't click on the links. When I hover over the bottom div the parallax effects on "bg" is still happening. How do I solve this?

[@LeandroCavalieriwinsite]

Muito bom os seus vídeos!

[@jenniferhuang8152]

Do the project files for this tutorial still exist? I can't find it anymore on your website

[@blablablazzzblablaz]

Can't download the files needed even after signing up :( ???

[@priyaranjan1733]

Thanks Gary! :)

[@itsjerie]

can't access the link you posted, is there any other way to access it? Also, where can I download or can you do a tutorial on how you coded the 1140.css? Please :) BTW your tutorial videos are amazing! It really is easy to to understand, however the websites/links are hard to access.

[@mayanksinghfartiyal5290]

How can we use these parallax effect images and background image

[@lawviktor7610]

Hi, this tutorial is very interesting and helpful, but in every practice when I'm applying the parallax.js, the browser always give me a Error alert as "Uncaught SyntaxError: Unexpected token import" and the Error exists in Line 9 in the parallax.js; the Line 9 is "import rqAnFr from 'raf'" what should I do to fix this error? Thank you~~

[@hikmat9630]

it has some issue github repository. use cdn instead of parallax.js file.

[@elisabetta6286]

hey man! thanks for this tutorial! the project files are no longer available, could you rehost them please? thank you!

[@رجلمنأقصىالمدينة-ع1ذ]

how to add auto movements animation like in the demo?

[@michaelbacy3525]

at a certain point it sarts expanding horizontaly

[@samanthagravis2915]

I am looking of the project files. Are they still available?

[@LErghan]

parallax.js doesn't work for me :(

[@jaydevrepublic3440]

Hi if anyone tries this one and your browser gives you an error like " require is not defined or Parallax is not defined " you are using the non-compiled version of the library. either you should compile and use or you can download compiled version of the parallax.min.js file from here or you can use CDN now you good to go. the non-compiled version vest my half an hour hope it helps. github.com/wagerfield/parallax/releases cdnjs.com/libraries/parallax

[@NguyenVanongTHPTNguyenDuTOai]

thanks bro!

[@coop8845]

Thanks, I was bummed out for just a minute there.

[@michaelbacy3525]

thank you a lot :)

[@gerardogallegos4054]

Great video!!!!, what kind of microphone do you use?

[@DesignCourse]

Thanks. Shure KSM27, I purchased like 8 years ago for recording acoustic guitar. It was around $399 back then.

[@gerardogallegos4054]

Thanks for responding! The quality is great! I have a at2020 but does not compare in quality : '( I hope soon to buy buy another!

[@manvelavetisyanvids]

Great vid. Is there any way of having a full 360 with parallax.js? Would it be in the js code? I downloaded the project files. Much appreciated!

[@shivambhaskar5737]

Where is the project file bro?

[@manvelavetisyanvids]

@@shivambhaskar5737 on github

[@ricoandrianirina9812]

thank you very much, GREAT JOB got 1 subscribed :D (y)

[@pascalkoch6237]

cant find the project files...

[@pewneosoby2108]

OMG :D DAVE! So uptight! :D :D :D @DesignCourse

[@Sinister5ixxx]

Uncaught ReferenceError: require is not defined at parallax.js:9 index.html:59 Uncaught ReferenceError: Parallax is not defined at index.html:59 :(

[@Zofjap]

Will you ever mess with intro.js ?

[@mrvsgsmnd]

Cant find the source file

[@blablablazzzblablaz]

DesignCourse, your website does not work for Google Chrome, only Safari from what i know. Telling you cus the signing up and logging in work work. u might be losing fans! Nice vid

[@martisb4232]

I can't see background ;c

[@zehirpinari1828]

is the download link for the projet fieles broken? I registered myselft, but still cant download them

[@georgiterziyski]

If it was, now it is fixed. I just downloaded this project.

[@zehirpinari1828]

works now ! nr1

[@shivambhaskar5737]

@@georgiterziyski can send the link of project file brother?

[@georgiterziyski]

@@shivambhaskar5737 matthew.wagerfield.com/parallax/

[@AnatolyKhalizev]

hm... my logos don't want to move :(

[@AnatolyKhalizev]

Works! My mistake was "depht" istead of "depth"

[@АрсенийАрсеньев-щ4й]

nothing works

[@FedorKai]

I'll just download it and change the pictures.

[@Zofjap]

What is in your js folder?

[@DesignCourse]

Nothing, that folder is not supposed to be there. ;)

[@devindelange9954]

what a waste of time no source material is accessible via link provided please update... because right now it''s nothing but an entertaining show,,, with no real applicable value.

[@martisb4232]

HELP ;c

[@9NestiN9]

No jak dla mnie to masakra, strasznie chaotyczny tutorial, źle przygotowany, obejrzałam do końca, ale zmęczyłam się już po pierwszych dwóch minutach... "Sprawdźmy jeszcze to...", "Aha, wejdźmy jeszcze tu...", "Aha, zaznaczcie jeszcze to..." - no ja pier...!!!

[@uglyonebeyou]

thank you!!!