3D Cube Like Countdown Timer Plugin with jQuery - countdownCube

countdownCube is a simple and easy-to-use jQuery plugin for creating a pretty look countdown timer with 3D rotation effects using CSS3 transitions.

Related Plugins:

• Tiny jQuery Countdown Timer Plugin
• Customizable Countdown Timer Plugin For jQuery - countdown
• Pie Chart CountDown Plugin for jQuery
• jQuery Countdown Plugin with Animation and Reflection Effects - County
• Beautiful jQuery Countdown Timer Plugin
• Colorful Countdown Timer
• Beautiful & Lightweight Countdown Plugin
• Cool Countdown Timer
• Final Countdown - Simple Date Countdown Plugin
• Simple jQuery Countdown Timer Plugin - kkcountdown
• jQuery Countdown Timer & Digital Clock Plugin - timeTo

How to use it:

1. Include jQuery library and jQuery countdownCube

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="countdowncube.js"></script>

2. Include required CSS file to style your timer

<link href="countdowncube.css" rel="stylesheet" type="text/css">

3. Create the markup for your countdown timer

<div id="counter"></div>

4. The javascript to activate the countdown timer.

$('#counter').countdownCube( {
  target: new Date( 'May 25, 2018 13:30:00' ),
  cubeSize: 50,
  background: 'rgba( 255, 150, 150, 0.8 )',
  color: 'white',
});

5. Set the timezone you prefer.

$('#counter').countdownCube( {
  targetTimezone: 'UTC'
});

6. Customize the label's translations.

$('#counter').countdownCube( {
  labelsTranslations: {
    'year': 'years',
    'month': 'months',
    'day': 'days',
    'hour': 'hours',
    'minute': 'minutes',
    'second': 'seconds'
  },
});

7. Only show days.

$('#counter').countdownCube( {
  showDaysOnly: false
});

8. Callback functions.

$('#counter').countdownCube( {
  onEnd: function(e) { return; },
  triggerEnd: false
});

Changelogs:

2021-08-22

• Fixed: Conflict with Array extensions

2017-12-29

• Fix inconsistent behavior when countdown reaches zero and when now > target
• Add onEnd and triggerEnd options to trigger an event when the counter ends

2017-12-27

• Add timezone support

v0.0.8 (2013-07-10)

• Check if 3d is supported and warn if not

---

This awesome jQuery plugin is developed by oofaish. For more Advanced Usages, please check the demo page or visit the official website.