3D Cube Like Countdown Timer Plugin with jQuery - countdownCube

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:

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

Change Logs:

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.

  • Publication date: 27.12.2017
  • Source