Reverse Engineer Google’s NASA Dart Easter Egg with CSS

Подписаться 389 тыс.

Просмотров 89 тыс.

50% 1

Learn how to implement Easter eggs on your website like Google by reverse engineering the NASA Dart animation effect. Let’s code an image that flies in from the left side of the screen, explodes, then tilts the website using nothing but plain HTML and CSS.
#css #tutorial #nasa
Find more easter eggs here fireship.io
Use code BLASTOFF to get 30% off a Pro Membership

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

2 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 156

@bobthebuilder5746 Год назад

Thanks for breaking down that Easter egg! Please do the Bat-signal next!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@Brunoenribeiro Год назад

"we need to PROGRAM some html" cheeky bastard ❤️

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲.

@AByteofCode Год назад

Last stretch to 100k and beating the record for fastest programming channel to go from 0 to 100k!

@BamboozeldGG Год назад

Nice to see the devs paying attention to space flight

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@huynguyenvan1657 Год назад

Congrats 100 thousand subscribers 🥳

@marwenlabidi_dev Год назад

Thank you for this great quality content ❤️

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@genzprogrammer Год назад

Congrtz on 100K

@DArK-xj8lr Год назад

Congrats on 100k!!

@spooky4655 Год назад

CONGRATS ON 100K !!

@greatfiredragon Год назад

Thank you so much! Your videos make me smile be and think ❤️🧡💛💚💙💜

@muhammedmikdad6189 Год назад

Hell yeah man good work

@charlierick8517 Год назад

Love the new channel, congrats on fulfilling your lifelong dream of 100K

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@tytgalaxy1228 Год назад

thanks, downloaded, all works!

@sonmangaking Год назад

What a way to start my weekend gonna code this up thanks 😊

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲.

@shashikantmarskole Год назад

thank you for quick and quality content.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@WillJackDo Год назад

Congrats on 100k!! Finally, you're getting some real exposure...

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@frederickamalemerson1059 Год назад

fireship is the reason to live 🛐

@codeyverse2047 Год назад

Beyond fireship is the reason to live

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@mxlowkey Год назад

Thanks for the Tutorial 💙

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@paragjadhav4105 Год назад

Thank u for this ❤❤

@ayoubmerjie1600 Год назад

Congratulations for 100K

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@prajwalbodke7413 Год назад

Works good, tnx

@jampopoy18 Год назад

grats reaching 100k

@codingwithchamindu 10 месяцев назад

valuable video🔥

@abhinavadarsh7150 Год назад

Congratulation! 🎉🎉 100k Reached.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@adarsh-chakraborty Год назад

This was awesome

@FdWebdesign Год назад

Good Job

@sourav_96 Год назад

OMG , awesome stuff

@Hernan-Kza Год назад

Thx!

@aniruddharao8735 Год назад

Didn't know about the animation direction property. Nice

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@xtechli Год назад

100K sub in less than a month 🐐 Thanks for the Tutorial 🙂

@thecodingchef9292 Год назад

That's how you know who a legend is

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@avidworkslol Год назад

Happy 100K!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲.

@flaguser4196 Год назад

now we just need a digitized bruce willis to prevent the website from crashing

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@iiWolff Год назад

Subscribed!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲.

@18.j Год назад

But google is using a canvas for the crash animation and rotating the whole body by 1 degree. I checked inspect element

@frittex Год назад

You don't have to end the first anim at 50% and start the other at 50%! You can just use animation delay, and start the second anim after the first one finished

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@nocturno7887 Год назад

Wow my fav engineer. I was impressed the first time I saw you mentioning about flat earth. Regards

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@RAHULKUMAR-wn8po Год назад

This is not first mention of flat earth. He mentioned many times on main channel

@_virendrasingh Год назад

Pure CSS is awesome.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@mindmelter1098 Год назад

Almost 100K!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@dorktales254 Год назад

100k let's goo

@victormonteirocunha4575 Год назад

Dude, jeff is a fucking goof, I love this!

@sdwone Год назад

Hehe... Nice! This Easter Egg also reminds me of the Thanos Snap!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@juliocodes Год назад

Forwards is actually the animation-fill-mode, not the direction. Good stuff though 🙌

@LegendaryFartMaster Год назад

I'd love to see the wordle animation recreated!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@nomadshiba Год назад

you can use timing function to shake the site too

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@jyothishnarayana7420 Год назад

hi i am big fan of your videos. as a fullstack web developer i learn a lot of things from your videos. can you do the 3js animations and how to implement of 3js to a pwa in real time..? that would help us to entring a future computer world

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@iuashrafi Год назад

can you please break down Yolele product page! Thanks 🙏

@ZbeastVIP Год назад

when is the react course being released?

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@muneebmohd Год назад

Fastest growing channel in the west

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@mikeverlinde7116 Год назад

Where do you get the gifs from for your video's? And permission to use them

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@isheanesunigelmisi8400 Год назад

Oh, this is a very cool one. Please accept my humble token of fire emojis 🔥🔥🔥

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@moosyu Год назад

yes

@Reichstaubenminister Год назад

Mr. Dubay would be proud.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@md.asadujjaman3445 Год назад

just wow

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@abdullahhouran96 Год назад

I was the 100k subscriber W

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@ahmedhafiz2419 Год назад

I gotta say. Fireship Easter eggs are more interesting than Google one 🤩🤩

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@mardax007 Год назад

cool

@zeeshanjaffer1835 Год назад

all workеd

@DemPilafian Год назад

It's a nice video, but it looks like the crash did not smash into Google hard enough to prevent human extinction.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@RAKESHKUMAR-cp3hl Год назад

"Life long dream to get 100k, ever since I started this channel a few weeks ago" 🤣

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@rajatnagarkar Год назад

What graphic card would have been used to render space!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@wael_shaikh Год назад

Lifelong dream ever since a couple weeks ago 😂

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@finsflexin Год назад

I love the unnecessary curse words. Even though usually it sounds rude and unprofessional, it just feels humorous here.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲.

@definite_d Год назад

SurrealDB just released a beta version!

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@AnweshAdhikari Год назад

❤

@abcq1 Год назад

Tried "basa dart". It works. Google is broken)

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@StephenGillie Год назад

With keyframe CSS, who needs Blender?

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@NorthernChimp Год назад

Interestingly completely different from what I see inspecting Google's page.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲😊

@beebakrizzle Год назад

i wouldn't say that "translate" in css is already ready for prime-time. Only about 80% coverage reported by caniuse.

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@stefan1397 Год назад

"First we need to program some HTML"... I see what you did there

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲

@dabbopabblo Год назад

Translate is NOT supported in all browsers and will not work on safari Mac or edge windows or mobile browsers

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲.😊

@SameAsAnyOtherStranger Год назад

Hey! How about a spoiler alert the next time you rip the veil off of my carefully constructed version of reality aided by fake news about space exploration?

@user-gm3eo1dp1y Год назад

Questions can come in⬆️📲.