Spin

Developer
El Alemaño
Size
8,262 Kb
Views
18,207

How do I make an spin?

A very simple Slot Machine.. What is a spin? How do you make a spin? This script and codes were developed by El Alemaño on 15 November 2022, Tuesday.

Spin Previews
IQ Test

Spin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spin</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .main { width: 310px;
}
.slots { font-size: 100px; line-height: 100px; font-family: arial,helvetica,sans-serif; text-align: center; overflow: hidden; height: 100px; float: left; border: 1px solid #ccc; background-color: #fff; position: relative;
}
.number-wrapper { margin-top: 0; width: 100px;
}
.number-wrapper:after, .number-wrapper:before { content: " "; display: block; height: 50px; left: 0; position: absolute; width: 100%;
}
.number-wrapper:after { bottom: 0; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #cccccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 );
}
.number-wrapper:before { top: 0; background: #cccccc; background: -moz-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, #cccccc 0%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff', GradientType=0 );
}
input { background: #5CCD00; background: -moz-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5CCD00), color-stop(100%, #4AA400)); background: -webkit-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -o-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -ms-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: linear-gradient(to bottom, #5ccd00 0%, #4aa400 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0); padding: 10px 15px; color: #fff; font-family: 'Helvetica Neue',sans-serif; font-size: 16px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #459A00; margin-left: 10px; margin-top: 0;
}
input:hover { cursor: pointer;
}
.button { float: left;
}
/* Mixins */
@-moz-keyframes spin /* Firefox */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-webkit-keyframes spin /* Safari and Chrome */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-ms-keyframes spin /* IE */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-o-keyframes spin /* Opera */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@keyframes spin { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
#equation { position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -80px;
}
#equation span { display: inline-block; vertical-align: middle; margin-right: 12px;
}
#equation .spinner { height: 140px; margin: 10px; margin-right: 12px; background-color: #FFF; background-position: 0; border-radius: 5px; box-shadow: inset 0 0 5px #000; position: relative; -webkit-animation: spin 3s linear 0s infinite; -moz-animation: spin 3s linear 0s infinite; -o-animation: spin 3s linear 0s infinite; -ms-animation: spin 3s linear 0s infinite; animation: spin 3s linear 0s infinite;
}
#equation .spinner:before { content: ''; position: absolute; z-index: -1; top: -10px; left: -10px; width: 120px; height: 160px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#equation .drink { background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); width: 80px; background-size: 80px auto; background-position: 0, 0 20px;
}
#equation .drink:before { width: 100px;
}
#equation.zero .drink { background-position: 0, 0 -1580px;
}
#equation.one .drink { background-position: 0, 0 -1680px;
}
#equation.two .drink { background-position: 0, 0 -1780px;
}
#equation.three .drink { background-position: 0, 0 -1880px;
}
#equation.four .drink { background-position: 0, 0 -1980px;
}
#equation.five .drink { background-position: 0, 0 -2080px;
}
#equation.six .drink { background-position: 0, 0 -2180px;
}
#equation.seven .drink { background-position: 0, 0 -2280px;
}
#equation.done .spinner { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; -webkit-transition: background-position 2s ease-out 0s; -moz-transition: background-position 2s ease-out 0s; -o-transition: background-position 2s ease-out 0s; -ms-transition: background-position 2s ease-out 0s; transition: background-position 2s ease-out 0s;
}
#shoulder { position: absolute; top: 30px; left: -100px; width: 80px; height: 100px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#arm { position: relative; top: 10px; left: 10px; cursor: pointer; width: 60px; height: 80px; border-radius: 10% / 50%; background-color: #666; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -moz-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -ms-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -o-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%);
}
#arm:before { content: ''; position: absolute; top: -40px; left: 16px; width: 16px; height: 70px; border-radius: 8px; box-shadow: 0px 2px 0px #333; background-color: #999; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); background-image: -webkit-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -moz-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -ms-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -o-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: linear-gradient(to right, #666666 0%, rgba(255, 255, 255, 0.7) 50%, #666666 100%); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm:after { content: ''; position: absolute; top: -70px; left: -4px; width: 40px; height: 40px; border-radius: 100%; background-color: #760209; border: 2px solid #5d0207; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: -webkit-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -moz-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -ms-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:before { top: -20px; left: 20px; -webkit-transform: rotate3d(100, 10, 0, 180deg); -moz-transform: rotate3d(100, 10, 0, 180deg); transform: rotate3d(100, 10, 0, 180deg); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:after { top: 90px; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="main"> <!-- Slots --> <div class="numbers"> <div class="slots" id="slots_tens"> <div class="number-wrapper"></div> </div> <div class="slots" id="slots_units"> <div class="number-wrapper"></div> </div> </div>
</div>
<div class="button">	<!--<input type="button" value="spin!" onClick="go(Math.floor(Math.random() * 10),Math.floor(Math.random() * 10));">--> <div id="equation" class="done"> <div id="shoulder"><div id="arm"></div></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://kirkjerk.com/m/files/jquery.easing.1.3.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spin - Script Codes CSS Codes

.main { width: 310px;
}
.slots { font-size: 100px; line-height: 100px; font-family: arial,helvetica,sans-serif; text-align: center; overflow: hidden; height: 100px; float: left; border: 1px solid #ccc; background-color: #fff; position: relative;
}
.number-wrapper { margin-top: 0; width: 100px;
}
.number-wrapper:after, .number-wrapper:before { content: " "; display: block; height: 50px; left: 0; position: absolute; width: 100%;
}
.number-wrapper:after { bottom: 0; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #cccccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 );
}
.number-wrapper:before { top: 0; background: #cccccc; background: -moz-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, #cccccc 0%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff', GradientType=0 );
}
input { background: #5CCD00; background: -moz-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5CCD00), color-stop(100%, #4AA400)); background: -webkit-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -o-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -ms-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: linear-gradient(to bottom, #5ccd00 0%, #4aa400 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0); padding: 10px 15px; color: #fff; font-family: 'Helvetica Neue',sans-serif; font-size: 16px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #459A00; margin-left: 10px; margin-top: 0;
}
input:hover { cursor: pointer;
}
.button { float: left;
}
/* Mixins */
@-moz-keyframes spin /* Firefox */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-webkit-keyframes spin /* Safari and Chrome */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-ms-keyframes spin /* IE */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-o-keyframes spin /* Opera */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@keyframes spin { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
#equation { position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -80px;
}
#equation span { display: inline-block; vertical-align: middle; margin-right: 12px;
}
#equation .spinner { height: 140px; margin: 10px; margin-right: 12px; background-color: #FFF; background-position: 0; border-radius: 5px; box-shadow: inset 0 0 5px #000; position: relative; -webkit-animation: spin 3s linear 0s infinite; -moz-animation: spin 3s linear 0s infinite; -o-animation: spin 3s linear 0s infinite; -ms-animation: spin 3s linear 0s infinite; animation: spin 3s linear 0s infinite;
}
#equation .spinner:before { content: ''; position: absolute; z-index: -1; top: -10px; left: -10px; width: 120px; height: 160px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#equation .drink { background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); width: 80px; background-size: 80px auto; background-position: 0, 0 20px;
}
#equation .drink:before { width: 100px;
}
#equation.zero .drink { background-position: 0, 0 -1580px;
}
#equation.one .drink { background-position: 0, 0 -1680px;
}
#equation.two .drink { background-position: 0, 0 -1780px;
}
#equation.three .drink { background-position: 0, 0 -1880px;
}
#equation.four .drink { background-position: 0, 0 -1980px;
}
#equation.five .drink { background-position: 0, 0 -2080px;
}
#equation.six .drink { background-position: 0, 0 -2180px;
}
#equation.seven .drink { background-position: 0, 0 -2280px;
}
#equation.done .spinner { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; -webkit-transition: background-position 2s ease-out 0s; -moz-transition: background-position 2s ease-out 0s; -o-transition: background-position 2s ease-out 0s; -ms-transition: background-position 2s ease-out 0s; transition: background-position 2s ease-out 0s;
}
#shoulder { position: absolute; top: 30px; left: -100px; width: 80px; height: 100px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#arm { position: relative; top: 10px; left: 10px; cursor: pointer; width: 60px; height: 80px; border-radius: 10% / 50%; background-color: #666; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -moz-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -ms-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -o-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%);
}
#arm:before { content: ''; position: absolute; top: -40px; left: 16px; width: 16px; height: 70px; border-radius: 8px; box-shadow: 0px 2px 0px #333; background-color: #999; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); background-image: -webkit-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -moz-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -ms-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -o-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: linear-gradient(to right, #666666 0%, rgba(255, 255, 255, 0.7) 50%, #666666 100%); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm:after { content: ''; position: absolute; top: -70px; left: -4px; width: 40px; height: 40px; border-radius: 100%; background-color: #760209; border: 2px solid #5d0207; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: -webkit-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -moz-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -ms-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:before { top: -20px; left: 20px; -webkit-transform: rotate3d(100, 10, 0, 180deg); -moz-transform: rotate3d(100, 10, 0, 180deg); transform: rotate3d(100, 10, 0, 180deg); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:after { top: 90px; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}

Spin - Script Codes JS Codes

/*
*
*	jQuery Slot Machine
*
*/
var height_slot_number = '100';
function go(tens,units){	addSlots($("#slots_units .number-wrapper"));	addSlots($("#slots_units .number-wrapper"));	moveSlots($("#slots_units .number-wrapper"),units);	addSlots($("#slots_tens .number-wrapper"));	addSlots($("#slots_tens .number-wrapper"));	moveSlots($("#slots_tens .number-wrapper"),tens);
}
$(document).ready(function(){	addSlots($("#slots_units .number-wrapper"));	addSlots($("#slots_tens .number-wrapper")); $('#arm').click(function(e) {	var arm = $(this).addClass('clicked'); delay = setTimeout(function() { arm.removeClass('clicked');}, 500); e.preventDefault(); go(Math.floor(Math.random() * 10),Math.floor(Math.random() * 10)); });
});
function addSlots(jqo){	for(var i = 0; i < 10; i++){	jqo.append("<div class='slot'>"+ i +"</div>");	}
}
function moveSlots(jqo,num){	var time	= 6500;	var number	= num;	time	+= Math.round(Math.random()*1000);	jqo.stop(true,true);	var num_slot = Math.round((jqo.find('.slot').length)/20);	var margin_top = ((num_slot -1) * (height_slot_number * 10)) + (num * height_slot_number);	jqo.animate(	{"margin-top":"-"+ margin_top +"px"},	{'duration' : time, 'easing' : "easeOutElastic"}	);
}
Spin - Script Codes
Spin - Script Codes
Home Page Home
Developer El Alemaño
Username elalemanyo
Uploaded November 15, 2022
Rating 3
Size 8,262 Kb
Views 18,207
Do you need developer help for Spin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

El Alemaño (elalemanyo) Script Codes
Name
Now Reading Bubble
Highlighttextarea
Sticker
RGB Hover
Dom loading
Headline
Video Scrolling
Glitch Text Example
Twitter Loading Animation
Button - rainbow border
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!