Menu
need help, want to spin the image and after 3 sec it must stop with random dergree (from 360 to 10800). it starts spin when I click it from the last position.
when the image stops, it appears an area with RANDOM citation from my massive. it must be something like "spin the bottle"
please help, I've got some code, but don't know how to finish it.
.wheel {
animation: wheel 3s .5s;
animation-fill-mode: both;
}
@keyframes wheel {
from {
transform: rotate(0);
}
to {
transform: rotate(10800deg);
}
}<head>
<link rel="stylesheet" href="bottle.css">
<script src="bottle.js"></script>
</head>
<img id="wheel" class="wheel" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">
744
Elements cannot act randomly in CSS because we have no random function to control them with, but elements can still appear to act randomly by using an intricate form of animation.
var time = Math. random(); From here we can find the red circle in the SVG and change the --animation-time CSS variable via the setProperty method: var red = document.
Javascript creates pseudo-random numbers with the function Math. random() . This function takes no parameters and creates a random decimal number between 0 and 1. The returned value may be 0, but it will never be 1.
random() The Math. random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.
You can do this with css custom properties. The first thing to do is create a property for your transform:
:root{
--rot: rotate(108000deg);
}
And then use that in place of your hard-coded value
@keyframes wheel {
from { transform: rotate(0);}
to { transform: var(--rot); }
}
At this stage everything should carry on working as before.
Now you can manipulate that property with javascipt:
var min = 360;
var max = 108000;
var rnd = Math.random()* (max - min) + min;
console.log(rnd);
var wheel = document.querySelector(".wheel");
wheel.style.setProperty("--rot","rotate(" + rnd + "deg)");:root{
--rot: rotate(108000deg);
}
.wheel {
animation: wheel 3s .5s;
animation-fill-mode: both;
}
@keyframes wheel {
from { transform: rotate(0);}
to { transform: var(--rot); }
}<head>
<link rel="stylesheet" href="bottle.css">
<script src="bottle.js"></script>
</head>
<img id="wheel" class="wheel" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">If you want to repeat the animation on something like a click you need to doa bit of a workaround
var min = 360;
var max = 108000;
var wheel = document.querySelector("#wheel");
wheel.addEventListener("click", function(e) {
e.preventDefault;
// -> removing the class
wheel.classList.remove("wheel");
// -> triggering reflow /* The actual magic */
// without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
// Oops! This won't work in strict mode. Thanks Felis Phasma!
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void wheel.offsetWidth;
var rnd = Math.random()* (max - min) + min;
console.log(rnd);
wheel.style.setProperty("--rot","rotate(" + rnd + "deg)");
// -> and re-adding the class
wheel.classList.add("wheel");
}, false);:root{
--rot: rotate(108000deg);
}
.wheel {
animation: wheel 3s .5s;
animation-fill-mode: both;
}
@keyframes wheel {
to { transform: var(--rot); }
}<head>
<link rel="stylesheet" href="bottle.css">
<script src="bottle.js"></script>
</head>
<img id="wheel" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
