You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
9.9 KiB
310 lines
9.9 KiB
(function () {
|
|
var AwardAnimation, Card, Helpers, h;
|
|
Helpers = function () {
|
|
function Helpers() {
|
|
}
|
|
Helpers.prototype.s = 1;
|
|
Helpers.prototype.rand = function (min, max) {
|
|
return Math.floor(Math.random() * (max + 1 - min) + min);
|
|
};
|
|
Helpers.prototype.decRand = function (min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
};
|
|
Helpers.prototype.time = function (time) {
|
|
return time * this.s;
|
|
};
|
|
Helpers.prototype.isFF = function () {
|
|
return navigator.userAgent.search('Firefox') > -1;
|
|
};
|
|
Helpers.prototype.isIE9 = function () {
|
|
return navigator.userAgent.search('MSIE 9.0') > -1;
|
|
};
|
|
Helpers.prototype.isIE11 = function () {
|
|
return navigator.userAgent.search('Trident/7.0') > -1;
|
|
};
|
|
Helpers.prototype.isSafari = function () {
|
|
var ua;
|
|
ua = void 0;
|
|
ua = navigator.userAgent.toLowerCase();
|
|
if (ua.indexOf('safari') !== -1) {
|
|
if (ua.indexOf('chrome') > -1) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
};
|
|
Helpers.prototype.isIOS = function () {
|
|
return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
|
|
};
|
|
Helpers.prototype.elasticOut = function (k) {
|
|
var a, p, s;
|
|
a = 0.1;
|
|
p = 0.4;
|
|
if (k === 0) {
|
|
return 0;
|
|
}
|
|
if (k === 1) {
|
|
return 1;
|
|
}
|
|
if (!a || a < 1) {
|
|
a = 1;
|
|
s = p / 4;
|
|
} else {
|
|
s = p * Math.asin(1 / a) / (2 * Math.PI);
|
|
}
|
|
return a * Math.pow(2, -10 * k) * Math.sin((k - s) * (2 * Math.PI) / p) + 1;
|
|
};
|
|
return Helpers;
|
|
}();
|
|
h = new Helpers();
|
|
Card = function () {
|
|
function Card(o) {
|
|
this.o = o != null ? o : {};
|
|
this.vars();
|
|
}
|
|
Card.prototype.vars = function () {
|
|
this.delay = this.o.delay || 0;
|
|
this.s = 1 * h.time(1);
|
|
this.card = $('.award-container');
|
|
this.badge = $('.badge > img');
|
|
this.content = $('.award-container div.content');
|
|
this.text = $('.unlocked, .achievement');
|
|
this.closeBtn = $('.award-container .close');
|
|
return this.particles = $('.hex-p');
|
|
};
|
|
Card.prototype.run = function () {
|
|
this.card.css({
|
|
'transform-origin': 'center center',
|
|
'margin-left': -50
|
|
});
|
|
if (h.isIE11()) {
|
|
this.card.velocity({
|
|
opacity: [
|
|
1,
|
|
0
|
|
]
|
|
}, {
|
|
duration: 800 * this.s,
|
|
display: 'block',
|
|
easing: 'easeInQuart'
|
|
}).velocity({
|
|
marginLeft: [
|
|
-325,
|
|
-50
|
|
]
|
|
}, {
|
|
delay: 430 * this.s,
|
|
duration: 800 * this.s,
|
|
easing: 'easeInOut'
|
|
});
|
|
this.badge.velocity({
|
|
scale: [
|
|
1,
|
|
1.5
|
|
]
|
|
}, {
|
|
duration: 800 * this.s,
|
|
easing: 'easeInQuart',
|
|
display: 'block'
|
|
}).velocity({
|
|
scale: [
|
|
0.8,
|
|
1
|
|
]
|
|
}, { duration: 30 * this.s }).velocity({ scale: 1 }, {
|
|
duration: 400 * this.s,
|
|
easing: [
|
|
500,
|
|
12
|
|
]
|
|
});
|
|
} else {
|
|
this.card.velocity({
|
|
opacity: [
|
|
1,
|
|
0
|
|
],
|
|
translateZ: [
|
|
0,
|
|
60
|
|
]
|
|
}, {
|
|
duration: 800 * this.s,
|
|
easing: 'easeInQuart',
|
|
display: 'block'
|
|
}).velocity({
|
|
translateZ: [
|
|
-60,
|
|
0
|
|
]
|
|
}, { duration: 30 * this.s }).velocity({ translateZ: 0 }, {
|
|
duration: 400 * this.s,
|
|
easing: [
|
|
500,
|
|
12
|
|
]
|
|
}).velocity({
|
|
marginLeft: [
|
|
-325,
|
|
-50
|
|
]
|
|
}, {
|
|
duration: 800 * this.s,
|
|
easing: 'easeInOut'
|
|
});
|
|
}
|
|
this.text.css({ 'opacity': 0 }).velocity({
|
|
opacity: [
|
|
1,
|
|
0
|
|
]
|
|
}, {
|
|
delay: 1900 * this.s,
|
|
duration: 400 * this.s
|
|
});
|
|
this.content.css({ 'width': 0 }).velocity({
|
|
width: [
|
|
600,
|
|
0
|
|
]
|
|
}, {
|
|
delay: 1270 * this.s,
|
|
duration: 800 * this.s,
|
|
queue: false,
|
|
easing: 'easeInOut'
|
|
});
|
|
this.closeBtn.css({ 'opacity': 0 }).velocity({
|
|
opacity: [
|
|
1,
|
|
0
|
|
]
|
|
}, {
|
|
delay: 2000 * this.s,
|
|
duration: 500 * this.s
|
|
});
|
|
return this.particles.each(function (_this) {
|
|
return function (i, particle) {
|
|
var θ;
|
|
particle = $(particle);
|
|
θ = h.rand(0, 2 * Math.PI);
|
|
particle.velocity({
|
|
opacity: [
|
|
0,
|
|
1
|
|
]
|
|
}, {
|
|
delay: 800 * _this.s,
|
|
duration: 3000 * _this.s,
|
|
display: 'block',
|
|
easing: 'easeOutQuart',
|
|
complete: function () {
|
|
return $(this).css({ 'display': 'none' });
|
|
}
|
|
});
|
|
return particle.children('path').velocity({
|
|
translateX: 0,
|
|
translateY: 0
|
|
}, 0).velocity({
|
|
translateX: [
|
|
h.rand(120, 300) * Math.cos(θ),
|
|
0
|
|
],
|
|
translateY: [
|
|
h.rand(120, 300) * Math.sin(θ),
|
|
0
|
|
],
|
|
rotateZ: [
|
|
h.rand(-1080, 1080),
|
|
0
|
|
],
|
|
scale: [
|
|
h.decRand(0.2, 0.5),
|
|
h.decRand(1, 2)
|
|
]
|
|
}, {
|
|
delay: 800 * _this.s,
|
|
duration: 3000 * _this.s,
|
|
easing: 'easeOutCirc'
|
|
});
|
|
};
|
|
}(this));
|
|
};
|
|
Card.prototype.out = function () {
|
|
if (h.isIE11()) {
|
|
return this.card.velocity({
|
|
opacity: [
|
|
0,
|
|
1
|
|
],
|
|
scale: [
|
|
0.9,
|
|
1
|
|
]
|
|
}, {
|
|
duration: 600 * this.s,
|
|
easing: 'easeInSine'
|
|
}).velocity({ scale: 1 }, 0);
|
|
} else {
|
|
return this.card.velocity({
|
|
rotateX: [
|
|
-5,
|
|
0
|
|
],
|
|
translateY: [
|
|
20,
|
|
0
|
|
],
|
|
translateZ: [
|
|
-30,
|
|
0
|
|
],
|
|
opacity: [
|
|
0,
|
|
1
|
|
]
|
|
}, {
|
|
duration: 600 * this.s,
|
|
easing: 'easeInSine'
|
|
}).velocity({
|
|
rotateX: 0,
|
|
translateY: 0,
|
|
translateX: 0
|
|
}, 0);
|
|
}
|
|
};
|
|
return Card;
|
|
}();
|
|
AwardAnimation = function () {
|
|
function AwardAnimation() {
|
|
this.s = 1 * h.time(1);
|
|
this.card = new Card({ delay: 0 });
|
|
this.run();
|
|
}
|
|
AwardAnimation.prototype.run = function () {
|
|
this.card.run();
|
|
this.outTimerId = setTimeout(function (_this) {
|
|
return function () {
|
|
return _this.out();
|
|
};
|
|
}(this), 10000 * this.s);
|
|
return setTimeout(function (_this) {
|
|
return function () {
|
|
return _this.run();
|
|
};
|
|
}(this), 11000 * this.s);
|
|
};
|
|
AwardAnimation.prototype.out = function () {
|
|
clearTimeout(this.outTimerId);
|
|
return this.card.out();
|
|
};
|
|
return AwardAnimation;
|
|
}();
|
|
jQuery(document).ready(function () {
|
|
var aa;
|
|
aa = new AwardAnimation();
|
|
return $('.award-container').click(function () {
|
|
return aa.out();
|
|
});
|
|
});
|
|
}.call(this)); |