3D Cube CountDown script
Description: Cube CountDown script takes
advantage of CSS3's transform
property to display 3D cubes that
rotate to count down to any desired future date. Specify the top most
unit of each counter, whether it's "days", "hours", "minutes", or "seconds".
Two event handlers are available for you to run custom code while the
counter is winding down (every second), and also, when the target date/time
has been reached.
Using CSS, you can customize the counter's visual style in a
variety of ways, including optimizing for mobile browsers by either making the
counter "vertical" in nature, or scaling down the size of the cubes simply by
decreasing the counter's CSS font-size
property. Furthermore, the script
works across all major browsers and devices; in legacy browsers such as IE8 and
IE9, the countdown will simply be non 3D. All this makes for a countdown script
that looks good no matter the screen size or device. Who says 3D is more hassle
than good?
Demos:
Step 1: Insert the below script into the HEAD section of your page:
The code above references the following external files, which you should download ("Right Click", and select "Save As"):
Step 2: Insert the below example script into the BODY section of your page where you wish the countdown to be shown:
You're done with installation!
Setup Info
To set up a cube countdown, initiate a new instance of new
cubecountdown()
after the document has loaded, for example:
jQuery(function($){ // on DOM load var mycountdown = new cubecountdown({ containerid: 'futuredate', targetdate: 'October 17, 2018 11:26:30', size: ['10em', '6em'], // specify cube dimensions in "em" only unit: ['days'] }) }
Where "mycountdown" should be an arbitrary but unique variable
for each instance of 3D countdown on your page. The function cubecountdown()
accepts the following options, each separated by comma:
setting | Description |
countainerid: "string" Required |
The ID of a empty DIV container that will house the countdown. |
targetdate: "JavaScript_date_string" Required |
Valid JavaScript date string representing the
future date/time you wish to count down to. The string should be in a
format recognized by the
Date.parse() method. A couple of examples:
This string can also be constructed dynamically, which is helpful for counting down to events that are annual in nature, such as New Years. In this case, we can use JavaScript to fill in the correct year and return the proper date string:
The above parameters translate to "current year + 1", "January", and "1st". As you can see, in JavaScript, months are represented numerically starting at 0, where 0 = "January", 1 = "February" etc. The resulting initialization code would look like: var mycountdown = new cubecountdown({ containerid: 'futuredate', targetdate: new Date( new Date().getFullYear() +1, 1, 1 ), size: ['10em', '6em'], // specify cube dimensions in "em" only unit: ['days'] }) |
size: ['width_em', 'height_em'] defaults to ['8em', '6em'] |
The dimensions of each cube inside the
countdown, in "em". The reason for using this relative unit is to
facilitate easy scaling of the cubes upwards or downwards if desired
afterwards. Inside ddcubeclass.css, all
units are expressed in percentage or em values, with the cubes
themselves carrying a default font-size of 10px to create
the base unit. By adjusting this font size, we can instantly make the
cubes scale proportionally. More details on this below. |
unit: "days" or "hours" or
"minutes" or "seconds" defaults to "days" |
Sets the top most unit of the countdown. |
fxduration: seconds defaults to 0.5 |
Sets the duration of the cube rotating effect, in seconds. Largest number supported is 0.8 (or 0.8 seconds), just below the 1 second interval in which the countdown updates. |
Inside the BODY section of your page, you should create an empty
DIV with an ID that corresponds to the "containerid
" setting of the
initialization code to display the countdown in:
<div id="futuredate"></div>
The onEnd()
and onCount()
events
The onEnd
and onCount
events are your
gateway to running your own code when a countdown has finished, and while it is
counting down, respectively. Most commonly, you'll just be making use of the
former. To do so, upon initializing a countdown, simply attach the desired event
handler to the instance variable and define the function you want to run:
var mycountdown = new cubecountdown({ containerid: 'futuredate', targetdate: 'October 17, 2018 12:00:00', size: ['10em', '6em'], // specify cube dimensions in "em" only unit: ['days'] }) mycountdown.onEnd = function(){ location.replace('http://mysite.com/sales.htm') // redirect to sales page when target date is met }
There is also the onCount()
event handler
at your disposal, which is called every second the countdown
winds down towards its target date. It's useful, for instance, when you
wish to do something when the value inside a specific field is the
desired value (ie: the "hour" field is currently 20), or when there is 3
hours or less left before the target date is reached. The later scenario
comes in handy more often, for example, for performing specific actions
as the time to the target date draws nearer, such as to convey a sense
of urgency.
The onCount()
event is automatically passed 2
parameters- diff
and formatdiff
. The first parameter
contains the total time remaining in seconds, which is useful if you wish
to know how much time remains until the target date; with the below example, we
display a custom message when there's only 3 hours or less remaining on a sale
(the target date):
var mycountdown = new cubecountdown({ containerid: 'futuredate', targetdate: 'October 17, 2018 12:00:00', size: ['10em', '6em'], // specify cube dimensions in "em" only unit: ['days'] }) mycountdown.onCount = function(diff, formatdiff){ // console.log(diff): integer (seconds) // console.log(diffobj): {days:int, hours:int, minutes:int, seconds: int} // Do something if 3 hours or less before target date if (diff < 60 * 60 * 3){ // if diff is less than 3 hours (expressed in seconds) $('#warning').html('Only 3 hours or less before sale ends! Hurry!') } }
The formatdiff
parameter works differently, and
tells you the exact value of each cube field at this moment as they appear on
your screen. It returns an object literal in the format of {days:int,
hours:int, minutes:int, seconds: int}
. So formatdiff.hours
for example would return the value of the "hours" field at the moment.
Customizing the style of the countdown
The default style of each countdown cube is specified inside ddcubeclass.css. Apart from the dimensions of each cube, which is defined inside the initialization script above, everything else should be via CSS. As best practices, avoid modifying ddcubeclass.css directly, but instead, define your own overriding custom styles following it inside the HEAD section of your page or a blank .css file. For example:
<style> #futuredate .ddcubecountdown{ display: block; /* display each cube on its own line */ margin-bottom: 5px; } #futuredate .ddcubecountdown ul li{ background: darkred; /* change color of cubes */ } #futuredate .ddcubecountdown ul li div{ /* DIV that contains countdown digits */ font-size: 2em; } </style>
Replace #futuredate
with the ID of your
countdown container. Each cube consists of a DIV with the CSS classes "ddcubeclass
ddcubecountdown days
", where "days"
changes based on the unit the cube represents ("days", "hours", "minutes",
and "seconds"). This distinction lets you style each cube field separately if you
wish. Inside each DIV cube is a UL list with four child LIs, one for each
side of the cube.
- Creating a responsive countdown
Cube Countdown is designed to be responsive across all screen and device sizes. By default the individual cubes will wrap around to the next line if the parent container isn't wide enough. However, you can go a step further, and shrink the size of the cubes proportionally, or even make the countdown vertical in layout, on demand.
To retain the existing proportions of a countdown but scale its
overall size (dimensions, font size etc) downwards or upwards, modify the cube's
main container DIV's font-size
property:
#futuredate .ddcubecountdown{ font-size: 8px /* Shrink cube sizes. Default font size is 10px */ }
The above shrinks the size of the cubes.
To force the countdown cubes to drop down one following the
next, so its layout becomes vertical, simply give the main container DIV a
display:block
setting:
#futuredate .ddcubecountdown{ display: block; /* display each cube on its own line */ margin-bottom: 5px; /* add some spacing between each cube */ }
Putting everything together now, the following CSS changes the countdown interface to "vertical" plus enlarges the cubes on small screen devices:
<style> @media screen and (max-device-width: 480px) { .ddcubecountdown{ /* target all countdowns on the page */ display: block !important; /* display each cube on its own line */ font-size: 15px !important; /* scale cubes up */ margin-bottom: 10px !important; } } </style>