Roll Dice Project using CSS & JavaScript

preview_player
Показать описание
Hey guys 😁 We have an unbelievable JavaScript tutorial again. I have to say that CSS is also used a lot in this Roll Dice Project and by watching this video, you finally learn how CSS 3D design and Neu Morphism work. Don't forget to give a thumbs up and subscribe to my channel for more unseen videos 😎

📂 Assets

🔗 Source code

🔔 Subscribe Now!

⏱ Timestamps
00:00 What are we gonna design ?!
00:42 Dice elements
01:04 General Styles
01:38 Dice styles
09:26 Adding Roll Button
09:51 Container styles
10:35 Roll Button styles
11:41 Rolling Animation
12:28 Starting JavaScript
12:51 Making Random Dice
13:45 Rolling the dice
15:52 Making it go smooth
16:18 Final Result

🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein
Рекомендации по теме
Комментарии
Автор

Took some hours to be done, but it looks amazing now 🍻

CodeWithHossein
Автор

Great project -using lots of interesting techniques. Thanks so much :)

paulthomas
Автор

An awesome tutorial. More of this please. 🙂

shortyshorty
Автор

We need a 20 sided dice video! Please make it. One that works on HTML 5 websites.

GetRealwithMike
Автор

How can I make the dice roll only once and then stop?

polskamacius
Автор

Could your next video share the extension you're using? That's very helpful for newbies, thanks

h.symphony
Автор

Why does the die seem to roll 2 or 3 times for every single roll? It’s like it rolls, but before it stops it starts another roll. How can we get the animation to roll once and then stop on the random number?

jeremypruitt
Автор

Bro which software do you use for video editing?

HuzzzaifaMohd
Автор

Bro I want auto scroll photo tutorial please 🙏

pubggaming
Автор

Why don't u add shadows to the dice? It'll be better and more realistic

osamatawfeq
visit shbcf.ru