3d-cube-countdown

Create a 3D Cube Countdown Timer Plugin in Years/Months/Days/Hours/Seconds | countdownCube

by

CountdownCube is a jQuery plugin in the form of a set of rotating 3D cubes. Uses CSS transitions to create 3D rotating cube effects.

Timezone support

Timezone can be specified in the string in serveral formats:

  • adding a letter Z at the end on the timestring '2021-08-22T01:00:00Z', this is UTC.
  • adding an offset with respect to UTC in the format ±hh:mm: '2021-08-22T01:00:00-05:00' (this is the timezone of New York (US))

Support for timezones expressed as 'Continent/City' can be added with the moment.js and moment-timezone.js libraries.

How to make use of 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 the required CSS file to style your timer.

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

3. Create the markup in your countdown timer.

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

4. The javascript to activate the countdown timer.

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

5. Set the timezone you like.

$('#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 present days.

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

8. Callback capabilities.

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

3D Cube Like Countdown Timer Plugin, countdown Cube Github

See Demo And Download

Demo
Download

Official Website(oofaish): Click Here

This superior jQuery/javascript plugin is developed by oofaish. For extra Advanced Usages, please go to the official website.

Leave a Comment