HomeХобби и стильRelated VideosMore From: DesignCourse

Parallax Tutorial using Parallax.JS

965 ratings | 99299 views
http://goo.gl/BBse40 - Design + Code a Professional Android App from Scratch * **Join DesignCourse Premium for 1-on-1 Design Training with Me:** http://goo.gl/Hc7Flm Project Files: http://www.designcourse.com/videos/parallaxjs-tutorial-for-beginners/46 - Learn how to integrate a parallax effect using the popular Parallax.JS: http://wagerfield.github.io/parallax/ - 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: http://cathleentarawhiti.deviantart.com/art/Cloudy-blue-sky-310993575 Follow us: Facebook: http://www.facebook.com/designcourses Twitter: http://twitter.com/designcoursecom Google+: http://plus.google.com/+DesignCourse Dribbble: http://dribbble.com/designcourse - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://coursetro.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-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!
Html code for embedding videos on your blog
Text Comments (68)
Jay Devrepublic (2 months ago)
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. https://github.com/wagerfield/parallax/releases https://cdnjs.com/libraries/parallax
Đạt Lê Hữu (2 months ago)
thanks bro!
Manny Avetisyan (3 months ago)
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!
Manny Avetisyan (1 month ago)
+SHIVAM BHASKAR on github
SHIVAM BHASKAR (1 month ago)
Where is the project file bro?
Devin De Lange (4 months ago)
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.
mayank singh (6 months ago)
How can we use these parallax effect images and background image
Jerie (8 months ago)
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.
pirshaghy archive (10 months ago)
it has some issue github repository. use cdn instead of parallax.js file.
impulzer (11 months ago)
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?
Marvie (1 year ago)
Cant find the source file
Carlos Zambrano (1 year ago)
hi, where download 1140.css? Thanks
Law Viktor (1 year ago)
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~~
nothing works
Werran (1 year ago)
omfg dude, you explain everything step by step, somethink awesome. Thank you a lot for learning in easy way. :)
Pascal Koch (1 year ago)
cant find the project files...
Naren Kumar (1 year ago)
Thanks Gary! :)
Serhat Köylüce (2 years ago)
Hey thanks for the video! helped a lot! subscribed! greetings from Hamburg/Germany!
Sankalp Bhamare (2 years ago)
I like your channel so much , because of u learnt about many things
Toool (2 years ago)
Notepad++ is a good free alternative to Sublime Text 2 and features the same, for those of you out there wondering
Julia Aguiar (2 years ago)
Awesome video! Thank you again :)
UglyOneBeYou (2 years ago)
thank you!!!
Marcin Borkowski (2 years ago)
Thank you man ! You save me from the long confusion... I have one question: is there a way to lock movement only horizontal ?
Rico Andrianirina (2 years ago)
thank you very much, GREAT JOB got 1 subscribed :D (y)
THE GAMER (2 years ago)
at a certain point it sarts expanding horizontaly
THE GAMER (2 years ago)
thank you a lot :)
Land Ahoy (2 years ago)
Thanks for this. Going to dive into your other tutorials
Thanks man great vids! I subscribed. Cheers from Bulgaria.
Novitatis Veritatis (2 years ago)
I'll just download it and change the pictures.
Pouya Vagefi (2 years ago)
Really amazing tutorial and a great tutor... Danke!
Akii J (2 years ago)
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!
Gigamlat (2 years ago)
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)??
Jigsaw (2 years ago)
great tutorial! really appreciate the time invested!
Leandro Cavalieri (3 years ago)
Muito bom os seus vídeos!
Zehir Pinari (3 years ago)
is the download link for the projet fieles broken? I registered myselft, but still cant download them
Georgi Terziyski (29 days ago)
+SHIVAM BHASKAR http://matthew.wagerfield.com/parallax/
SHIVAM BHASKAR (1 month ago)
+Georgi Terziyski can send the link of project file brother?
Zehir Pinari (3 years ago)
works now ! nr1
Georgi Terziyski (3 years ago)
If it was, now it is fixed. I just downloaded this project.
Josh Lurie (3 years ago)
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?
Anatoly Khalizev (3 years ago)
hm... my logos don't want to move :(
Anatoly Khalizev (3 years ago)
Works! My mistake was "depht" istead of "depth"
Peter Stark (3 years ago)
Hi, can you also do a tutorial on how parallax.js created their menu button that animates from "i" to "x"? and back once menu is closed? Thank you
Peter Stark (3 years ago)
Weird, @ 19:17, my "breath" margin did not move the image down but moved the entire image, l1, l2, and bg down?
Andy Jin (4 years ago)
Can't download the files needed even after signing up :( ???
Andy Jin (4 years ago)
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
Marshal Jose (4 years ago)
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
Shivam Raj (4 years ago)
best tutorial on parallax on youtube..... 
martis b (4 years ago)
HELP ;c
martis b (4 years ago)
I can't see background ;c
Christian Coquet (4 years ago)
Nice tutorial, i thought it was gonna be harder to learn :P
shabaddahuha (4 years ago)
for those that want a good and free alternative to sublime text 2, I suggest Brackets by Adobe :) It's really good 
Gerardo Gallegos (4 years ago)
Great video!!!!, what kind of microphone do you use?
Gerardo Gallegos (4 years ago)
Thanks for responding! The quality is great! I have a at2020 but does not compare in quality  : '(  I hope soon to buy buy another!
DesignCourse (4 years ago)
Thanks.  Shure KSM27, I purchased like 8 years ago for recording acoustic guitar.  It was around $399 back then.
Mike Kaperys (4 years ago)
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
Danilo Agostinho (4 years ago)
the best tutorial, thanks for shared. =D
Smi TeFau (4 years ago)
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)
amit sharma (4 years ago)
Awesome, it helped
ozil (4 years ago)
What is in your js folder?
DesignCourse (4 years ago)
Nothing, that folder is not supposed to be there. ;)
ozil (4 years ago)
Will you ever mess with intro.js ? 
Asibi.S (4 years ago)
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
Sumit Yadav (4 years ago)
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 ^_^
Sumit Yadav (4 years ago)
+DesignCourse Make few more advance examples..
DesignCourse (4 years ago)
Thanks for the feedback.
ozil (4 years ago)
Great turorial! 
IamGretar (4 years ago)
Nice tutorial, I like seeing something unique like this.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.