Parallax Tutorial using Parallax.JS

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ม.ค. 2025

ความคิดเห็น • 77

  • @csumityaday
    @csumityaday 11 ปีที่แล้ว +5

    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
      @DesignCourse  11 ปีที่แล้ว +1

      Thanks for the feedback.

    • @csumityaday
      @csumityaday 11 ปีที่แล้ว +2

      DesignCourse Make few more advance examples..

  • @ChrisFotosMusic
    @ChrisFotosMusic 5 ปีที่แล้ว

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

  • @Shivamserenity
    @Shivamserenity 10 ปีที่แล้ว +2

    best tutorial on parallax on youtube.....

  • @Dephorek
    @Dephorek 7 ปีที่แล้ว

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

  • @smitefau
    @smitefau 10 ปีที่แล้ว +1

    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)

  • @IamGretar
    @IamGretar 11 ปีที่แล้ว +3

    Nice tutorial, I like seeing something unique like this.

  • @Zofjap
    @Zofjap 11 ปีที่แล้ว

    Great turorial!

  • @JerryMain1
    @JerryMain1 8 ปีที่แล้ว +1

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

  • @jigsaw4770
    @jigsaw4770 9 ปีที่แล้ว

    great tutorial! really appreciate the time invested!

  • @landahoy5829
    @landahoy5829 8 ปีที่แล้ว

    Thanks for this. Going to dive into your other tutorials

  • @sankalpbhamare1850
    @sankalpbhamare1850 8 ปีที่แล้ว

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

  • @herr_pouya
    @herr_pouya 8 ปีที่แล้ว +1

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

  • @MarshalJose1
    @MarshalJose1 10 ปีที่แล้ว

    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

  • @juliabaguiar9124
    @juliabaguiar9124 8 ปีที่แล้ว

    Awesome video! Thank you again :)

  • @jenniferhuang8152
    @jenniferhuang8152 5 ปีที่แล้ว

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

  • @seko6935
    @seko6935 8 ปีที่แล้ว

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

  • @Slash27015
    @Slash27015 8 ปีที่แล้ว +1

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

  • @jaydevrepublic3440
    @jaydevrepublic3440 6 ปีที่แล้ว +1

    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

  • @gerardogallegos4054
    @gerardogallegos4054 10 ปีที่แล้ว

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

    • @DesignCourse
      @DesignCourse  10 ปีที่แล้ว

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

    • @gerardogallegos4054
      @gerardogallegos4054 10 ปีที่แล้ว

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

  • @marcinborkowski9567
    @marcinborkowski9567 8 ปีที่แล้ว

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

  • @dilshanmadusanka2317
    @dilshanmadusanka2317 5 ปีที่แล้ว +1

    your project file link is not working

  • @LeandroCavalieriwinsite
    @LeandroCavalieriwinsite 9 ปีที่แล้ว

    Muito bom os seus vídeos!

  • @akiij9493
    @akiij9493 9 ปีที่แล้ว +1

    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!

  • @samanthagravis2915
    @samanthagravis2915 4 ปีที่แล้ว

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

    • @Erghan_K
      @Erghan_K 3 ปีที่แล้ว

      parallax.js doesn't work for me :(

  • @Gigamlat
    @Gigamlat 9 ปีที่แล้ว

    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)??

  • @impulzer1596
    @impulzer1596 7 ปีที่แล้ว

    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?

  • @ccoquet
    @ccoquet 10 ปีที่แล้ว

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

  • @Jlurieful
    @Jlurieful 10 ปีที่แล้ว

    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?

  • @amitsharma-jb4kq
    @amitsharma-jb4kq 11 ปีที่แล้ว

    Awesome, it helped

  • @cursosdanilo
    @cursosdanilo 10 ปีที่แล้ว

    the best tutorial, thanks for shared. =D

  • @youfirst.
    @youfirst. 11 ปีที่แล้ว

    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

  • @itsjerie
    @itsjerie 6 ปีที่แล้ว

    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.

  • @mikekaperys24
    @mikekaperys24 10 ปีที่แล้ว

    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

  • @bikrampandey475
    @bikrampandey475 3 ปีที่แล้ว

    me watching this video after 7 years: You noob

  • @elisabetta6286
    @elisabetta6286 5 ปีที่แล้ว

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

  • @manvelavetisyanvids
    @manvelavetisyanvids 6 ปีที่แล้ว

    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!

  • @mayanksinghfartiyal5290
    @mayanksinghfartiyal5290 6 ปีที่แล้ว

    How can we use these parallax effect images and background image

  • @رجلمنأقصىالمدينة-ع1ذ
    @رجلمنأقصىالمدينة-ع1ذ 5 ปีที่แล้ว

    how to add auto movements animation like in the demo?

  • @priyaranjan1733
    @priyaranjan1733 7 ปีที่แล้ว

    Thanks Gary! :)

  • @blablablazzzblablaz
    @blablablazzzblablaz 10 ปีที่แล้ว +1

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

  • @zehirpinari1828
    @zehirpinari1828 9 ปีที่แล้ว

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

    • @georgiterziyski
      @georgiterziyski 9 ปีที่แล้ว

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

    • @zehirpinari1828
      @zehirpinari1828 9 ปีที่แล้ว

      works now ! nr1

    • @shivambhaskar5737
      @shivambhaskar5737 6 ปีที่แล้ว

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

    • @georgiterziyski
      @georgiterziyski 6 ปีที่แล้ว

      @@shivambhaskar5737 matthew.wagerfield.com/parallax/

  • @michaelbacy3525
    @michaelbacy3525 8 ปีที่แล้ว

    thank you a lot :)

  • @lawviktor7610
    @lawviktor7610 7 ปีที่แล้ว

    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~~

  • @pascalkoch6237
    @pascalkoch6237 7 ปีที่แล้ว

    cant find the project files...

  • @ricoandrianirina9812
    @ricoandrianirina9812 8 ปีที่แล้ว

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

  • @hikmat9630
    @hikmat9630 7 ปีที่แล้ว

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

  • @shabaddahuha
    @shabaddahuha 10 ปีที่แล้ว

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

  • @mrvsgsmnd
    @mrvsgsmnd 7 ปีที่แล้ว +1

    Cant find the source file

  • @pewneosoby2108
    @pewneosoby2108 4 ปีที่แล้ว

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

  • @michaelbacy3525
    @michaelbacy3525 8 ปีที่แล้ว

    at a certain point it sarts expanding horizontaly

  • @Zofjap
    @Zofjap 11 ปีที่แล้ว

    What is in your js folder?

    • @DesignCourse
      @DesignCourse  11 ปีที่แล้ว

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

  • @AnatolyKhalizev
    @AnatolyKhalizev 10 ปีที่แล้ว

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

    • @AnatolyKhalizev
      @AnatolyKhalizev 10 ปีที่แล้ว +3

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

  • @blablablazzzblablaz
    @blablablazzzblablaz 10 ปีที่แล้ว

    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
    @martisb4232 10 ปีที่แล้ว

    I can't see background ;c

  • @devindelange9954
    @devindelange9954 6 ปีที่แล้ว

    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.

  • @Zofjap
    @Zofjap 11 ปีที่แล้ว

    Will you ever mess with intro.js ?

  • @АрсенийАрсеньев-щ4й
    @АрсенийАрсеньев-щ4й 7 ปีที่แล้ว

    nothing works

  • @FedorKai
    @FedorKai 8 ปีที่แล้ว

    I'll just download it and change the pictures.

  • @martisb4232
    @martisb4232 10 ปีที่แล้ว

    HELP ;c

  • @9NestiN9
    @9NestiN9 4 ปีที่แล้ว

    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...!!!