Star Wars Scrolling Text Tutorial (CSS Animation)

Подписаться 1,5 млн

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

50% 1

Hey gang, in this CSS animation tutorial we'll create a scrolling block of text that fades into the distances, just like the Star Wars movies.
Timestamps:
0:00 - introduction
1:42 - html template
4:22 - base styles
8:14 - scrolling animation
10:36 - css perspective
16:42 - fading out the text
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/vu...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/star-wa...
🐱‍💻 🐱‍💻 Helpful Links:
+ CSS Animations tutorial:
• CSS Animation Tutorial...
+ HTML & CSS Crash Course:
• HTML & CSS Crash Cours...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

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

19 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@stephenhewlett3504 3 года назад

The dust particles all over my screen really gave an outer space vibe to the background

@NetNinja 3 года назад

Haha, nice

@rahulsriram6295 3 года назад

Oh Shaun, if I have immense respect for any dev RU-vidr out there, its you. You're the chosen one. May the force be with you...💓

@spellsaif 3 года назад

You are changing life of many... Thank You, Master :)

@ArtVandelayInc 3 года назад

Awesome tutorial as always. You are a gift for us for sure

@keyos27 3 года назад

Wow, thank you for doing this!

@jidaasare7021 3 года назад

Thanks so much Shaun! You are amazing!!!! Can't wait for possible lessons in GSAP

@jitupedret896 3 года назад

Amazing! I was searching just for it.

@kuroikenshi9217 3 года назад

Cool Shaun-sensei, thank you🖤

@grayshark7713 3 года назад

Awesome! Thank you so much.

@ericcarver7465 2 года назад

Another cool informative vid by Net Ninja! I learn what you are teaching and also learn emmet tidbits along the way too. Awesome!

@sanjibdey01 3 года назад

This has a separate fan base !!! Thank you, Master 🙏

@a7medev 3 года назад

Awesome, Man! ⚡

@mrahmedfuad2656 3 года назад

Just from looking from the thumbnail this gonna be AMAZING!!!!!!!

@sheikhabubakar1705 3 года назад

Thank you so much!

@remkospaans 3 года назад

Hello there! As Star Wars fan i like this. May the force be with you master Ninja.

@DanFlakes 3 года назад

Woah that looks great!

@sanan4li 3 года назад

You are awesome man.. love your tutorials and more importantly your accent 😉

@frodion 3 года назад

I couldn't stop laughing when I saw the Lorem Ipsum Text in the first seconds 😄 You made my day

@xandresousax 2 года назад

Thanks!

@swoorp 3 года назад

😍😍😍😍love you Shaun sir, the thumbnail got my heart... And then your voice💓 hopefully I would be able to help you make projects one day.!!!

@NetNinja 3 года назад

Thank you!!

@swoorp 3 года назад

@@NetNinja ☺️

@fanegantosin2973 3 года назад

I love this

@briandesign 3 года назад

This is epic 🔥

@kipyegonline 3 года назад

Haha, incredible...May the force be with you.

@fatimasyed1782 3 года назад

awesome

@christersin7934 3 года назад

wow, learn new things. How to control the animation go through....line z like a 3D animation. Awesome! Thankyou very much sir.

@chideraachinike7619 3 года назад

You're awesome!

@ScottPlude 3 года назад

brilliant!

@nishadmm5508 3 года назад

Nice🖤

@danielbark 3 года назад

Nice one Ninja! :D

@PsimanUK 3 года назад

Awesome tutorial! I didn't realise so much could be done with CSS. I've learnt quite a lot from this video about animations. Right, now I'm off to put some of it into practice. Thanks!

@mustaphaELHOURA 3 года назад

You are really the best, teacher in the net

@saandial3412 3 года назад

Love your content! Please create a MEVN ecommerce course like Traversy's MERN.

@maskman4821 3 года назад

Sir, when will you release pwa (workbox, push notification, saving live / dynamic data from any remote api (except firebase) to browser storage such as indexdb using service worker ) tutorials ???

@antomicawad6377 3 года назад

Niceeeee !!!

@manishbatra4 3 года назад

i am trying to do it with framer motion. great timing enjoy The Mandalorian everybody

@abhishekjha1390 3 года назад

I was waiting for this😀😀

@mohdalghoul8673 3 года назад

Thanks master, how about electron js tutorial 😉

@royangagas2519 3 года назад

This can be implement to my exam project web design, thanks for this tutorial

@zoeballz Год назад

Hi there :) Many thanks for this. I have been adapting it for my own purposes but I have come across a bug (I think). The longer the amount of text, the larger the text gets, until complete sentences no longer fit on the screen. Don't suppose you can help with that maybe ? I realise you did this a long time ago. Thanks.

@ridl27 3 года назад

ty.

@pratikgohil7821 3 года назад

0 dislikes, love for net ninja ❤

@matteofrancese1014 Год назад

Can i scroll the text without animation? Such a normal page with the mouse wheel?

@shineLouisShine 8 месяцев назад

Looks good ,thanks. But... How do I set it to start from the first line / fron the bottom of the screen... When you put an actual text and not Lorem - It become much more crucial to not lose information...

@mate5375 3 года назад

If the animation doesn't start, when you declare the doctype in the html, give the "body" a height of 100vh.

@allex204 3 года назад

But the animation looks very different then. Did anyone find another solution?

@enduranceochonogor6291 3 года назад

Hey Shaun. Can you do a MERN stack series with authentication and perhaps Redux??? Big fan here.

@ash-faque 3 года назад

Que the music 🤺

@VasTracer 3 года назад

Hey, can you make the same with ?

@sanghvian 3 года назад

Long live the ninja !

@adnanamin3666 3 года назад

💜💜💜💜💜

@shubhang2877 3 года назад

Ohhhhhhhhhhh Snappppppppppp

@madebytl 3 года назад

Haha just learned your bacis HTML CSS 😇

@jibinjoseph5228 3 года назад

Can you do a tutorial series on gsap ❤️

@keyos27 3 года назад

I noticed if I use "" if changes the font size, which makes it look totally different. Anyone know why it is causing it?

@lucadifazio2735 3 года назад

Same happened to me. I struggled for quite an hour and that was causing the bug. I really can't understand why. Also, everything nowadays has ...

@NagaVibzartworks 23 дня назад

thanks, I had my fonts and animation upside down untill I deleted :)

@maciekc.9898 3 года назад

Love the new tutorial :) Wondering if there will be Vue 3 course or Vue 3 Composition API :) to be clear it is not a request or any suggestion ;) simple yes/no question :D I couldn't found good Vue/Django full-stack project ...now that is a small suggestion due to a quite a gap in the whole RU-vid tutorials :D:D:D

@NetNinja 3 года назад

I'm working on a Vue 3 course right now for Udemy, but will also upload a free one here too when I'm done :)

@maciekc.9898 3 года назад

@@NetNinja Awesome !! :)

@maskman4821 3 года назад

@@NetNinja wow, that would be awesome, vue 3 has a ton of new stuff, I am still using vue 2 option-api, very excited and looking forward to see the vue 3 course !!!

@lucadifazio2735 3 года назад

If I use I have a different output. Why?

@LuckyLootTube 9 месяцев назад

How do i change the font, please?

@RameenFallschirmjager 3 года назад

WWWOOOOOO HHHHOOOOOOOO Star Wars!

@swoorp 3 года назад

🌟 star wars Ninja

@surajkushwah3221 3 года назад

jedi mind css tricks.

@hemanthkumar8330 3 года назад

Noice...

@obinator9065 3 года назад

**click**

@pawanpatil 3 года назад

Hi Shaun. Can we have Next JS tutorial

@adityamaurya8092 3 года назад

Hey ninja make a tutorial when user scroll then the load data from database as we seen from Facebook comment section

@NetNinja 3 года назад

That's so crazy - I'm literally working on a data lazy-load scroll tutorial now!

@volkankahraman_ 3 года назад

@@NetNinja Hey can you use firebase as backend. So we would have undertanding of pagination with firestore. Also loading all of documents with one query is not performance and cost efficent with firestore. Which you are doing it in all of your firestore tutorials(loading all documents) and I think pagination with firestore is hard to grasp for beginners. Thanks for the good tuts keep it up 🐱‍👤

@swoorp 3 года назад

@@NetNinja hi master, if you would like, I've got a similar project that I've been working on. my project is for the scrollbars and is now taking a shape of a js library. if you don't mind you can take over the project and... right now it's a private repository on GitHub, if you want to see it ill make public!

@NetNinja 3 года назад

That’s exactly what I’m doing :)