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!
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!
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
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....
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!
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!
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 :)
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
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!
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!
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 RU-vid !!! Atom is my main editor now and i love it i learned so much from you senpai ! thank you for everything !
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...
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.
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.
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!
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.
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!
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.
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.
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!
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.
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....
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.
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.
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 :)
Great tutorial, just wondering why you are using .jade and .sass files rather than .html and .css. Do they act the same way, formatting wise (other than the tags being isolated).
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?
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.
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!
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.
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.
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 :)
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!
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
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
+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
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.
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.
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!
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
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.
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.
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.
Love it! I learn so much from you! Thank you! (I will join Patreon when I'm on slightly better financial footing.) Question: What software do you use to create the video itself? Thanks. :)
