I'm currently developing a Roulette website and I am struggling to make the roulette animation function properly. I have an image for the roulette wheel, but I need the image to vanish after reaching a certain point and then loop around to the left.
This is the desired appearance I am trying to achieve (without it ending abruptly and without the looping to the left):
$("#right").click(function () {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function () {
$("#one").css("left", "0px");
});section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
<div id="six">
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>This is the desired look, with the border ending near the screen edges, the image being invisible outside the border, and looping around:
div.numbers {
display: inline-flex;
border: 4px solid gray;
}
div.numbers img {
margin-right: 5px;
}<section>
<div class="numbers">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
</div>
</section>By clicking a button, the transition should move the image left by 500px, looping around to the left until it reaches 500px further, and ensuring it remains invisible outside the border.
Any assistance with this would be greatly appreciated!