Тёмный

Parallax on the web (part 7) - Floating Elements 

DevTips
Подписаться 351 тыс.
Просмотров 53 тыс.
50% 1

Опубликовано:

 

25 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 123   
@TheRealBwoi
@TheRealBwoi 9 лет назад
"Here's the post!" in the most nonchalant manner possible. Very informative. Thanks for the vids!!!
@OfficialDevTips
@OfficialDevTips 9 лет назад
TheRealBwoi I'm glad you enjoy them :))
@nawaking1
@nawaking1 8 лет назад
After watching the "parallax on the web" series, i became great fan of yours. And when you dedicate this video for people of Nepal suffering from earthquake it makes me very emotional as i belongs to Nepal. Thank you sir for your help and support.
@OfficialDevTips
@OfficialDevTips 8 лет назад
You are welcome! Thanks for your comment :)
@pradhanrak91
@pradhanrak91 9 лет назад
Thank you for your effort to help Nepal. We can use all the help we can get here in Nepal. It feels good be to one of your followers here on youtube. Thank you
@OfficialDevTips
@OfficialDevTips 9 лет назад
You are most welcome. Hope things are going well, good to know you internet is working :)
@abdullahmiyan4275
@abdullahmiyan4275 7 лет назад
I am from Nepal.. Back then I was not in web development... Thanks for the tribute :) I really like ur videos too...
@naby011
@naby011 7 лет назад
Wow DevTips Team I really appreciate your Video Tutorials and your support for earthquake relief via this tutorial. Thankyou so much and best regards from Nepal :)
@rahulbaidhya3663
@rahulbaidhya3663 9 лет назад
Hey travis! really awesome video as always. And the way you take step to relief programme for Nepal is really amazing. I am from Nepal too. We are also helping earthquake victims. All the people should help from their side at this moment. You are doing good. Nice move man. great job (Y)
@OfficialDevTips
@OfficialDevTips 9 лет назад
Thanks Rahul. Best of luck over there. I hope the donation helps a little. :)
@emiliorodrigoparra1387
@emiliorodrigoparra1387 9 лет назад
Woww!!This is being awesome series!!Love how this can be controlled by the user scroll instead of a trigger animation ^^. I can't wait to see more of this parallax, hope a lot more is coming next weeks!!You rock!!
@OfficialDevTips
@OfficialDevTips 9 лет назад
Emilio Rodrigo Parra yep. One more video coming up :)
@samwebb3552
@samwebb3552 9 лет назад
Awesome video! This is the best series on YT.
@OfficialDevTips
@OfficialDevTips 9 лет назад
***** Thanks Sam. That means a lot :)
@amanbekdosmukhambetov1676
@amanbekdosmukhambetov1676 8 лет назад
Hello from Kazakhstan. Your lessons are best!
@GeneLimWernMin
@GeneLimWernMin 9 лет назад
I don't really know why, but I get exited knowing a new notification that has just popped, up stating a new video has been uploaded on RU-vid by you.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Gene Lim That's really cool to hear :D I love that!
@SamuelPfleumerSami
@SamuelPfleumerSami 9 лет назад
Thank you very much for this series of videos. They are awesome. Greerings from switzerland
@OfficialDevTips
@OfficialDevTips 9 лет назад
Hi Sami! Glad you liked it :)
@viktorstrate
@viktorstrate 9 лет назад
Yay, a new video from my favourite youtube series just showed up in my inbox!
@OfficialDevTips
@OfficialDevTips 9 лет назад
Ding! Let's code :D
@nathans1435
@nathans1435 9 лет назад
This video series is awesome, Travis...I love it. Your presentation skills are amazing...and hope you could raise some funds towards Nepal Relief. Good on you!
@OfficialDevTips
@OfficialDevTips 9 лет назад
Thank you so much!
@slablife
@slablife 8 лет назад
Totally thought of a tag line for you....Travis Neilson "Bob Ross of Web Design". You know you love it!
@OfficialDevTips
@OfficialDevTips 8 лет назад
"Happy little design elements"
@slablife
@slablife 8 лет назад
+DevTips You should totally do an episode saying all the famous Bob Ross sayings!
@97pixels
@97pixels 9 лет назад
Nowadays, I like the DevTips video without watching it! 'Coz I'm damn sure it will be mind blowing! Thank you Travis for all these videos... you are the best! Keep rocking ;)
@OfficialDevTips
@OfficialDevTips 9 лет назад
hahaha, thats trust!
@97pixels
@97pixels 9 лет назад
DevTips Yeah ... Travis, I've one request ... Please make a tutorial how to make this kind of image slider ... owlgraphic.com/owlcarousel/demos/progressBar.html Thanks :)
@OfficialDevTips
@OfficialDevTips 9 лет назад
You sent me a link to a tutorial... Why not just read it?
@ethanlaven
@ethanlaven 9 лет назад
Keep up the good work Travis, awesome vid!!
@OfficialDevTips
@OfficialDevTips 9 лет назад
Blitz Thank you very much! I appreciate the encouragement :)
@StuartKaufman
@StuartKaufman 7 лет назад
It seems that at 13:55 you just kinda settled on not exactly what you wanted but "w'ell go this route" Haha NICE Tut's Man!! I thought Adam Khoury was on point... Sheeesh... YOU Are just as good, Thanks
@wm1476
@wm1476 8 лет назад
@DevTips, hi why did u still use the translate for post-1,2,3 at your style.css?, while u had done it at the function.js?
@MaxWeir
@MaxWeir 9 лет назад
great post, really enjoying this series.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Max Weir Thanks Max! That means a lot :)
@suresmaharjan9809
@suresmaharjan9809 7 лет назад
With Best Regards From Nepal 🙏
@turbanpupil4698
@turbanpupil4698 6 лет назад
one of the best tutorial of my life awesome thanks for such a nice tutorial
@level4499
@level4499 8 лет назад
I love youre tutorials and give me a lot of insipartion. Thank You sir.
@cheesebuds8962
@cheesebuds8962 9 лет назад
Amazing..as always..enjoyed watching it thoroughly..👍
@OfficialDevTips
@OfficialDevTips 9 лет назад
Thanks Cheese Buds , I'm glad it was on the up and up :)
@szymex73
@szymex73 8 лет назад
Your videos are the best!!! PS. In the bottom right corner of video, your hoodie is transparent so we can see through it (sorry for my english if it isn't good ;P)
@MukhammedZagidullin
@MukhammedZagidullin 8 лет назад
Hi Travis. Can you recommend any resourse to boost my js/ jquery skills? I feel I understand what you are saying but whenever I start coding on my own all that I always end up in a deadlock
@dextrin69
@dextrin69 9 лет назад
Hey Travis. Love the series. I'm subbed for life. You talking about blogs made me think of a question. If you've build a beautiful site for someone using html/css etc and they suddenly decide they want a blog that they can update themselves without learning code, how would you go about that? Linking to or iframing a wordpress site is ugly and you lose continuity. :/
@wolfteamUpdates
@wolfteamUpdates 9 лет назад
I love this series. Can you please make progressbar thingy that loads according to the time it takes to load our whole parallax site. Many sites uses progressbar and it hides automatically when the whole site loads. Thanks, you are the best
@OfficialDevTips
@OfficialDevTips 9 лет назад
Mojo Jojo That would be a cool video. I'll make a note!
@haider4899
@haider4899 9 лет назад
Mojo Jojo Oh! you need pace.js ! really easy, Trust me
@OfficialDevTips
@OfficialDevTips 9 лет назад
Pace is cool, but plugins take away the fun of doing it yourself.
@wolfteamUpdates
@wolfteamUpdates 9 лет назад
^Exactly. I can use plugins for almost everything. But that takes the fun away and secondly it increases the size of a website as most of the code seems unnecessary when using a plugin. Even if you have to use 1 part of plugin you have to load whole file. Those who use someone's code without knowing whats actually going on behind the scene are called script kiddies. I don't want to be one of them.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Script kiddies? never heard of that. Sounds like a gamer thing.
@aperyon1990
@aperyon1990 8 лет назад
Hey There! Why did you use translate-transform instead of just regular top right bottom left attributes?
@kennycelt
@kennycelt 7 лет назад
Question: Do any of these Parallax effects work on mobile? Great Great video series. Thank you.
@michaelrussell738
@michaelrussell738 9 лет назад
Another nice video sir ;) Are you using Emmet to generate Lorem text? Is the parton thing donating per video or a subscription thing?
@OfficialDevTips
@OfficialDevTips 9 лет назад
Michael Russell Its not Emmet. It's just a thing that Atom (my text editor) does. It's a per video thing. You can set a monthly limit, but you pledge an amount per video and when I upload, your pledge processes. If you haven't check out the video on patreon.com/devtips - It explains it better.
@michaelrussell738
@michaelrussell738 9 лет назад
cool ill give it a look. you certainly put in enough work!
@OfficialDevTips
@OfficialDevTips 9 лет назад
Thank you :)
@michaelrussell738
@michaelrussell738 9 лет назад
Travis you do great work, I've learned a lot from watching your videos so I've signed up to become a parton! You fully deserve all the support you get =]
@OfficialDevTips
@OfficialDevTips 9 лет назад
I saw that! Thank you so much :D
@souhailkaoussi6415
@souhailkaoussi6415 8 лет назад
Andréa Pirlo of Web design and development !
@tourdogg
@tourdogg 8 лет назад
Man I love this....What software are you using to make this website? I didn't know the Name of this style, now I know "Parallax!"
@binaryoverload
@binaryoverload 8 лет назад
+tourdog He is using GitHub Atom I think with CodeKit to refresh and compile his files
@Chauxz
@Chauxz 9 лет назад
Enjoyed it man! Learning alot, I might implement these into the "model row". :D My site is around 60% done. I need to make one more page and optimize the page a bit. I have one question: I changed my max-width: 1200px; at the Container. In Skeleton, but once I go Mobile the website does all crazy stuff. Thanks travis (PS I dont like Skeleton 960px its... a little small for my feeling)
@Chauxz
@Chauxz 9 лет назад
TomyVlogs Also, a big problem when I'am coding a website is that i never get what i expect when doing to CSS. I struggle alot with the CSS. I think of just do this and this and i get a yellow background (for example) but it does nothing, and just messes with the grid (for example) So its really confusing. Any tips? ;d
@OfficialDevTips
@OfficialDevTips 9 лет назад
TomyVlogs Not really any one tip or trick. it's just a lot of time and work. Keep on hacking and it'll come.
@Chauxz
@Chauxz 9 лет назад
Oh okay. Thanks for the reply
@haider4899
@haider4899 9 лет назад
TomyVlogs I hated this too! so I made mine... check out crdgrids, crdgrids.base.pk
@Chauxz
@Chauxz 9 лет назад
Haider Ali Khichi NICE! I will concider using this :D
@cyrusbesabella5938
@cyrusbesabella5938 5 лет назад
I am 4 years late! but anyway thanks again !!!
@alpalpsasuke
@alpalpsasuke 7 лет назад
Guys i have problem when i created post.columns.four.post-1 , 2 ,3 under div blog-posts.row columns are not appearing from left to right instead of appearing one under another. Why is that? It has happened on models too solved it with giving widths to it.
@bFix
@bFix 9 лет назад
would have been even cooler, if you would have applied the offset to the height of the middle one as well (so that all of them are always at the same height when sliding in) and maybe even given them all some kind of a fade in (with opacity)
@OfficialDevTips
@OfficialDevTips 9 лет назад
Piratekiller99 ooooh, cool idea! I'm going to be doing a video in the next few days that is dealing with the Pull Requests that this repo has gotten on GitHub. github.com/DevTips/Parallax-on-the-Web-DevTips-/pulls If you want to add your idea, I could talk about it and credit you. Your choice, just thought it would be fun :)
@bharatmodiTechFist
@bharatmodiTechFist 9 лет назад
i like the blossom effect . boom Shaka laka boom..
@OfficialDevTips
@OfficialDevTips 9 лет назад
bharat modi yea!
@rukometaszr
@rukometaszr 8 лет назад
Can someone help me? I want div to come from right side, stops and when i scroll down that it goes back to first position.
@zakayothuku
@zakayothuku 9 лет назад
Hi, I like this parallax tutorials. They have really helped me. I was wondering if you could make a parallax video tutorial like that for the Apple MacBook air promo. I am designing a book website and I want to promote certain book. My aim is to develop a parallax effect for the book, when a user scrolls, the book opens, rotatesand lands down. Please help. Thanks.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Zakayo Thuku I have no idea how they did that. I think it was with video, controlled by JS. Kind out out of my league :(
@dansintean6820
@dansintean6820 6 лет назад
11:28 - Boom shaka laka
@anampartho
@anampartho 9 лет назад
Hey Travis, Can you do a tutorial on horizontal parallax in near future? It would be great I think. :D
@OfficialDevTips
@OfficialDevTips 9 лет назад
Tashrik Anam I don't think I'll get to that this time around. Next week is the last video of the series.
@anampartho
@anampartho 9 лет назад
DevTips That's a bad news :/ Looking forward to the final episode and hope that you'll do something on horizontal parallax in future.
@OfficialDevTips
@OfficialDevTips 9 лет назад
I have a blog post where I use it. You are welcome to look at my source code! travisneilson.com/2-truths-1-lie/
@alexeysavkin4342
@alexeysavkin4342 9 лет назад
realy cool videos!
@OfficialDevTips
@OfficialDevTips 9 лет назад
Alexey Savkin Thanks Alexey :)
@SandroM_
@SandroM_ 9 лет назад
BOOM SHAKALAKA
@OfficialDevTips
@OfficialDevTips 9 лет назад
aaawwwwww yisss!!
@ikhlasismi5519
@ikhlasismi5519 7 лет назад
is it responsive or its it possible to fade the post 1 and 3 out, because while scrolling you get a horizontal scrolling bar
@asabeaumont7213
@asabeaumont7213 7 лет назад
I added overflow:hidden to blog-posts class. Which worked for me.
@MarcelRobitaille
@MarcelRobitaille 9 лет назад
If you had used a logorithmic function, the posts would have eased in more nicely. Kind of janky the way they just stop.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Marcel Robitaille If you can submit a pull request in the next 24 hours, I'll include it in a video :)
@MarcelRobitaille
@MarcelRobitaille 9 лет назад
DevTips The pull request didn't work for some reason. I can send you the new functions.js file by email if that works for you. I can also make a video explaining the changes if you want.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Yea, send the file to travisneilson at gmail, I'll have a look :)
@ahmederaqi
@ahmederaqi 9 лет назад
رائع :) شكرا جزيلا
@welcometomoe
@welcometomoe 9 лет назад
I was wondering how can i support DevTips? but not by donation for some reasons!
@OfficialDevTips
@OfficialDevTips 9 лет назад
Sharing the videos helps a lot! Sharing them on facebook and other social networks.
@welcometomoe
@welcometomoe 9 лет назад
DevTips I was think maybe a bunch of video series, which is DevTips misses i have a lot to share, i wanna share these things for who is starting out, even professionals, covering some mistakes, i really love the way you teach people, covering things that you couldn't cover for some reasons, the point is helping out DevTips family to grow more, more and more. i wanna help people out there to get to know this family, be part of it, feel the love and feel what it means to be part of DevTips :D
@OfficialDevTips
@OfficialDevTips 9 лет назад
You want to make videos?
@welcometomoe
@welcometomoe 9 лет назад
DevTips I guess so.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Send me a proposal, I'll look it over.
@ratebdrive6871
@ratebdrive6871 7 лет назад
the zip files wont open please cheek.
@mackaybravo6770
@mackaybravo6770 9 лет назад
awesome
@OfficialDevTips
@OfficialDevTips 9 лет назад
Mackay Bravo thanks!
@rodrigozacharias7661
@rodrigozacharias7661 8 лет назад
top!!
@OfficialDevTips
@OfficialDevTips 8 лет назад
Top!
@ZealousWeb
@ZealousWeb 9 лет назад
This video is conveying the good expertise practice over a parallax website designing.
@OfficialDevTips
@OfficialDevTips 9 лет назад
Thanks!
@creativeflow5212
@creativeflow5212 9 лет назад
Love your videos long time viewer. There is one particular parallax (I'm not 100% what the proper term is) that I would like to implement but I can't find any tutorials on it. PLEASE make a tutorial on it. Here is a website using it. www.protonmail.ch. It's basically the hero page on the home page. Looked easy enough but when it came down to coding it I wasn't sure where to start. I inspected the code but it doesn't make sense to me. Would really appreciate you breaking it down.
@OfficialDevTips
@OfficialDevTips 9 лет назад
***** The mountains? I dont see any parallax happening...
@creativeflow5212
@creativeflow5212 9 лет назад
sorry it's not a parallax. The hero page is what I meant on the home page. where the background and the window image in foreground sizes down separately in the same banner and fixed to the bottom of the banner. I would like to do something similar.
@OfficialDevTips
@OfficialDevTips 9 лет назад
oooohhhhhhh. Really quick, here's how that's done: 1- the background image is resized by using background-size: cover 2- the image in the foreground is using a combination of media queries, but mostly max-width.
@RatchetSK
@RatchetSK 9 лет назад
are you a hipster?
@OfficialDevTips
@OfficialDevTips 9 лет назад
What is a hipster?
@ethanwinters7636
@ethanwinters7636 8 лет назад
man, I love your tutorials. I've learnt a lot from them... but this jade and sass shit is so annoying... just... WHY
@xon3E
@xon3E 7 лет назад
Hell no. Learn 'em as well as node, npm packages, postcss, gulp, etc. Trust me.
Далее
Parallax on the Web (Part 8) - Revealed Footer
13:21
Просмотров 51 тыс.
Industrial-scale Web Scraping with AI & Proxy Networks
6:17
Скинь той самой ❤️‍🔥
00:15
Просмотров 17 тыс.
ДУБАЙСКАЯ ШОКОЛАДКА 🍫
00:55
Просмотров 843 тыс.
You don't understand Maxwell's equations
15:33
Просмотров 14 тыс.
Discovering the CSS Perspective Property
10:29
Просмотров 77 тыс.
The Secret Science of Perfect Spacing
9:40
Просмотров 448 тыс.
Malware Development: Processes, Threads, and Handles
31:29
Dear Game Developers, Stop Messing This Up!
22:19
Просмотров 722 тыс.
CSS Filters!
13:01
Просмотров 53 тыс.
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 629 тыс.