» » jQuery dice animation

 

jQuery dice animation

Author: bamboo06 on 8-11-2014, 01:52, views: 22579

25
We must have played dice game, and today I have to share is how to use jQuery to animate dice through the jQuery animate () function in conjunction with custom animation CSS background images switchover animation behind helloweba will have articles published on dice lottery program.

The principle: When the dice thrown by the jQuery animate () function to change the dice displacement, intermediate added delay effect, and transform boson background, the final animation when you run into randomly generated points to stop and throw the show points. In fact, the process of adding a number of different animated picture frames (with flash animation movie frame), the more the better frames, frame by frame and then run after the formation of the animation.
Ready
We need to prepare the dice material, in this example, I used to get from the network dice material, we need to do is to deal with six dice pictures (1-6 points), and an intermediate transition effects pictures (do motion blur) on the same picture, save it as dice.png, used as dice background.
Loading jQuery library, this is a must.
<script type="text/javascript" src="js/jquery.js"></script> 

Then join in the body HTML pages in the following code, which is used to place #dice dice, # result is used to display the prompt information.
   	<div class="wrap">
   			<div id="dice" class="dice dice_1"></div>
        </div>
        <p id="result">Please click above dice!</p>

CSS
We use background pictures dice.png loaded into .dice in. Then we were used to locate several styles with different background-position dice with different values and transition point and figure renderings. Picture transition effects which I do a simple obfuscation, we can also use css3 to handle image blur. Note #dice_mask is used to make anti-repeated clicks, will be mentioned later.
.wrap{width:90px; height:90px; margin:120px auto 30px auto; position:relative} 
.dice{width:90px; height:90px; background:url(dice.png) no-repeat;} 
.dice_1{background-position:-5px -4px} 
.dice_2{background-position:-5px -107px} 
.dice_3{background-position:-5px -212px} 
.dice_4{background-position:-5px -317px} 
.dice_5{background-position:-5px -427px} 
.dice_6{background-position:-5px -535px} 
.dice_t{background-position:-5px -651px} 
.dice_s{background-position:-5px -763px} 
.dice_e{background-position:-5px -876px} 
p#result{text-align:center; font-size:16px} 
p#result span{font-weight:bold; color:#f30; margin:6px} 
#dice_mask{width:90px; height:90px; background:#fff; opacity:0; position:absolute; 
 top:0; left:0; z-index:999} 

jQuery
When you click the color midnight, the first pre-dice style (empty style after the last movie), and the dice with a transparent cover anti #dice_mask repeated clicks, and generates a random number from 1 to 6, and then through animate () function to change the dice displacement, change dice class makes the transition appear blurred background image, then a slight delay delay (), and then went into the next frame of the animation, the end of the last movie, dice the class styles targeted to on dice_x, x represents the number of points, which is the number of points obtained after the throw dice, remove the masking effect, they can continue to click on the dice.
$(function(){
	var dice = $("#dice");
	dice.click(function(){
		$(".wrap").append("<div id='dice_mask'></div>");//add mask
		dice.attr("class","dice");//After clearing the last points animation
		dice.css('cursor','default');
		var num = Math.floor(Math.random()*6+1);//random num 1-6
		dice.animate({left: '+2px'}, 100,function(){
			dice.addClass("dice_t");
		}).delay(200).animate({top:'-2px'},100,function(){
			dice.removeClass("dice_t").addClass("dice_s");
		}).delay(200).animate({opacity: 'show'},600,function(){
			dice.removeClass("dice_s").addClass("dice_e");
		}).delay(100).animate({left:'-2px',top:'2px'},100,function(){
			dice.removeClass("dice_e").addClass("dice_"+num);
			$("#result").html("Your throwing points are<span>"+num+"</span>");
			dice.css('cursor','pointer');
			$("#dice_mask").remove();//remove mask
		});
	});
});

More dice animation is the simulation of a flash animation frames to play frame by frame to run through the timeline, and the use of jQuery can replace flash animation to complete this, although the effect is not the flash-hyun. Dice animation of this article is to pave the way for the next phase of the article, the next article I will tell you of combining jQuery, HTML, CSS, PHP, MySQL and comprehensive technical articles and code examples, explain dice lottery game, you can control the throw probability outstanding sub points, but also a fun game, so stay at GOOCODE for JQuery Scripts.

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
3 May 2016 19:53

anusha

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
it is good if the code is in same file

<
  • 0 Comments
  • 0 Articles
5 November 2017 00:10

Quana

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Omg what is this profile for anyways ? Isnt there any ukessaysreviews essay writing services reviews being done here? Because in the end you do know that matters a lot right? I hope you do have that in your mind its whats good for you!

<
  • 0 Comments
  • 0 Articles
6 December 2017 21:21

brett

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
It is an extraordinary site.. The Design looks great.. Continue working like that!. drones for kids

<
  • 0 Comments
  • 0 Articles
13 December 2017 04:52

carl

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Now a days the process of buying a home is consuming a lot of time and also it's not so easy to get the actual and accurate information to make a right decision of buying a home. PropAudit is here to solve this issue for the home-buyers by providing a platform where they can get exact information and review of any property. We created a platform to users to share their opinions, feedback's and reviews PropAudit is a property review portal which provides a platform for home buyers, property experts and other people in the real estate field to share and express their opinions, experience or any other feedback related to the properties. Real estate review website

Marvelous web journal. I appreciated perusing your articles. This is really an incredible read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome! ielts writing topics

<
  • 0 Comments
  • 0 Articles
15 December 2017 21:31

frank

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I must say, I thought this was a pretty interesting read when it comes to this topic. Liked the material. bonne voyante gratuite

<
  • 0 Comments
  • 0 Articles
22 December 2017 02:57

john

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene. book pr

<
  • 0 Comments
  • 0 Articles
1 January 2018 03:23

john

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene. pr for startups

<
  • 0 Comments
  • 0 Articles
5 January 2018 23:46

carl

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
What an inspiring article this was to read. I certainly did enjoy reading this very much. Some of the information here will be extremely helpful for my work. wrsandsupply

I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details. book pr

<
  • 0 Comments
  • 0 Articles
9 January 2018 04:34

frank

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. oet writing tips

<
  • 0 Comments
  • 0 Articles
10 January 2018 23:57

sarah

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Marvelous web journal. I appreciated perusing your articles. This is really an incredible read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome! Craigslist Flagging Service

<
  • 0 Comments
  • 0 Articles
14 January 2018 20:44

liam

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
What an inspiring article this was to read. I certainly did enjoy reading this very much. Some of the information here will be extremely helpful for my work. happy wheels demo

<
  • 0 Comments
  • 0 Articles
16 January 2018 04:45

carl

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is exceptionally instructive substance and composed well for a change. It's pleasant to see that a few individuals still see how to compose a quality post! Phone Psychic

<
  • 0 Comments
  • 0 Articles
17 January 2018 02:29

frank

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I truly value the sort of themes you post here. A debt of gratitude is in order for sharing us an incredible data that is really useful. Great day! book pr

<
  • 0 Comments
  • 0 Articles
19 January 2018 20:45

brett

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post. womens dresses

<
  • 0 Comments
  • 0 Articles
24 January 2018 03:02

arbazkhan

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
party dresses
Just pure brilliance from you here. I have never expected something less than this from you and you have not disappointed me at all. I suppose you will keep the quality work going on.
<a href="https://www.upcube.co/">party dresses</a>

<
  • 0 Comments
  • 0 Articles
25 January 2018 07:30

kamses9

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
good one. site

<
  • 0 Comments
  • 0 Articles
26 January 2018 06:59

sarah

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
What an inspiring article this was to read. I certainly did enjoy reading this very much. Some of the information here will be extremely helpful for my work. link building

<
  • 0 Comments
  • 0 Articles
2 February 2018 04:00

mellisa

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
The Ideal Dream Laser Clinic is a cosmetic-medical center offering only certified, result-oriented hair removal, Skin rejuvenating, body countering and weight loss services for both men and women. Our team includes certified technicians, Registered Dietitian and specialized skin and laser consultants. We offer the highest level of safety and service in an environment where the main priority is your safety, health and privacy. Our clinic located in heart of north York , Yonge and Steeles area close to public transit. 5 min walk to center of Yonge and Steeles, 88 Steeles Ave. East Toronto. lLaser clinic toronto

<
  • 0 Comments
  • 0 Articles
6 February 2018 21:16

david

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Extremely pleasant article, I appreciated perusing your post, exceptionally decent share, I need to twit this to my adherents. Much appreciated! black dress

<
  • 0 Comments
  • 0 Articles
7 February 2018 08:10

gghhjj

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
party dresses
This is a fantastic website and I can not recommend you guys enough. I really appreciate your post. It is very helpful for all the people on the web.

<
  • 0 Comments
  • 0 Articles
8 February 2018 21:24

brett

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. IELTS test preparation

<
  • 0 Comments
  • 0 Articles
10 February 2018 21:02

brett

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
What a sensational blog! This blog is too much amazing in all aspects. Especially, it looks awesome and the content available on it is utmost qualitative. Tarot Reading

<
  • 0 Comments
  • 0 Articles
18 February 2018 07:37

PS4 HOME

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I just stumbled upon your blog and wanted to say that
I have really enjoyed reading your blog posts. Any way
I'll be subscribing to your feed and I hope you post again soon
<a href="https://www.ps4home.com"> PS4 Home</a>

I just stumbled upon your blog and wanted to say that
I have really enjoyed reading your blog posts. Any way
I'll be subscribing to your feed and I hope you post again soon
https://www.ps4home.com

<
  • 0 Comments
  • 0 Articles
23 February 2018 01:53

carl

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
What a sensational blog! This blog is too much amazing in all aspects. Especially, it looks awesome and the content available on it is utmost qualitative. brindes para o dia das mães

<
  • 0 Comments
  • 0 Articles
25 February 2018 19:09

frank

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. voyance discount

What an inspiring article this was to read. I certainly did enjoy reading this very much. Some of the information here will be extremely helpful for my work. iron stair parts

Information
Comment on the news site is possible only within (days) days from the date of publication.