3D Cube Like Countdown Timer Plugin with jQuery - countdownCube

3D Cube Like Countdown Timer Plugin with jQuery - countdownCube
File Size: 14 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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
});

Change Logs:

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.