jquery - JavaScript coin flip animation with custom image on either side - Stack Overflow

admin管理员组

文章数量:1400336

I'm currently developing a site in which 2 users go head to head in a "coin flip", a Materialize CSS modal pops up on each users screen (the winner has already been defined), I then want there to be a coin flip animation.

I'm going to use this coin flip animation: /

My question is how can I set the coin flip to land on a specific winner before the animation, also, how can I change it so there's a custom image on each side?

Thanks,

James

I'm currently developing a site in which 2 users go head to head in a "coin flip", a Materialize CSS modal pops up on each users screen (the winner has already been defined), I then want there to be a coin flip animation.

I'm going to use this coin flip animation: https://www.html5andbeyond./coin-flip-application-html-css-and-jquery/

My question is how can I set the coin flip to land on a specific winner before the animation, also, how can I change it so there's a custom image on each side?

Thanks,

James

• javascript
• jquery
• html
• css
• animation

Share Improve this question Follow edited Mar 10, 2016 at 15:13 iJamesPHP asked Mar 10, 2016 at 15:02 iJamesPHPiJamesPHP 17111 silver badge1212 bronze badges 4

• @OlivierDeMeulder There's no "relevant code", this question is on the functionality and execution of displaying a coin flip animation with a pre-defined coin side – iJamesPHP Commented Mar 10, 2016 at 15:07
• @iJamesPHP Not certain what Question is ? – guest271314 Commented Mar 10, 2016 at 15:10
• @guest271314 ok let me edit the question to something more easy – iJamesPHP Commented Mar 10, 2016 at 15:11
• 1 @iJamesPHP What have you tried ? Can you include html, css attempts to resolve issues at Question ? – guest271314 Commented Mar 10, 2016 at 15:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Here are the changes to make in the css of that Codepen to place an image on either side of the coin. Click 'Edit on Codepen' on https://codepen.io/html5andblog/pen/pJZpee

#coin .front {
    transform: translateZ(1px);
    border-radius: 50%;
    background-image: url('http://placehold.it/200x200/E8117F/000000');
    background-size: cover;
    display: block;
}

    #coin .back {
    transform: translateZ(-1px) rotateY(180deg);
    border-radius: 50%;
    background-image: url('http://placehold.it/200x200/000000/E8117F');
     background-size: cover;
     display: block;
}

To make the coin fall on a specific side do the following on that same codepen you gave us.

Heads: Change the 'var spinArray' line to

var spinArray = ['animation1080'];

Tails: Change the 'var spinArray' line to

var spinArray = ['animation900'];

I can't take it any further without having access to your code. That should be enough to figure it out though.

Hope this helps.

Best,

Tim

本文标签： jqueryJavaScript coin flip animation with custom image on either sideStack Overflow