Skip to content

Instantly share code, notes, and snippets.

@philwolstenholme

philwolstenholme/index.html

Last active September 21, 2016 17:01
Show Gist options
  • Save philwolstenholme/8cf4a32a1076ccee6fc8ea609ff2a8ee to your computer and use it in GitHub Desktop.
Save philwolstenholme/8cf4a32a1076ccee6fc8ea609ff2a8ee to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Countdown</title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<style>
html {
font-size: 14px;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.2;
box-sizing: border-box;
background-color: #080909;
padding: 2em;
color: #FFFFFF;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
.field-collection-item-field-countdown * {
box-sizing: border-box;
}
.field--name-field-countdown-text {
font-weight: bold;
margin-bottom: 1em;
font-size: 16px;
line-height: 19.2px;
font-size: 1.14286rem;
line-height: 1.37143rem;
}
@media (min-width: 960px) {
.field--name-field-countdown-text {
font-size: 18px;
line-height: 21.6px;
font-size: 1.28571rem;
line-height: 1.54286rem;
}
}
@media (min-width: 1024px) {
.field--name-field-countdown-text {
font-size: 22px;
line-height: 26.4px;
font-size: 1.57143rem;
line-height: 1.88571rem;
}
}
.field--name-field-countdown-text,
.field--name-field-countdown-date-and-time {
text-align: center;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.js .field--name-field-countdown-date-and-time {
display: none;
}
.gla-countdown {
margin: 0 auto;
width: 272px;
height: 116px;
transform-origin: top left;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gla-countdown .countdown-container {
height: 130px;
}
.gla-countdown .time {
font-size: 19px;
border-radius: 5px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
display: inline-block;
text-align: center;
position: relative;
height: 95px;
width: 65px;
perspective: 479px;
backface-visibility: hidden;
transform: translateZ(0);
transform: translate3d(0, 0, 0);
}
.gla-countdown .count {
background: #EE266D;
color: #FFFFFF;
display: block;
font-family: 'Oswald', sans-serif;
font-size: 2em;
line-height: 2.4em;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 100%;
transform: translateZ(0);
transform-style: flat;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
}
.gla-countdown .count.top {
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px 5px 0 0;
height: 50%;
transform-origin: 50% 100%;
}
.gla-countdown .count.bottom {
background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 0 0 5px 5px;
line-height: 0;
height: 50%;
top: 50%;
transform-origin: 50% 0;
}
.gla-countdown .label {
font-size: 14px;
line-height: 16.8px;
font-size: 1rem;
line-height: 1.2rem;
margin-top: 5px;
display: block;
position: absolute;
top: 95px;
width: 100%;
}
/* Animation start */
.gla-countdown .count.curr.top {
transform: rotateX(0deg);
z-index: 3;
}
.gla-countdown .count.next.bottom {
transform: rotateX(90deg);
z-index: 2;
}
/* Animation end */
.gla-countdown .flip .count.curr.top {
transition: all 250ms ease-in-out;
transform: rotateX(-90deg);
}
.gla-countdown .flip .count.next.bottom {
transition: all 250ms ease-in-out 250ms;
transform: rotateX(0deg);
}
.gla-countdown__container {
}
</style>
</head>
<body class="js bg-black white">
<div class="gla-countdown__container">
<div class="field--name-field-countdown-text">It's not long until tickets go on sale</div>
<div class="gla-countdown" id="gla-countdown"></div>
</div>
<script type="text/template" id="gla-countdown-template">
<div class="time <%= label %>">
<span class="count curr top"><%= curr %></span>
<span class="count next top"><%= next %></span>
<span class="count next bottom"><%= next %></span>
<span class="count curr bottom"><%= curr %></span>
<span class="label"><%= label %></span>
</div>
</script>
<script>
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
$(document).on('ready', function () {
var labels = ['Days', 'Hours', 'Minutes', 'Seconds'],
countdownDate = new Date(decodeURI(getUrlVars()["date"]));
template = _.template($('#gla-countdown-template').html()),
currDate = '00:00:00:00:00',
nextDate = '00:00:00:00:00',
parser = /([0-9]{2})/gi,
$example = $('#gla-countdown');
// Parse countdown string to an object
function strfobj(str) {
var parsed = str.match(parser),
obj = {};
labels.forEach(function (label, i) {
obj[label] = parsed[i]
});
return obj;
}
// Return the time components that diffs
function diff(obj1, obj2) {
var diff = [];
labels.forEach(function (key) {
if (obj1[key] !== obj2[key]) {
diff.push(key);
}
});
return diff;
}
// Build the layout
var initData = strfobj(currDate);
labels.forEach(function (label, i) {
$example.append(template({
curr: initData[label],
next: initData[label],
label: label
}));
});
// Starts the countdown
$example.countdown(countdownDate, function (event) {
var newDate = event.strftime('%D:%H:%M:%S'),
data;
if (newDate !== nextDate) {
currDate = nextDate;
nextDate = newDate;
// Setup the data
data = {
'curr': strfobj(currDate),
'next': strfobj(nextDate)
};
// Apply the new values to each node that changed
diff(data.curr, data.next).forEach(function (label) {
var selector = '.%s'.replace(/%s/, label),
$node = $example.find(selector);
// Update the node
$node.removeClass('flip');
$node.find('.curr').text(data.curr[label]);
$node.find('.next').text(data.next[label]);
// Wait for a repaint to then flip
_.delay(function ($node) {
$node.addClass('flip');
}, 50, $node);
});
}
}).on('finish.countdown', function (event) {
debugger;
$(".field--name-field-countdown").parent().remove();
});
$(".field--name-field-countdown-text").html(decodeURI(getUrlVars()["text"]));
$(window).on('resize', function () {
var containerWidth = $("body").width();
var defaultCountdownWidth = 272;
var defaultCountdownHeight = 116;
var $countdown = $("#gla-countdown");
$countdown.css("transform", function () {
if (containerWidth / defaultCountdownWidth < 1) {
return 'scale(' + containerWidth / defaultCountdownWidth + ')'
} else {
return 'scale(1)'
}
});
$countdown.css("height", function () {
$("#gla-countdown").show();
if (containerWidth / defaultCountdownWidth < 1) {
return defaultCountdownHeight * (containerWidth / defaultCountdownWidth) + 'px'
} else {
return defaultCountdownHeight + 'px'
}
});
});
$(window).resize();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment