I'm trying to do roll/roulette animation with no results.

<div class="roll">
    <img src="image.png" id="1" />
    <img src="image.png" id="2" />
    <img src="image.png" id="3" />
    <img src="image.png" id="4" />
    <img src="image.png" id="5" />
    <img src="image.png" id="6" />
    <img src="image.png" id="7" />
    etc ...
</div>

Images are inline so it would look like this

But instead of colors there will be images

I have array with players

var players = {
    1: "Player 1",
    2: "Player 2",
    3: "Player 3"
}

When the roll stops, the line in the middle will pick the winner and get the id.

When there's no more images to roll it will start over again

I'm not asking for source code. Just good instructions how do I get started with this.

I'm trying to do roll/roulette animation with no results.

<div class="roll">
    <img src="image.png" id="1" />
    <img src="image.png" id="2" />
    <img src="image.png" id="3" />
    <img src="image.png" id="4" />
    <img src="image.png" id="5" />
    <img src="image.png" id="6" />
    <img src="image.png" id="7" />
    etc ...
</div>

Images are inline so it would look like this

But instead of colors there will be images

I have array with players

var players = {
    1: "Player 1",
    2: "Player 2",
    3: "Player 3"
}

When the roll stops, the line in the middle will pick the winner and get the id.

When there's no more images to roll it will start over again

I'm not asking for source code. Just good instructions how do I get started with this.

• javascript
• jquery
• html
• animation

Share Improve this question Follow edited Jan 1, 2017 at 16:22 Rob 15.2k3030 gold badges4848 silver badges7373 bronze badges asked Dec 30, 2016 at 19:53 TonzaTonza 65011 gold badge99 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I have done something similar and this is how I would go about it in steps:

Step 1 - Build your carousel of images

You need to ensure that you always have elements lined up far enough off screen that the user wont see any changes. Usually one or 2 extra off screen is enough. I don't know how you plan to build these images but if you provide some source code I can help you a little more.

Step 2 - Make it move

This is the easy part. Just move all of the elements left or right by x pixels and repeat while adding and removing elements as needed. Again, with code I can help more here.

Step 3 - Pick the winner

The way I see it, you can do this in one of 2 ways. One - Keep track of which element is overlapping with your line element each translation (step 2), OR - at the end simply look over all your elements to see which one overlaps the line.

Short and easy version: While typing this I realize you could also pre-determine the winner, line up x images with the winner at the end, then add maybe 10-15 more after. Then just use a css transition on the parent element to move it just enough that the winner lines up with the blue bar. This is probably the easiest way to do it.

---

Example 1:

Quick CSS easing example for either example:

transition: left 1s ease;

https://jsfiddle/L2ofgs2k/ (I used jQuery to apply the style change but you can do the same with regular JS)

See here for more help on CSS transitions.

I think you're looking to make a cs go roullete script. This simple library is exactly what you're looking for and many cs go sites use it as well. They provides demons and very good documentation. If you know a little bit of jquery, it's gonna be pretty simple.