CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Tonza
Tonza

Reputation: 650

How to get roll animation to work (roulette)

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

enter image description here

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.

Upvotes: 1

Views: 4702

Answers (2)

Chris
Chris

Reputation: 2465

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.net/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.

Upvotes: 5

Razvan Alex
Razvan Alex

Reputation: 1802

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.

Upvotes: 3

Related Questions