No video

The Parallax Effect // 5 Minute WebDev Project

  Рет қаралды 616,965

Fireship

Fireship

Күн бұрын

Пікірлер: 402
@musicmoi
@musicmoi 2 жыл бұрын
Perfect amount of stimulus to hold my attention, teach me something, and leave me wanting more, all at the same time.
@onlyforwork8774
@onlyforwork8774 2 жыл бұрын
couldnt have said it any better myself
@rareearthmetal5019
@rareearthmetal5019 10 ай бұрын
adhd
@whodoesntlikesurfing
@whodoesntlikesurfing 4 ай бұрын
Agreed
@6thdim
@6thdim 3 ай бұрын
if only it had subway surfers on the side, then i could finally watch this tutorial
@londonguga
@londonguga 2 жыл бұрын
I've used most parallaxes libraries and I realised that the easiest ones to use are lax js and gsap scrolltrigger... but this one for react I didn't know ... seems cool I'll look it up. You are the best channel on youtube. Thanks
@RedempleMarcelo
@RedempleMarcelo 2 жыл бұрын
This is my favourite channel. I especially like it when you explain everything so nicely. I wish you a lot of success with the channel and happy life 😊. You Can check my Video too I have Dev Tips Video ❤️
@winstonmisha
@winstonmisha 2 жыл бұрын
agreed. Gsap scrolltrigger is amazing.
@ary_21
@ary_21 2 жыл бұрын
Knowing raw css essential to apply these effects ? I always use tailwind , and have lil clue about raw css syntax and preferable css applicable on same object
@RedempleMarcelo
@RedempleMarcelo 2 жыл бұрын
@@ary_21 hello check me
@its.arjun.s
@its.arjun.s 2 жыл бұрын
@@ary_21 I think you can use tailwind with this. Plus I don't think CSS is that difficult for a person familiar with tailwind
@FlorinPop
@FlorinPop 2 жыл бұрын
When I grow up I want to make tutorials like Mr Fireship! Amazing work!
@yodkwtf
@yodkwtf 2 жыл бұрын
don't we all?
@ivmawho
@ivmawho 2 жыл бұрын
You are already creating amazing stuff @Florin Pop
@RedempleMarcelo
@RedempleMarcelo 2 жыл бұрын
What languagr you use?
@meseretkassaye8550
@meseretkassaye8550 2 жыл бұрын
we got under 18
@lycan2494
@lycan2494 2 жыл бұрын
Florin Pop 1. u fell off 2. u said u were gonna be millionaire in 365 days, its been more than 6 months what happened?
@MuhammadUzair-vw4hw
@MuhammadUzair-vw4hw 2 жыл бұрын
Thanks a lot Jeff! Please keep going on 5 minutes webdev project.
@teodorchirileanu
@teodorchirileanu 2 жыл бұрын
Please do!
@abdullahalshohail2865
@abdullahalshohail2865 2 жыл бұрын
I agree it's super useful
@franciscoalderete223
@franciscoalderete223 2 жыл бұрын
ratio
@adam-tt4yz
@adam-tt4yz 2 жыл бұрын
Yes
@meet_codes7467
@meet_codes7467 2 жыл бұрын
Please
@oku1317
@oku1317 2 жыл бұрын
I'm glad you brought up the user experience when using this effect, as I find it especially jarring when full page animations that aren't exclusive to the vertical axis are tied to scrolling. It's pretty surprising that they allow such a terrible user experience on Apple's site, and I really hope their implementation doesn't become a trend.
@justSomeUserOnYT
@justSomeUserOnYT 2 жыл бұрын
Yep and it's even worse on mobile. You have to physically keep scrolling with no indication as to if you are actually scrolling. This is just an art project when implemented but is some of the worst UX designs.
@DroolRockworm
@DroolRockworm 5 ай бұрын
It’s that classic case of a bunch of idiots deciding everyone likes some stupid thing they like and then everyone adopts it just because everyone is adopting it, with no critical thought involved on any level
@clingyking2774
@clingyking2774 2 жыл бұрын
😂 So glad I got this 30 mins after release, big fan. I use your channel to source awesome project ideas and new perspectives. You cool bro. Let's keep this going.
@erfling1
@erfling1 2 жыл бұрын
I love the Firewatch implementation. It's really simple and elegant. Something like 20 or 30 lines of very readable JS
@aVeryTinyCat
@aVeryTinyCat 2 жыл бұрын
Just want to add that while ScrollMagic has been used on many story-oriented sites in the past, it's now barely maintained and most of the functionality has been superseded by GSAP (timelines) in conjunction with the GSAP ScrollTrigger plugin, which is actively maintained.
@nathankelly5710
@nathankelly5710 2 жыл бұрын
Wow, nice to see the boat get a mention here, I work at SBS and know the developers who created the boat (sadly the creative team behind it has been disbanded). Thanks for the shout out though Jeff!
@DrakiniteOfficial
@DrakiniteOfficial 2 жыл бұрын
holy crap, this looks S O O O O much easier than handling all the parallax math myself. I should really start using React for my websites.
@eliascotrim51
@eliascotrim51 2 жыл бұрын
"I should really start using React for my websites!" - every programmer since 2012
@DrakiniteOfficial
@DrakiniteOfficial 2 жыл бұрын
@@eliascotrim51 too true.
@rodrigopatino3382
@rodrigopatino3382 2 жыл бұрын
I just cant believe my eyes... i was making this project as a graphic designer for my portfolio and suscribed to your channel 2 days ago. I was thinking... ''if only someone like Fireship did a tutorial explaining something like thiss woud be awesome, now I open youtube and see this"... man
@phantomrex1348
@phantomrex1348 2 жыл бұрын
Woah actually a KZfaqr I learn from! Keep up the awesome work 🤠
@ranadenish
@ranadenish 2 жыл бұрын
Dude, you should make more videos like this. I don't generally comment but I want you to know that your this kind of videos are sooo good!
@maestro097
@maestro097 2 жыл бұрын
Definitely the best channel currently on KZfaq. The quality of content, the animations, the narration and everything else… I’m happy whenever you upload another video. Keep up the great work man!
@bibhuprasad6962
@bibhuprasad6962 2 жыл бұрын
Best time of my day starts with this "5min" "Thanks a Lot"
@kosyauzer4787
@kosyauzer4787 2 жыл бұрын
You wont belive me, I was doing parallax today at work. Accuracy of topics u choose for videos are insane. For me at least
@Hmmmmmm487
@Hmmmmmm487 2 жыл бұрын
You are the best programing youtuber ever
@UnderstandingCode
@UnderstandingCode 2 жыл бұрын
Awesome! It's like an hybrid of SVG's detail and a web page
@turboballer
@turboballer 2 жыл бұрын
I can't get over how cool the Firewatch page is. Cleanest use of parallax I've seen.
@codecrook
@codecrook Жыл бұрын
That "Bye Mom" at the end, hit me real hard!
@DampeS8N
@DampeS8N 2 жыл бұрын
If you're down to learn stuff it is _usually_ much more performant to build your own parallax. You won't have to wait for libraries to update as new techniques for speed come out, and you will look like a rock star. You can take advantage of things like rendering backgrounds on a canvas and use other libraries that give you graphics acceleration, and bring down JS bloat.
@cokeantonio
@cokeantonio 2 жыл бұрын
True. I built my own parallax hook with framer motion which can be used to animate everything else as well and is not just limited to the parallax effect.
@kratos_respawned
@kratos_respawned Жыл бұрын
@@cokeantonio can you please share the GitHub link
@lamnguyenduy946
@lamnguyenduy946 Жыл бұрын
so freaking cool, thank you sm!!! subscribed twice
@abdallahshaban4804
@abdallahshaban4804 2 жыл бұрын
Your channel is one of all time favorites! Thank you, Jeff! This was so cool!
@samuelfarach
@samuelfarach 2 жыл бұрын
Heeey, I know that VOICE! GMTK!!! A pleasure to absorb your knowledge in a field other than video games!
@rachinter
@rachinter 2 жыл бұрын
Something about Fireship videos makes me wanna watch every fireship video that shows up on my recommendations, even if I don't understand some topics......but learned a lot from this channel btw 🔥💯👍
@fiddle4759
@fiddle4759 2 жыл бұрын
Just realised how much I've missed these types of videos from you. Still addicted to your channel in every way though.
@gavdev12
@gavdev12 2 жыл бұрын
Gosh I remember doing this with vanilla js back in the day
@LinkEX
@LinkEX 2 жыл бұрын
Was it hard?
@gavdev12
@gavdev12 2 жыл бұрын
@@LinkEX If it was very simple like a background image moving with a div moving faster over it, it wasn’t too bad. But once you start layering a bunch of svgs it can become a little much. Thank goodness we have React now :)
@Hari-ic8ui
@Hari-ic8ui 2 жыл бұрын
OH MY GOSH WHAT just this morning I was thinking about implementing a parallax on a webpage! And now I see this video. Wow, just wow.
@user-pb7ti1cl5h
@user-pb7ti1cl5h 2 жыл бұрын
Thanks a lot. Now I understand why I feel dizzy when I'm scrolling the Apple product pages
@MohdAfnan
@MohdAfnan 2 жыл бұрын
We want more 5 minutes tutorials like this one
@currenluna
@currenluna Жыл бұрын
5-min Vanilla JS WebDev Projects would be awesome! Thanks for these, Jeff.
@philhagerman
@philhagerman 2 жыл бұрын
I love these short tutorials on KZfaq as they provide a perfect jumping in point for my own research. The thing that stinks is they are always using React, Vue, or now Svelte. It seems there is no love out there for the enterprise developers who use Angular. I’d really appreciate seeing this type of content in an angular context every once in a while. 😀
@capfarps
@capfarps 2 жыл бұрын
like this format of tutorials!
@mvgiacomello
@mvgiacomello 2 жыл бұрын
5 MINUTES TUTORIALS FOREVER, forget about the other content types. Jokes, I watch all of them.
@AbdessamadLZ
@AbdessamadLZ 2 жыл бұрын
Just finished a chapter in svelte tutorial which contained the same firewatch game website you mentioned, it got me confused, but here you're saving me.. as always!
@glennmatsiwe8705
@glennmatsiwe8705 2 жыл бұрын
Yes please we would like these five minutes tutorials.
@chukwuemekaallison
@chukwuemekaallison 2 жыл бұрын
Woah!!! A lot of value in just 5 minutes. Awesome!!!
@CookiLover311
@CookiLover311 2 жыл бұрын
I had actually wondered how it worked
@norvusordoseclorum
@norvusordoseclorum Жыл бұрын
It's amazing how he finds such cool animations for his gifs
@universecode1101
@universecode1101 2 жыл бұрын
another cool video ✌🏻thanks
@44chan68
@44chan68 2 жыл бұрын
i have seen some people are copying fireship he is the God in these kind of videos awesome work
@shmuelisrl
@shmuelisrl 2 жыл бұрын
the fire watch page is so satisfying
@har8mes297
@har8mes297 2 жыл бұрын
wow!!! Thank you a lot!!! I never understood how to do parallex effects. That there is a React library for that is incredible. Now i can try to make my web page more interactive!
@blaxyslice
@blaxyslice 2 жыл бұрын
Chocolatey and Homebrew might be a good topic for a video :)
@code913.
@code913. 2 жыл бұрын
I was brainstorming for stuff to add to my website, and then this video is released. Love the video ♥
@thisismadnis3978
@thisismadnis3978 2 жыл бұрын
This was great I like the fact that you can use this tutorial directly in the next website you build with a minimal learning curve. Hope to see more 5 min videos like this!
@arkk5087
@arkk5087 2 жыл бұрын
I’m addicted to this channel. Someone please help me decide if it’s good or bad🙃
@CreativeTutorialsWeb
@CreativeTutorialsWeb 2 жыл бұрын
Wow another great work by fireship, your projects are so underated 🔥
@avidworkslol
@avidworkslol 2 жыл бұрын
The Firewatch parallax is soooo good.
@MercyFromOverwatch2
@MercyFromOverwatch2 2 жыл бұрын
Jeff is still my favourite tech youtuber
@kaufmandaniboy
@kaufmandaniboy 2 жыл бұрын
Five minutes tutorials are awesome! Keep doing them! And add more svelte content 🚀
@Alex-xl4xe
@Alex-xl4xe 2 жыл бұрын
Thanks for the "don't fuck with scrolling"-disclaimer a the end.
@ucielsola
@ucielsola 2 жыл бұрын
Firewatch, one of the best games I've played. Fireship, one of the best KZfaq channels I've found.
@Reddit_StorryTeller
@Reddit_StorryTeller 2 жыл бұрын
Thx man, I've been trying to learn how to do these things for so long now!
@ivangunchev4782
@ivangunchev4782 2 жыл бұрын
Your ability to show off a technique quickly and with no fluff is second to none!
@princzesbarnabas
@princzesbarnabas 2 жыл бұрын
Thanks a lot! I just love this channel. In the last week i was looking for this solutuion for a personal portfolio website and my best idea was to use framer motion. But this lib makes it even easier!
@ananthdev2388
@ananthdev2388 2 жыл бұрын
deja vu, i feel like i've already seen a video on parallax scrolling from your channel
@averagebearattackenjoyer5903
@averagebearattackenjoyer5903 2 жыл бұрын
Nice! One of these things which kinda impressed me but didnt know if this scrollable 3d effect even has a name. Need to try this one out for sure
@Ruf4eg
@Ruf4eg 2 жыл бұрын
The best content ever, please do powershell
@RobertWildling
@RobertWildling 2 жыл бұрын
Since you ask what we would like to see next: How about a how-to of those icons of the programming languages that you introduce in your 100 minute series? (I think this is the 3rd time that I am asking for them... sorry, but they are just soooooo cooooool!)
@BG-fo4si
@BG-fo4si 2 жыл бұрын
Absolutely love it. It's what we need in IT industry - quick tuto, how to make the job done and bye
@DecentraTalks
@DecentraTalks 2 жыл бұрын
I have to just confirm that Fireship pro is 100% worth it
@OzTheWizardOfPorn
@OzTheWizardOfPorn 2 жыл бұрын
Codegrid made a video on parallax years ago using only HTML and CSS. For those who like to build stuff from scratch. (note: for complex parallax effects a framework is highly recommended!)
@t.s5806
@t.s5806 2 жыл бұрын
Fireship just dropped another gem🔥🔥🔥
@suvraneelsaha7857
@suvraneelsaha7857 10 ай бұрын
Great one , But im learning now html css now and making basic websites , Im scared but tbh im loving it . Thanks Fireship
@DK-ox7ze
@DK-ox7ze 2 жыл бұрын
The Apple pages never scroll smoothly when using parallax. It seems that it's quite cpu/gpu heavy, especially when using multiple parallax layers. Apple should come up with something new now!
@69k_gold
@69k_gold 2 жыл бұрын
Its a sharp 5 minute video. Respect!
@red-brains
@red-brains 2 жыл бұрын
Amazing 😃😃😃😃
@EsquisseBeats
@EsquisseBeats 2 жыл бұрын
Firewatch’s website is as beautiful as their game
@aashimabatra7186
@aashimabatra7186 10 ай бұрын
that cat has my heart
@salemexpress3014
@salemexpress3014 2 жыл бұрын
5 mins tutorial is great
@siddhantsharma8454
@siddhantsharma8454 2 жыл бұрын
Omg I just love these 5 minutes project😍😍
@thatrandomguy8788
@thatrandomguy8788 2 жыл бұрын
Thanks! These 5 min videos are really good for getting a good sense of what to expect. Maybe make a video on when to use different NoSQL databases like HBase, MongoDB, CouchDB, etc? Don't know if other people also want to see this kind of content though..
@daveyeb1
@daveyeb1 2 жыл бұрын
more 5 mins web dev projects!!!
@BlurryBit
@BlurryBit 2 жыл бұрын
Ah man, pexels!! Wow now that's an upgrade over unsplash for sure! Thank you for the tip. x-)
@waltersumofan
@waltersumofan 2 жыл бұрын
that's looks like a lot of fun, thank you!
@anil__k
@anil__k 2 жыл бұрын
Thank you Jeff❤️
@stephenthumb2912
@stephenthumb2912 2 жыл бұрын
You have me at me parachuting cat
@symphony_vk
@symphony_vk 2 жыл бұрын
Loved this video, Jeff! Can you please do a full react-spring coarse for pro members? I would be really nice!
@MrVanzine
@MrVanzine 2 жыл бұрын
nice one , a 5 min solana Dapp in rust/react would be cool
@tiu5270
@tiu5270 2 жыл бұрын
Amazing tutorial, I just thinking about making parallax web site then this video showed up 🥳
@Filaxsan
@Filaxsan 2 жыл бұрын
Just. Awesome! Thanks Jeff!!
@johndavidson8096
@johndavidson8096 2 жыл бұрын
Would love to see a tutorial on reactjs + tailwind + electron! Or even possibly setting up vite with electron
@bedji
@bedji 2 жыл бұрын
I like this New format of tutorial 👏
@mohammedramadan740
@mohammedramadan740 11 ай бұрын
Perfect Explanation Jeff!
@uncoverjapan
@uncoverjapan 2 жыл бұрын
Just another example of firewatch as a brand just being on point with their aesthetics and design.
@Hopp3rTx
@Hopp3rTx 2 жыл бұрын
Thanks for increasing my hourly rate!
@YieGin
@YieGin Жыл бұрын
That was pretty good thanks
@ahmedthebest
@ahmedthebest 2 жыл бұрын
This kind of video is very interesting
@yashsolanki069
@yashsolanki069 2 жыл бұрын
Thanks for this cool demo ser! .🙌
@mohamednassimouerdane1229
@mohamednassimouerdane1229 2 жыл бұрын
Amazing video, I would like to see Chart.Js next in a 5min video :)
@Vbarnaaa
@Vbarnaaa 2 жыл бұрын
Amazing!! Thanks for the tutorial
@AdamSchnaare
@AdamSchnaare 2 жыл бұрын
Awesome video! Something I'd love to know your thoughts on - best practices for building and using a component library. And particularly...any thoughts on how to document them efficiently?
@anonyme3029
@anonyme3029 2 жыл бұрын
awesome and simple tutorials as always
@pessoadahora446
@pessoadahora446 2 жыл бұрын
5 minute project format is awesome!
@kushyglowy8409
@kushyglowy8409 2 ай бұрын
Astonishing
@mueezafzal9747
@mueezafzal9747 2 жыл бұрын
Great Tutorail, Could you please make video about Rails 7. Thanks!
@JrIcify
@JrIcify 2 жыл бұрын
These kinds of websites are why I use 'reader view' quite a lot these days >_>
@gautamnath7458
@gautamnath7458 2 жыл бұрын
Pls make more on these small tutorials 💙💙
@kiryonnakira7566
@kiryonnakira7566 2 жыл бұрын
very cool effect
This Simple Trick Makes Your Website 83% Better Looking
10:57
Web Dev Simplified
Рет қаралды 388 М.
Top 2024 Web Design Trends
5:32
Codex Community
Рет қаралды 575 М.
Pool Bed Prank By My Grandpa 😂 #funny
00:47
SKITS
Рет қаралды 20 МЛН
123 GO! Houseによる偽の舌ドッキリ 😂👅
00:20
123 GO! HOUSE Japanese
Рет қаралды 6 МЛН
OMG what happened??😳 filaretiki family✨ #social
01:00
Filaretiki
Рет қаралды 13 МЛН
Billionaire Pavel Durov arrested... The truth about Telegram
4:09
Fireship
Рет қаралды 1,1 МЛН
This UI component library is mind-blowing
8:23
Beyond Fireship
Рет қаралды 653 М.
10 regrets of experienced programmers
8:16
Fireship
Рет қаралды 1,3 МЛН
Simple Pure CSS Parallax Scroll Tutorial
26:36
Developer Filip
Рет қаралды 69 М.
UI Libraries Are Dying, Here's Why
13:28
Theo - t3․gg
Рет қаралды 303 М.
God-Tier Developer Roadmap
16:42
Fireship
Рет қаралды 7 МЛН
10 Programmer Stereotypes
5:08
Fireship
Рет қаралды 3,1 МЛН
Create PARALLAX SCROLL EFFECT In Figma | Figma Tutorial
10:56
Masterclass: AI-driven Development for Programmers
8:49
Fireship
Рет қаралды 1,1 МЛН
Why I Love Being a Software Engineer
8:53
Marko
Рет қаралды 819 М.
Pool Bed Prank By My Grandpa 😂 #funny
00:47
SKITS
Рет қаралды 20 МЛН