Parallax on the Web (Part 1) - Parallax Examples

[@Alex-rt7de]

I've learnt English to watch these videos! JUST AWESOME, I've never seen such a quality materials on KZbin! Man, I really love it!

[@hasratsabit7116]

The quality of contents on this channel is just amazing.

[@OfficialDevTips]

I'm glad you like it!!

[@omhoumz]

This is awesome. I've watched a number of tuts about the subject. But none of them have succeded to do such a great job. I can't wait for the rest of the series. Thanks.

[@nydavo]

I really like your emphasis on the importance of design principles over tools and techniques. At least that's the impression I get from watching you go over what each parallax technique accomplishes for the overall design of the project in the first video of this series. It really cements the point. Too many tutorials focus on teaching you the tools, but fail to teach design principles. Great job Travis! +1 for the landing elements, specifically the one from the Apple example.

[@OfficialDevTips]

Thanks for pointing that out nydavo . That means a lot to me :) We will get into the nitty gritty soon though.

[@TheodoreKariotis]

I love this guy. Puts so much work and enthusiasm in his videos. Just awesome.

[@OfficialDevTips]

Thanks Theodore Kariotis - I'm really glad you like the show! Hope you like the rest of the videos too :)

[@lemueljunior]

omg I was googling about this and only found miserable examples and explanations and then I see that you made a series about this stuff!!! I'll definitely subscribe to your channel dude! Congratulations for your skills and thank you so much for sharing with us newbies haha

[@M2dScientist]

Great idea for a video series! All example websites are just amazing!

[@paulwisdom5383]

As someone very new to web development, the excitement of one day being able to do something like this keeps me motivated! :)

[@michaelriccelli8483]

This is awesome stuff. I haven't seen anyone else really categorize parallax. It makes it understandable on when and how to use those kind of effects.

[@sladkacokoladka]

2min in and i'm hooked. I start learning everything you have to offer the first thing tomorrow! Over and out

[@OfficialDevTips]

sladkacokoladka Thanks for watching buddy!!

[@danieldrntss]

Your videos are so organized, creative and simple to understand, thank you!

[@lopesmulderz]

Hi Dev, I´ve been learning the basics of Html, Css, Javascript and JQuery, for a few months now. I´m starting a project for a parallax type website for my job. Thanks for the inspiration and good work you have been providing to the people of the world o want to become coders. Thanks Man :)

[@ankanpaul747]

Loved it so much. Also the subtlety that you speak of in the web designs, is there in the art of your video making. It was a nice experience.

[@OfficialDevTips]

Thank you Ankan Paul, That means a lot to me. :)

[@TheTonyMiki]

VERY useful for product demos, showing different angles of products in one space w/o having to show 20 thumbnail shots. very cool video. thanks!

[@OfficialDevTips]

yea, there is this one example on the pencil website where as you scroll a hand holding the pencil rotates. really great execution.

[@Dre_Camar]

very long video but i couldn't look away... awesome job.. this just shows me how much i still have to learn... again, great job

[@jsurgee23]

I'm brand new to HTML and CSS - and this is clearly over my head - but man it gives me a lot to look forward to as a discover the dev world. I thoroughly enjoyed the website breakdown.

[@tristanmarroquin749]

I believe parallax can really help your site stand out from the masses if done right. It adds that professional touch.

[@OfficialDevTips]

Tristan Marroquin Agreed!

[@mduduzikhoza1041]

just started watching your videos , i have to admit they're awesome

[@adrian110288]

So happy to have found your channel !!

[@OfficialDevTips]

Hey, so am I!

[@ofeenee]

Me too! I just subscribed :)

[@chromehdgermany]

+DevTips You can do this Macbook effect too by making many photos so photo 1 = frame 1 - then scroll down next image is shown over the first on and so on

[@JideLambo]

+chromehdgermany Hi. how does your method work? Please explain a bit more.

[@priscillaperon2970]

+Jide Lambo ' ú

[@stuartwalker559]

I guess its a little late to make a request! For the record, the cage fight design was amazing! I only started watching your videos recently but I'm hooked and using them as a light approach to learning web design/development on top of other resources. I love your refreshing look at the online world. Keep up the good work!

[@OfficialDevTips]

I'm really glad that you enjoy the videos Stuart :) I'll keep making them if you keep watching :P

[@ArindamChakraborty90]

Right now I am So Excited to watch you handle some Awesome Parallax. Waiting Patiently ! You Rock dude !

[@OfficialDevTips]

Thanks Arindam! I'm excited to share it :)

[@ntucker]

Awesome overview Travis, you got me excited about these effects.

[@OfficialDevTips]

NATO!!!! You are not dead! wooo!

[@aci25tv]

Awesome explanation of this style of design. I am planning to use this style of design in a project but I wanted to have a better understanding before I start working on it. My mind is full of ideas now. Thank you so much!

[@createliveexplore1285]

Great video, about to watch part 2!

[@VedeninaMS]

Thanks a lot! Very interesting, can't wait to see the rest of these Dev Tips videos!

[@ItsUreBoy446]

Great video! Exactly what I was looking for... Looking forward to the upcoming videos!

[@OfficialDevTips]

Thanks Chris! I'm excited to get them done to share them :)

[@corinmchargue9362]

Your videos have been incredibly helpful! Thank you for all of your hard work in producing such high-quality videos.

[@Maolo92]

33:40 wow I thought I never thought I could see the Dolly zoom effect used in movies on a website, that's mindblowing! By the way great video, can't wait for the next part!

[@OfficialDevTips]

oh yea! And they did a good job too!

[@SunandiniSingla]

This is the first 4th min of first video of yours that I'm seeing, and already a fan! Thankyou!! have been looking for tutorials on this concept for a lon time.

[@easysites9129]

you make a good point with highlighting the statistics. never thought of it that way. thanks

[@BernardCousin-graphiste]

Un immense merci pour ces vidéos ! I was looking for explanations and techniques about that famous "Parralax effects". I got here much more than that ! A complete overview and really clear & understandable tutorials (even for a french speaker ;) ) So, many many many thanks. I'll be watching all your vids for the next weeks ;)

[@goztrexwtha]

Wow! I'm glad I found this. Just wanted to tell you that you're doing a great job Travis. Keep it up!

[@OfficialDevTips]

Thanks Lukas Vaitkevicius , I'm really glad you like it!!

[@kamaboko1]

Great walkthrough of the various types of parallax implementations. I'm sure this took time to put together.

[@OfficialDevTips]

kamaboko1 a little. I'm glad you liked it!

[@TheMagnas26]

Christmas day each time you post a video!

[@latoslatos7012]

Hey Travis... you know what? I got a job because of you. Thanks man. I don't like jquery, but I still have version of your parallax tutorial in vanilla js :) I wish you all the best! And never stop!

[@robbert44]

Excellent work, well explained , learned a lot . Thanks and greetings from Mexico City

[@stevento4381]

This is actually the first video that I watch on this channel, it got my attention and I subscribed. Haha!

[@markshall94]

I really liked the Pencil one, the way it explodes! I'd love a video tutorial on that one if you would!

[@studiojoi-hairtherapy6671]

You are awesome!!! Through and easy to follow,, your words become visual. Excellent speaker.

[@abdmaster]

My eyes are popping out as I watch all these awesome ideas :D. Very nice video.

[@OfficialDevTips]

quick! put them back in!!

[@marykim8540]

YOU. ARE. AWESOME. I am learning so much but also laughing hysterically. THANKS FOR THE VIDS!!!

[@OfficialDevTips]

Mary Lee You totally are welcome :D

[@kenthjohnisrael9686]

Dude you are awesome. I think I have found the channel for the best front end web dev tutorials. Thank you so much for the videos. I also wish I could deliver jokes well like you do too.

[@Dolann]

I like the slow elements, mouse movements and landing elements.

[@OfficialDevTips]

mmmmm. good stuff :)

[@thisisashwani]

Thanks a lot, Travis. I am watching this in mid of 2019, and this is still the best video out here to understand parallax effect in web design. Kudos to you for the way you explained everything! :D

[@FajerFajerFajer]

Great video Travis, thanks. And actually I'm glad that you showed the zoom effect on your blog post about your workflow - it helped me to discover new awesome things. :-)

[@OfficialDevTips]

oh, haha! I hope it's helpful!

[@EngineeredTruth]

good job. It gave me a lot of ideas.

[@OfficialDevTips]

Awesome! I'm a fan of your channel BTW. Nice to see you watching a video here :)

[@zita9976]

33:57 this could be a great idea for some cool app or smth like kindle but for comic books!

[@easysites9129]

agree

[@alfieroseburg8887]

Its like being in a special art class. Oh man Ive learned a lot about visual perspective analysis and a lot more which I really think is beneficial to aspiring web artist like me who previously only thinks that code-is-all. Thanks man!

[@OfficialDevTips]

Glad you liked it! Thanks for your comment!!

[@paulslater8053]

Hey Dev.....Absolutely love your videos bro!! you have a great presence and explain things so well, just had to drop a comment and let you know....credit where credit is due and all that....keep up the great work and carry on entertaining us and making us wiser! :) The U.K. thanks you!!!!

[@caitcastle2546]

Really cool video! I wanted to learn more about Parallax conceptually in terms of geometry (& astronomy) and this was a welcome surprise!

[@flyingpie2619]

i m gonna watch all Ur videos now after i ve just watched this one. the great work! its my favourite channel now. thank you!

[@starbornRaine]

this is amazing, i start my internship next week and they already have parallax projects for me. it is something i need to practice so haha perfect timing !

[@OfficialDevTips]

oh cool! have fun :)

[@tierrasMusic]

Does anyone know where to find multiple directional elements like the carousel for Dropbox?

[@yanistancheva3076]

Absolutely stunning, well explained too

[@ChristianEckert80]

Nice! Looking forward to the next video!

[@OfficialDevTips]

Awesome! Me too :)

[@wolfteamUpdates]

Something i always wanted to understand. But i have exams right now. Thanks for moving to this topic. Ill have a look at this after 16th. You are the best.

[@OfficialDevTips]

see you then! Good luck on your exams :)

[@wolfteamUpdates]

DevTips Watched the video but i wanted to understand how this works. When are you going to create tutorial?

[@OfficialDevTips]

It will be out on Monday, like usual :)

[@ArtbyKhater]

Mouse movement is nice and also the zooming effect is really amazing and you can even use both effects to create a wonderful effect that leaves a great user impression about your site. Great stuff, cant wait to watch the next video :) Thanks for the awesome tutorials .. keep it up.

[@OfficialDevTips]

good point. Thanks Ahmed!

[@RAWKNtoni]

Yes, yes, yes yes! Been waiting for this video!

[@OfficialDevTips]

put ya hands up!!

[@flintsteel7]

Cool stuff Travis. I'm excited for the next vid!

[@OfficialDevTips]

me too [as I edit it...]

[@Amirkhantv]

Thank you for This Awesome Information about parallax. Waiting for Next Video.

[@Peshyy]

OMG Awesome! Thank you so much

[@OfficialDevTips]

awesome! Cant wait too!

[@darzwena]

Very very informative thank you for breaking down the science of webdesign

[@rage72]

Excellent video, thanks for the walk through!

[@MarcEPliester]

Even this introduction video is entertaining ;). Can't wait till next weeks to go hands on.

[@OfficialDevTips]

I'm excited to share! [as I take a break from editing...]

[@yoeldelgado9478]

great video one of the best I've watched

[@filmy.senshi]

nicely explained. gonna watch all the tutorials. thanks for the uploads. :)

[@OfficialDevTips]

Thanks for watching. I hope you enjoy the rest just as much :)

[@Tedoliv]

I'm super excited for the upcoming video on this topic! I have spent the weekend noodling around with pure CSS ways of achieving this and would love to see if you have any ideas on the topic. Your videos are a valuable asset in my learning codes, Travis. And I'm glad I decided to become part of your community over at Slack and Patrion! Ps. Spent a week using only JADE and SASS every day. Today I tried to write in vanilla CSS and HTML....couldn't do it... THIS IS ALL YOUR FAULT!! lol

[@OfficialDevTips]

hahha. Thanks Ted. sass and Jade has ruined me too! I'm so glad that you are in the community :)

[@dw-rh6fb]

Awesome video, not a dev or programmer, but you were able to talk about things in such a way that even a I could learn something. Great film, thanks for the video, liked and subbed.

[@OfficialDevTips]

d w Thank you so much!!

[@marksstudio]

Terrific man! Thanks for your work, your instruction. Very much enjoyed. Moving on to your other videos, and subscribing. I like the way you explain things.

[@dougieladd]

This is excellent work. Thanks for this!

[@OfficialDevTips]

dougieladd You are welcome!!

[@rubengarganta2399]

Really nice explanation. let see were it goes

[@hillarylewis387]

awesome--exactly the kind of overview I needed! thanks!

[@OfficialDevTips]

Great! You are welcome!

[@swervedesignsuk]

Awesome tutorial! I Really liked it :)

[@OfficialDevTips]

Thanks Swerve!! how are you?

[@humorean]

Thank you for this tutorial. I learned a lot from this about Parallax.

[@IALON]

I would love a tutorial about zooming elements or how to control a video with your scroll like apple did with the MacBook. Thanks again for an awesome video, I always learn a lot

[@OfficialDevTips]

You are welcome IALON I'll make a note of these suggestions :)

[@7daysinSunnyJune]

That was a great video! I learned a whole lot, even though there was no coding!

[@CesarPinedaCervantes]

Thanks a lot for all your work. You always explain concepts and techniques in such a detailed way you don't find anywhere else. I really like the visual aid you use on the right. I'd love to see the effect you showed on the statistics in the Apple website. Also if possible, show us where you learn these topics or how to get started. Thanks a lot Travis.

[@OfficialDevTips]

Thanks Cesar! I learn these topics by opening up other peoples websites and digging around. Shame. I know. lol.

[@haifaash637]

your video deserves 1 billion like !!

[@OfficialDevTips]

Thanks!

[@mikerynart]

Great video! Good parallax examples

[@OfficialDevTips]

Mitch Rynart Thanks Mitch :)

[@mahadehasanyt]

wow,So happy to have found your channel !!I I am really excited.Thanks a lot for your impressive effort and tips.

[@Raul11madrid1]

amazing websites .. last one is the best .. fantastic video thanks bro..

[@marispetrovs]

This is a nice video explaining all examples very well! Also "Carousel" and "Pencil" websites were designed and developed by this great guy Jonnie Hallman aka DestroyToday now he build "Cushion app" for freelancers.

[@nickstockley]

some great examples and explanations, would love to see a tutorial for altering perspective and zoom together one either scroll amount or by mouse positioning.

[@OfficialDevTips]

thanks! yea, the more I get into this topic I realize how big it is, and how many different uses people have invented recently :)

[@AhmedEssam-lv5vn]

i want to learn them all!! :D thanks for the videos

[@perryanderson7113]

Best part of the video was when you threw a shout out to Leon.....that movie should've won awards lol! Thx for the vid

[@itnoltv406]

Awesome Keep it up. Very helpful! More power. Thanks.

[@OfficialDevTips]

Jezreel John Junio Thanks!

[@priyankkharat7407]

Thank You Travis! You teach WHY with HOW, instead of just showing the HOW..

[@christopherjschultz]

Great Video! Wealth of information. Thanks!

[@OfficialDevTips]

+Christopher Schultz You are welcome!

[@christianjosephcunanan2870]

nice video man very educational keep it up

[@sencemeister]

in love with parallax.....thanks for sharing

[@OfficialDevTips]

Ajibodu Emmanuel You are welcome!!

[@ZoubairHfaidh]

Great tips! Great critics! Great video! thanks a lot

[@OfficialDevTips]

Thanks!!

[@pugiehobie]

thanks for making this video bro, well explained.

[@OfficialDevTips]

+Putu Agya You are welcome!

[@brendacosta7477]

i really apreciate your help with dowloanding this software

[@zubaidahfarhan3465]

I love that flamingo fact! You learn something new every day heh

[@xanxuspc7122]

Been waiting for this!!!

[@OfficialDevTips]

haha! I'm glad you are excited!

[@sandhikagalihWPU]

Awesome Travis! great explanation.. as usual. :D

[@OfficialDevTips]

Web Programming UNPAS Aww, thanks!!

[@bibekgautam512]

This was really insightful. Thanks!

[@royp874]

I'm learning a lot from this clip. You're genius {devtips}

[@OfficialDevTips]

Fantastic!!

[@CristianAlexandruRadu]

This is a so impressive video and examples :o that's what I was searching for since long ago I'm interested especially in "mouse move parallax" ^_^ Thank you for showing us all of these cool things

[@OfficialDevTips]

absolutely!! Thanks for your comment :)

[@AJSpeller]

Hi, I just discovered your channel about 2 weeks ago. I am currently watching the responsive design start to finish series. The work that you are doing is great. I am looking to return to info tech field after some years of separation and your tutorials are a great help in learning new skills and regaining some of the older skills. I would be most interested in seeing left to right parallax for a storyboard or comic book feel. I would also like to see an example using video that either plays automatically or scrubs based on the scroll like the apple macbook example. Thanks again for all of your work.

[@OfficialDevTips]

Hey AJ, thanks for your comment and good luck on the series!! I hope you like the u-coming videos too :)

[@kimokimo3507]

hi, my name is kareem from egypt you are awesome man , keep on

[@OfficialDevTips]

Thanks!!