Hello friends, how are you guys, thank you very much for liking this video. So in this article, I am going to tell how I have made a spinning wheel that too without any plugin. I have used only HTML, CSS, and JavaScript in this.
The wheel which is in it and there is a button in the middle of it, after clicking on it, the wheel which is there will rotate 360 degrees and the time of rotation of the wheel will be random i.e. two seconds, 3 seconds, 5 seconds like this and so on. There will be random numbers inside the wheel. After that, it will stop at some random number. And I have set an arrow in it and I have given animation in it. The animation of the arrow will happen when the wheel stops spinning, then the animation of this arrow will happen.
I have displayed the code below, you can copy it. To copy this code, you must first create three files. First index.html, second style.css, and third script.js, you have to create these three files. And there is no need to add any separate script or plugin to it. So I understand what is in which file.
You also might like this video
Portfolio Website Design With Animation Using HTML, CSS & JS | GSAP – GreenSock Animation
Portfolio Website Design | Website Landing Page Design & Animation | HTML, CSS, ANIME JS
Landing Page Design Only HTML & CSS With Animation | Portfolio Website Design With CSS Animation
Portfolio Website Design using html, css, jquery | Multiscroll | OnePage Website | Fullpage js
Spinning wheel game source code
index.html In this file I have put the complete code of HTML in which I have taken box one and box two and have taken four-span tags inside it. And inside it, I have written random values. You can write anything on it.
style.css This file contains the code for the complete spinning wheel design. In which I have used CSS clip-path polygon. Have used frame animation of CSS. Transform rotate is used. The second thing after that is the CSS transform translate and rotate which is set with different values in each polygon. After that, I have positioned the class named spin as absolute and when I click on it, its width and height have been reduced by 5px so that we know that it has been clicked and I did this thing with the CSS pseudo-active property.
script.js This file contains complete JavaScript code. There is no jQuery used in this, it is pure JavaScript. In this, I have taken a function by the name of my function. In this, I have two variables named X and Y and I have stored the random value key inside it. After this, I took another variable called a degree in it I gated a value from math floor random techniques. I used this value in transform rotate with the help of JavaScript script so that we can rotate the spinning wheel randomly. After that, I removed the class of animate which I used for animation in CSS. After that took the function of set timeout and added the class of animate inside it with the help of JavaScript. After that I set the same value in a value list variable (“10”, “20”, “50”, “100”, “150”, “200”, “400”,” 500″) which we used in HTML In the structure of the span was taken inside the tag. Then I got this value selected at random which you can see in the code below.
As you guys can see I have made a simple spinning wheel and it is made just for entertainment and practice of HTML, CSS, jQuery. There are many such spinning wheels in which many advanced features are given, and you can customize them to a great extent. I will attach its link below, you can use it.
I have made this spinning wheel very simple, if you want, you can add more functionality to it. Here I made a simple JavaScript project. If you are a college student then you can use it in your project. The series of portfolio websites, which I had created for college students, you can also see and create a project for yourself.
Thank you so much for watching this article and video of mine. If you want to see such interesting videos, then definitely subscribe to my learndesign youtube channel and bookmark this website so that gives you such funny articles, take care of yourself and be happy.
1 comment
Interesting that as you click the spin button, the animation slows down. Then speeds back up. Then slows down to a crawl. The speeds up.