Parallax On The Web (Part 2) - Parallax Header

Today we get our hands dirty and code up a parallax header for a made-up clothing store called "Black Bird"
Get the code on GitHub - github.com/Dev...
Learn more about CSS Positioning: • CSS POSITIONING (PART1)
See all the videos in this playlist: • Parallax on the Web
This video was sponsored by the DevTips Patron Community - / devtips
You should follow DevTips on Twitter - / devtipsshow

[@0605194]

Travis, your production value is amazing. It was great all along, and now it's even become entertaining to watch your coding. Truly awesome stuff.

[@OfficialDevTips]

Elyga Thanks Elyga, I'm trying new things all the time :)

[@MarkB-SnowyMtn]

Outstanding videos, Travis. I showed your parallax examples to my web design students and they were blown away. You have a wonderful ability to explain and show concepts in an engaging manner. Keep up the awesome work!

[@abdulkadirosman2816]

1,862 likes 13 dislikes. This is probably the best channel on web development. Absolutely brilliant. Subscribed and liking every video!

[@getpwnd89]

Honestly you are my coding hero!! Everything clicked in my head watching your channel. Other coding sites like Lynda, teamtreehouse, and codecadamy couldn't help me explain what each code does in a fun positive interesting way. I use your videos to teach my other friend how to code also and he loves you too! Seriously keep it up!

[@OfficialDevTips]

Thank you so much Abraham, that is awesome to hear :3

[@kakolaukiommarzouk3332]

I am extremely satisified by this video Sir. The only regret I have is I haven't known your youtube channel before. Thanks guy. Keep going

[@AnanthPai610]

Awesome video! Learned more about JQuery and parallax in half an hour than I did anywhere else. Thanks a ton, Travis.

[@OfficialDevTips]

Ananth Pai You are welcome!!

[@shubhamjain3028]

I thought this Scrolling Effect would be hard to code , but you made it simple . Thank You There are so many channels based on Web Designing but i only watch your videos as you explain it very well

[@OfficialDevTips]

Awesome, thanks!

[@FC-wm8he]

LOL!!! "Yeah, you scroll good.. Yeah".. Great video and even more impressive, you explained it in less than 30 min... Congrats man, this is great stuff....

[@sarahhuynh5976]

Hello! I've been watching your videos to help me self learn for two years now! I've recently joined a bootcamp to become full stack, i just got to say you're great at making these videos and I hope I can be as great as you are!

[@OfficialDevTips]

Thanks for watching! Two years is a good while. I'm glad you still enjoy them :)

[@Dannywage]

I genuinely think you're one of the most calm, detailed and chilled-out person on the web when it comes to coding. Really learned a lot so far from you! (Writing in SASS - as seen by you - helped me write my websites a lot faster, haha!) You gave me so many insights on coding, developing and what not ;) Keep up the good work man. Thanks :)

[@OfficialDevTips]

Danny Wage You're welcome! I think this is the first time I've ever been described as calm and chilled out, but I'll take it!!

[@YaronRosen]

wow!!! this video is what i wanted to do for like almost half a year! your example was so awesome, you explained it very well and make it so simplify i was back home so tired and after seen that video i was so excited that i can't sleep now i have to try it myself now!! thank you soooooooooooooo much for this video!

[@OfficialDevTips]

Yaron Rosen you are welcome!! I'm glad you are pumped up about this :))

[@chetanjpradhan7190]

I am your student now! The way you do it real-time is super cool. Thanks a ton

[@groofdesigns7808]

I've seen a couple tutorials on parallax scrolling, seriously this tutorial is the best one. Thanks!

[@JanKowalski-ke6wz]

I miss this guy. He was the greatest tutor EVER

[@petitestar86]

I've been dying to figure out how to do parallax. I've been reading tutorials and none have made sense. This makes sense and it is brilliant! Thank you thank you thank you!

[@OfficialDevTips]

Ivana Veliskova Awesome! That's a really big compliment :))

[@alexyap3659]

to anyone having trouble centering images with an unknown width with margin-left, here is another way you can work around it, left: 50% transform: translateX(-50%), what that basically does is it moves your image -50% (which is to the left) of the overall size of that image on the X axis, just thought i'd help out since this was very confusing for me as well when i first encountered this problem

[@props922]

Good thniks but when you do this in this project you must to change value 'transform' : 'translate(-50%,'+wScroll /4+'%)' in JS

[@kinglateef1955]

You gave me hope. Your style of teaching is impeccable and fun. Thanks so much.

[@Bodyskillz2011]

i didnt know you made a video about this... i was looking everywhere lol you are the best man !! keep it up !! Best Videos on KZbin !!! Atom is my main editor now and i love it i learned so much from you senpai ! thank you for everything !

[@OfficialDevTips]

Awesome!

[@IrvanYusirman]

This is your tradition, another great tutorial Travis... Thank you very much!!!

[@OfficialDevTips]

That is really kind of you. Thanks for your comment :)

[@gbp-gamebajanapagega4627]

I cant tell u how much this channel has helped me.. thanx for uploading these web tutorials. will look forward to see more.

[@OfficialDevTips]

You are welcome!

[@PralineLuz]

holy sh*** thank you SO much for this! Its only video #2 and im already swooshing and scrolling around any kind of .png i can find on my computer ;) 7 more vids to go woop woop...

[@LosEagle]

Thank you. Previous video left me wondering about how Parallax works and this was explanation that couldnt be any better. Looking forward to next week!

[@OfficialDevTips]

LosEagle Awesome! I'm glad it was helpful!!

[@dejo095]

awesome stuff man, you're explanations are so easy to understand. Yours and levelup tuts channel, are my favourite web design channels

[@OfficialDevTips]

dejo095 Awesome! I love LevelUpTuts also! Scott is a fantastic teacher and a good guy :)

[@CristianAlexandruRadu]

this is my favorite effect from the google play store > an app's page seen from an Android Phone, and I always wanted to create it

[@OfficialDevTips]

Cristi Alexandru yep! I'm glad you liked it!!

[@manualvarado2212]

Omg Travis, i love you so badly. I have been struggling with this parallax stuff, because i love it! But i just have a very hard time trying to understand what is going on with these layers, and it is definitely getting clearer now.

[@harshpandey8559]

I am a fan of your tutorials. You teach with so much love and honesty.

[@mrtrippingballs]

Hey Trav, by the end of this month you should hit the million video views. That's pretty epic. Almost as epic as foreground-blackbird scrolling around.

[@OfficialDevTips]

mrtrippingballs wow. that is pretty big. I'm not really sure how to feel about that.

[@kulkarnibaswaraj349]

No one can beat you DEV ... Excellent...!!! - Dev's fan

[@JoeBOU812]

Up until the script everything worked peachy keeno. I did the script and the Orgs from Modor filled my screen. I thought it was my script syntax...nope. Sass syntax? Nope. It was my background image--too darn big. Then I remembered. See I was paying attention. It all works as foretold. Thank you, Travis. I learn so much from you.

[@OfficialDevTips]

Joe Borja awesome! I love it when things finally work. Hate orgs tho...

[@pnyYT]

I'm currently self studying JavaScript and as i am seeing this, I am so amazed that can JS do! I just thought I can show dates and change css styles with it. But now that I\ve seen this video, I want to finish my JS lessons so I can also do that! It's so amazing!

[@pnyYT]

+Farai Gandiya damn. JS is the shit.

[@qwertyasdf7615]

Travis, this is great. Your channel really gets me thinking creatively. Thank you for all you so.

[@ArindamChakraborty90]

I loved it. It was aweeeeesomeeeee. Waiting eagerly for the next video. I really like and appreciate how you stretch on css even in jquery. Super duper tutorial.

[@OfficialDevTips]

Arindam Chakraborty Thanks man! I really appreciate the sentiment :)

[@SpencerKekauoha]

Love your tutorials! I just started learning web development and I always check your channel for information on new concepts I'm trying to learn. Keep them coming!

[@J.C.Schartau]

The feeling I get watching DevTips: "Everything's gonna be alright"

[@Mattlifts]

I haven't tried to put this into practice yet but Im so impressed with your tutorial. I might just give up on learning web design and just watch this video! lol.

[@OfficialDevTips]

Hahah, Dont give up!

[@Mattlifts]

AMAZING!! So this was super easy to install. I was looking everywhere for this so thanks Dev.

[@damiangrosso4025]

This video is absolutely amazing. Your explanations are second to none. Thank you!

[@othermichigansaturn]

I like how you put the drop shadow over your keyed background in this video. Great effect.

[@OfficialDevTips]

Really? I got negative feedback about that. THanks!!

[@JustLookA7]

Great tutorial. I've done a simple test website using parallax effect, but this technique of overlapping images is way cooler. Thanks for sharing :)

[@emiliorodrigoparra1387]

Once again I have to say that I enjoyed a lot with this tut!! I'm almost a new to JS/Jquery and more even to parallax and you explained it so well, I understood it all perfectly!! Love parallax as I think everyone does, thanks a lot for all teacher! :D. Hope this series goes to 50+ videos hhahah. Also wanted to know if you have in mind making some responsive parallax tutorial, nowadays it is a must that websites go to all devices. Have a nice day!

[@OfficialDevTips]

Emilio Rodrigo Parra yea, that's a great point. I should make these responsive :P

[@aboutfitness9264]

first time i have tried learning about parallax, great tutorial. Going to finish the series :)

[@OfficialDevTips]

+AboutFitness Awesome, hope you like it!

[@buraiki]

OMG!!! You light up on things that I haven't thought about before. Thank you,

[@OfficialDevTips]

You are welcome!

[@chcamp]

woww i never watch a very high quiality and hyper modern technics desing in some tutorial in youtube like that really thak you ver very much!!

[@OfficialDevTips]

You are welcome!

[@christopherstephens7278]

Hey Travis, I wanted to say thank you for everything you have done. Your videos have taught me so much and are really what made me super excited about front-end design and development. I landed my first job as a front-end developer. I wanted to see if you or anyone in the community had any tips for someone starting their first job. Thanks again.

[@OfficialDevTips]

Christopher Stephens Congratulations on the new job! My tip would be to keep learning. Don't say no, find a mentor and keep doing side projects. Always keep yourself engaged, don't get lazy.

[@fireandteeth]

For anyone really confused as to why Travis doesn't have to go into the command line to compile his SASS and jade code. Install the atom packages "jade-autocompile" and "autocompile-sass" you can add a single lined comment at the top of your files (e.g. //output:index.html, pretty:true) and everytime you save the file in Atom, it'll compile it for you :)

[@techtipsuk]

He's just using Codekit isn't he?

[@fireandteeth]

He could very well be, that certainly looks like a more intuitive way! C:

[@shihabunshakib5740]

Really man you are so good. You make every thing so easy. thank you so much. I hope if you come back again in this channel.

[@macgaso8822]

easy to follow. great tutz man as always. cant wait for the next!

[@OfficialDevTips]

Mac Gaso Awesome, I'm glad you like it!

[@DQuranJar]

You really help me man! I learn a lot from this video. Thanks from Indonesia

[@GuyManno2188]

Love your work Travis, I'm looking forward to diving in to the rest of this series :)

[@InsaneMetalSoldier]

Great Video! I made a website yesterday for one of my products and used parallax, plus, made some tweaks and stuff with Sass so it looked great on phones - tablets also!

[@OfficialDevTips]

***** Excellent! What considerations did you have with parallax when you made it work on mobile?

[@InsaneMetalSoldier]

Depends on the content of the box. If you have like 2 or 3 columns, they will be placed on top of each other when reaching the mobile break point, then your parallax box will be higher and can show empty space below the background image, therefore you can: use a different background-image for that break point (less wide but higher), remove content, reduce content size. This is what I did juanbonnett.net/jadmin

[@OfficialDevTips]

Very cool! Thanks for sharing :)

[@tylerdaniels9000]

Thank you for this. I didn't know much about this, I used to depend on Skrollr and Scrollmagic, now I know that it's so simple to do it with jQuery scroll() function....

[@josephsaboliciii2934]

"scroll..scroll...oh yeah you scroll soooo good" lmao DEVPORN!

[@danielzaharia6352]

:))))))))))))))))))))

[@seofilipino]

read that with Chinese accent

[@onyekachilorenz]

Great Tutorial Travis! I just love the way you explain this stuffs.

[@OfficialDevTips]

Thanks Lorenz Onyekachi !

[@kushaw1]

Great videos to understand and start Para-Lax, Good going guys.

[@OfficialDevTips]

+Kusha W Thanks!

[@GeneLimWernMin]

Such great tutorials! Can't wait for more of them!

[@OfficialDevTips]

Gene Lim Great! I'm glad you like them Gene :)

[@semacame]

I just found DEvTips. They are very good videos. It is awesome. Thanks

[@OfficialDevTips]

sergio menegassi I'm glad you like it!!

[@pstlvictoras]

i really enjoy these tutorial, i have fun and i learn in the same time...great job

[@viktorstrate]

Just discovered your channel last day, this video is just pure awesome'nezz.

[@OfficialDevTips]

Viktor Strate I'm glad you found us! Welcome to the party!

[@developerlifestyle]

That's so cool! Every time watching your video would always inspire me, make me want to learn more. Besides, you are so funny! Lol

[@OfficialDevTips]

Awesome. I'm glad you enjoy the videos!

[@HekaFOF]

Best video so far! Keep making parallax tutorials!

[@OfficialDevTips]

HekaFOF Whooo! I have 3-4 more planned, but maybe more depending on the response.

[@kawabus]

Your teaching style is Fantastic! I think you're on to something :)

[@OfficialDevTips]

Justin Matthew Thanks Justin :)

[@ricardojacinto6947]

Such an elegant way to code.

[@andrewmcbride88]

great video! really teaching the core techniques which gives us tools and not just this one effect. thanks!

[@OfficialDevTips]

Thanks for acknowledging that andrew! That is exactly what I am going for :)

[@Gato-Laranja-Mts]

Simple and easy. Great video as usual.

[@OfficialDevTips]

Thanks! I'm glad you liked it :)

[@monugupta32]

Nice Tutorial & thanks.. You gave me something exciting to work on between my exams.. :)

[@OfficialDevTips]

Rahul Gupta Great! And good luck on your exams :)

[@kamaboko1]

First class tutorial. Thanks for time and effort.

[@OfficialDevTips]

kamaboko1 You are welcome! Glad you enjoyed it :D

[@mottosson]

These videos are really great! Thank you so much! Really appreciate everything you do!

[@OfficialDevTips]

you are welcome Mathias Ottosson

[@CoffeeOnRails]

I love how the advert before this was Wix.

[@aprilpineda6698]

I'm using plane PHP (with no PHP related functionality at all but the extension is .php since I'm used to it), CSS, and JavaScript, I'm not using Jquery, Jade, and SASS, but I am still able to do it and tweak it to suit my desire, that is because you explain the process very well, you explain everything nice and slow and very detailed, Thanks to you :) I'll support you and watch more of your videos! Maybe when I become a developer I can be part of this? XD hehe you are helping me with a project I'm working on since I'm new to parallax. Thanks x 100^10 :)

[@Timooooooooooooooo]

I'll set myself a challenge. For my love of vanilla Javascript, I will try to rewrite the code in this series without using jQuery. It will be good to practice my Js skills, and to show the world that you don't need jQuery (anymore). I will try to have my code done before the next episode is out. Great video Travis. I was a little skeptic when you just started out; I thought you would just show us background-attachment, but I got excited when I saw the example. Loved every bit of the video. I'd love to have some more details on how you have your Atom set up, it looks so nice!

[@Timooooooooooooooo]

This episode is done! github.com/TimohStudios/Parallax-on-the-Web-DevTips- I feel the need to mention that you should probably note that this doesn't work great on mobile. I had some other things to say but I forgot. I'll probably come back.

[@Timooooooooooooooo]

I remember! I wanted to say that I thought the demo sites you make look amazing! I think this looks sooo cool! I came across Skeleton before. Never used it, but I thought it was neat too.

[@OfficialDevTips]

Timooo wow. That looks great. Hahha. Not as scary as I thought!!

[@OfficialDevTips]

Timooo Thanks man :)

[@Timooooooooooooooo]

DevTips It's fun to do!

[@hamzawaqar1000]

Omg! Thankyou God, I found the best Channel! Loveee!

[@OfficialDevTips]

Haha, Awesome :)

[@daroniousmaximus]

Thanks, these are great. I'm getting so many ideas from these.

[@OfficialDevTips]

I'm really glad to hear that!

[@ldawg214]

Dude, super simple tutorial! Thanks.

[@david_d-_-b_in]

Nice video Travis, well explained. See you next Monday! ;)

[@OfficialDevTips]

David Vázquez Thanks man, look forward to publishing the next parts :)

[@eccotech3463]

Looks great... is so interesting i did this back in 2006 using iweb. my site at the time was all flat when everything was skeuomorphic. it had a full-screen blurred background photo with large Futura bold font text and a call to action button that brought in the new artists using this (parallax) (3d). now is parallax. thanks, man.

[@startupinacar2794]

If anyone has problems following along, I highly recommend spending the time necessary to learn how SASS works, and how Jade works. Pretty sure you need a web server running to render Jade, but I could be wrong. Those extra steps not covered are totally worth going through to be able to follow the tutorials, and getting Sass to work is just a simple command once it's installed. Something like $ sass layout1.sass --watch css/layout1.sass:css/layout1.css Then you just include the layout1.css file into the jade template and you're ready to rock. This tutorial is BY FAR the best parallax tut I can find. Other tutorials would make you believe it's rocket science. It's actually quite simple.

[@OfficialDevTips]

Thanks man! yea, there are some jade and sass videos kicking around the channel too, is anyone doesnt know where to start.

[@jsurgee23]

I commented on the last parallax video and I must say seeing the effect being created was amazing. Thank you for the video. I want to piggy back on Hiccupz post. I'm brand new to the dev world and I just got through learning the basics of HTML5 and CSS. You're a great teacher for us noobs because you're great at speaking in Layman's terms and slowing things down. Using Jade and Sass though, in a way, cancels out the benefits of that skill set. Maybe I should get with the times and learn Jade and Sass and perhaps it would make it easier on me in the long-run but unfortunately for me and I'm sure a large portion of your target audience, we can't make use of the example code. With the experience you have, I'm sure you're aware of the % of people already using those mediums, and maybe that is your target audience. I'd love to know what you're thoughts on potentially missing out a large number of newbies by using those advanced tools. I'll give Jade and Sass a go and see if I can catch-on. It might be worth it considering the great content you provide.

[@nonchalant8473]

Excellent tutorial Travis. Thank u!!!

[@OfficialDevTips]

you are welcome :)

[@mospies]

great. love the parralax series

[@OfficialDevTips]

Abdul Ghani Awesome! Thank you!

[@Paul-ks6qx]

Love the videos. You really have a nice way to explain things. Finally a YoutTuber who gets started right away without all the chitchat. Keep it up! What package do you use for the instant save/refresh in Atom.io?

[@MrSuperawesomeisme]

Thanks for the detailed explanation! Well done mate! I'm subscribing!

[@MAnymanY710]

You have done it again man .Thanks

[@OfficialDevTips]

MAnymanY710 Thanks bro

[@BosEriko]

I've been using plugins for my parallax. I thought it was hard but now... it all makes sense. xD

[@OfficialDevTips]

Great!

[@stevento8038]

Thanks Travis! This is really awesome :)

[@shefsheko]

Great video! I have a question, how do you see the first image in the browser. I already clicked save and refresh and the index.html stays only with the text

[@jry1776]

Expected awesomeness and got it! Thank you!

[@OfficialDevTips]

Thanks for watching!

[@Drakkarius]

Awesome video, never have used jquery or java but i did understand everything you did and why.

[@marks3208]

You are a complete wizard!!!!. Just saying. Thanks a lot man.

[@OfficialDevTips]

Thanks!

[@DaMidnitezorro]

YOu are so cool.......thank you making me understand this modern day style!!!!!

[@OfficialDevTips]

You are welcome!

[@AndrewFord]

+DaMidnitezorro "Mother approved" lol

[@pward17]

+DaMidnitezorro yeah im making a lot more money now that i found this beautiful gentle kind loving caring bashful honest smart stylish beastmaster great beard too

[@andreasholt2633]

Great video, Travis!

[@OfficialDevTips]

Andreas Holt Thanks Andreas!!

[@vasilisas4440]

You are cool! The coolest video about the parallax:) I love it!

[@MichaelRichins]

Thanks Travis...yet again another great series. If only I could have your brain in my hands for a couple of minutes...but not literally because that would be a little weird, and awkward...for you that is.

[@OfficialDevTips]

Michael Richins That was my thought. So weird. hahhaha. I'm glad you get into it Michael! I'm happy to make these videos for people like you who really get into them :)

[@AhmedEssam-lv5vn]

you can use background-size : container instead of contain and it will work perfectly.. thanks for the videos again

[@shahbokhari]

Very Nice Travis. Beautiful work! as always! I just wanted to point out that in terms of better performance issues, it is always a good practice to use translate X or Y properties and values instead of negative margin values where top, right, bottom or left position is injected. Hope it helps us all. I would love the see the 53 Pen explode technique and the section just below it. That's kind of unique. Is there an On Demand Tutorial request option available in your Patreon Page? It would be so awesome if you have that. Thanking You for sharing your creative sparks Travis. Cheers!

[@OfficialDevTips]

Thanks man! What do you mean an On Demand Tutorial request option? Here are some really good opinions on parallax performance: medium.com/@dhg/parallax-done-right-82ced812e61c

[@shahbokhari]

Very nice example Trav! Thanks for the link. Oh! The on demand tutorial request is a cool idea of creating a premium tutorial on a premium request for premium value! Does it make sense? For example, I want to learn how to and the technique and technology behind some of the unique web experiences. More specifically, I want to see a tutorial on how to create those cool pen exploding view effect on scroll on the 53 Pen website www.fiftythree.com/pencil so, others may request for other tutorials but I personally want to see this tutorial and you don't have all the time of the world to respond to everyone's request. So, I should pay for this kind of specific request for specific tutorials for your time and effort and you set a price for that. So, will you create tutorials on demand/request for a price? That I'm calling on demand tutorial. And you'll always share those tutorials as usual to your channel so that others can be benefited from it too. I hope you understand my point. Please let me know what you think about it. many thanks for replying.

[@OfficialDevTips]

That's an interesting idea. I have a pretty tight production schedule though, I'm not sure that would work very well. I have a lot of content Ideas that I want to make, however the patreon community does have a suggestion and voting mechanism.

[@shahbokhari]

No worries. Everyone's busy of some sort. That's life! right. I didn't find anyone who does on demand video tutorials. I guess I've do it all alone. Lol! Thanks for your time & lots of love for you.

[@ArtbyKhater]

Love it! Still waiting for JS tutorials :)

[@OfficialDevTips]

Ahmed Adel There is some JS in there! But I know what you mean... :)

[@travisparkinson3075]

I have to give you kudos for doing this as you really seem to know what you're doing. Not only is your video series so in depth that I dont feel anything is missing, but you explain it in terms I understand. Seriously outstanding stuff here. what do I need to download to do this coding stuff? and I should know the answer to this, but is there anything you are doing that would be different to coding on a PC? Thanks for making the time to do this?

[@OfficialDevTips]

I'm using jade and sass. Other than that, follow the vids :)

[@millennia]

Wow. Please do more travis. Learning so much

[@TahoeRock]

Hi Travis, thanks a lot for sharing this. It is nicce to know how the cool things are working. Anyway, we are living in responsive world and I have tryed resize the page in the viewport extenshion for Chrome and the parallax efect went out of biz. Pictures did not resized to the screen resolution. Any idea with that? Thank Cheers Tahoe Rock

[@shr00msh00ter]

Really appreciate your work! Great stuff, that I learned a lot from!

[@jeffandrews2545]

I'm curious which font you are using in your editor. I really like it for an editor font. I've seen it floating around the web in other images but I've not been able to find the name of it.

[@taverasmisael]

Can't wait to the next monday (y) !!!!