Skip to content

Instantly share code, notes, and snippets.

@rambhairao

rambhairao/jsbin.valome.css

Last active September 16, 2017 06:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rambhairao/9193c0dd8eb3bef301f34211d401a114 to your computer and use it in GitHub Desktop.
Save rambhairao/9193c0dd8eb3bef301f34211d401a114 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source http://jsbin.com/valome
Raw
jsbin.valome.css
body{
background-color : red;
color : #fff;
}
#wrapper{
position: relative;
width: 300px;
margin: 150px auto;
}
#wheel{
width : 280px;
height: 280px;
overflow: hidden;
background-color: yellow;
border-radius: 50%;
border: 5px solid black;
transform: rotate(0deg);
}
#inner-wheel{
width: 100%;
height: 100%;
transition: all 10s cubic-bezier(0.15, 1.37, 0.44, 0.99);
}
.sec{
width : 0px;
height: 0px;
background-color: transparent;
border: 1px solid blue;
border-width: 152px 88px 0px;
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(0deg);
position: absolute;
top: 0px;
left: 42px;
transform-origin: 91px 152px;
}
#wheel div.sec:nth-child(1){
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
border-top-color: #00e5ff;
}
#wheel div.sec:nth-child(2){
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
border-top-color: blueviolet;
}
#wheel div.sec:nth-child(3){
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
border-top-color: #e600ff;
}
#wheel div.sec:nth-child(4){
transform: rotate(120deg);
-webkit-transform: rotate(180deg);
border-top-color: #62ab7c;
}
#wheel div.sec:nth-child(5){
transform: rotate(120deg);
-webkit-transform: rotate(240deg);
border-top-color: #00ff5c;
}
#wheel div.sec:nth-child(6){
transform: rotate(120deg);
-webkit-transform: rotate(300deg);
border-top-color: #ffbf00;
}
#spin{
width: 63px;
height: 59px;
background: #fff;
position: absolute;
top: 43%;
left: 37%;
border-radius: 50%;
cursor: pointer;
}
Raw
jsbin.valome.js
$(document).ready(function(){
$(document).ready(function(){
var defaultDegree = 1800;
var clicks = 0;
$("#spin").click(function(){
clicks++ ;
var newdegree = defaultDegree * clicks ;
var extraDegree = Math.floor(Math.random() * (360)) + 1;
var totalDegree = newdegree + extraDegree;
$("#inner-wheel").css({
'transform': 'rotate( ' + totalDegree + 'deg )'
});
});
});
});
Raw
rolling-ball.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style id="jsbin-css">
body{
background-color : red;
color : #fff;
}
#wrapper{
position: relative;
width: 300px;
margin: 150px auto;
}
#wheel{
width : 280px;
height: 280px;
overflow: hidden;
background-color: yellow;
border-radius: 50%;
border: 5px solid black;
transform: rotate(0deg);
}
#inner-wheel{
width: 100%;
height: 100%;
transition: all 10s cubic-bezier(0.15, 1.37, 0.44, 0.99);
}
.sec{
width : 0px;
height: 0px;
background-color: transparent;
border: 1px solid blue;
border-width: 152px 88px 0px;
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(0deg);
position: absolute;
top: 0px;
left: 42px;
transform-origin: 91px 152px;
}
#wheel div.sec:nth-child(1){
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
border-top-color: #00e5ff;
}
#wheel div.sec:nth-child(2){
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
border-top-color: blueviolet;
}
#wheel div.sec:nth-child(3){
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
border-top-color: #e600ff;
}
#wheel div.sec:nth-child(4){
transform: rotate(120deg);
-webkit-transform: rotate(180deg);
border-top-color: #62ab7c;
}
#wheel div.sec:nth-child(5){
transform: rotate(120deg);
-webkit-transform: rotate(240deg);
border-top-color: #00ff5c;
}
#wheel div.sec:nth-child(6){
transform: rotate(120deg);
-webkit-transform: rotate(300deg);
border-top-color: #ffbf00;
}
#spin{
width: 63px;
height: 59px;
background: #fff;
position: absolute;
top: 43%;
left: 37%;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec">
<span></span></div>
<div class="sec">
<span></span></div>
<div class="sec">
<span></span></div>
<div class="sec">
<span></span></div>
<div class="sec">
<span></span></div>
<div class="sec">
<span></span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
</div>
<div id="shine"></div>
</div>
<div id="txt"></div>
</div>
<script id="jsbin-javascript">
$(document).ready(function(){
$(document).ready(function(){
var defaultDegree = 1800;
var clicks = 0;
$("#spin").click(function(){
clicks++ ;
var newdegree = defaultDegree * clicks ;
var extraDegree = Math.floor(Math.random() * (360)) + 1;
var totalDegree = newdegree + extraDegree;
$("#inner-wheel").css({
'transform': 'rotate( ' + totalDegree + 'deg )'
});
});
});
});
</script>
<script id="jsbin-source-css" type="text/css">body{
background-color : red;
color : #fff;
}
#wrapper{
position: relative;
width: 300px;
margin: 150px auto;
}
#wheel{
width : 280px;
height: 280px;
overflow: hidden;
background-color: yellow;
border-radius: 50%;
border: 5px solid black;
transform: rotate(0deg);
}
#inner-wheel{
width: 100%;
height: 100%;
transition: all 10s cubic-bezier(0.15, 1.37, 0.44, 0.99);
}
.sec{
width : 0px;
height: 0px;
background-color: transparent;
border: 1px solid blue;
border-width: 152px 88px 0px;
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(0deg);
position: absolute;
top: 0px;
left: 42px;
transform-origin: 91px 152px;
}
#wheel div.sec:nth-child(1){
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
border-top-color: #00e5ff;
}
#wheel div.sec:nth-child(2){
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
border-top-color: blueviolet;
}
#wheel div.sec:nth-child(3){
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
border-top-color: #e600ff;
}
#wheel div.sec:nth-child(4){
transform: rotate(120deg);
-webkit-transform: rotate(180deg);
border-top-color: #62ab7c;
}
#wheel div.sec:nth-child(5){
transform: rotate(120deg);
-webkit-transform: rotate(240deg);
border-top-color: #00ff5c;
}
#wheel div.sec:nth-child(6){
transform: rotate(120deg);
-webkit-transform: rotate(300deg);
border-top-color: #ffbf00;
}
#spin{
width: 63px;
height: 59px;
background: #fff;
position: absolute;
top: 43%;
left: 37%;
border-radius: 50%;
cursor: pointer;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
$(document).ready(function(){
var defaultDegree = 1800;
var clicks = 0;
$("#spin").click(function(){
clicks++ ;
var newdegree = defaultDegree * clicks ;
var extraDegree = Math.floor(Math.random() * (360)) + 1;
var totalDegree = newdegree + extraDegree;
$("#inner-wheel").css({
'transform': 'rotate( ' + totalDegree + 'deg )'
});
});
});
});
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment