None

None

by tjerabek

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,700"></script>
<div class="page">
    <div class="info">
        <div class="notification bounce">6</div>
    </div>
    <div class="info-text">You have <span class="val">6</span> new orders!</div>
<a href="#" class="make-order">Make order!</a>

</div>

CSS

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
	40% {-webkit-transform: translateY(-20px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-20px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-20px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-20px);}
	60% {transform: translateY(-15px);}
}

.bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}

body {
    font-family:'Open Sans', sans-serif;
    background: #232323;
}
.page {
    text-align: center;
    position: fixed;
    top: 0;
    bottom: 1em;
    left: 0;
    right: 0;
    background: #232323 url("https://raw.github.com/tjerabek/jquery.simplecounter.js/master/sources/ss-comerce.png") no-repeat bottom;
}
.notification, .number {
    display: block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
}
.number {
    font-weight: bold;
    font-size: 1.5em;
    text-rendering: optimizeLegibility;
    color: #232323;
}
.notification {
    overflow: hidden;
    background: #fff186;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-left: 60px;
    top: 19px;
    position: relative;
    -webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.notification .numbers {
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    -moz-transition: -moz-transform 200ms ease-in-out;
   ...

JavaScript

(function(){var a;a=jQuery;a.fn.extend({SimpleCounter:function(b){var e,d,c;c={buttonSelector:".make-order",counterHeight:0,valSelector:".val",move:0,debug:false};
c=a.extend(c,b);d=function(f){if(c.debug){return typeof console!=="undefined"&&console!==null?console.log(f):void 0;}};e=function(){var g,h,f;h=a(".simple-counter-numbers");
f=parseInt(h.find(".number").last().text());g=a('<div class="number">'+(f+1)+"</div>");h.append(g);c.move-=c.counterHeight;h.css("-webkit-transform","translate3d(0, "+c.move+"px, 0)");
h.css("-moz-transform","translate3d(0, "+c.move+"px, 0)");h.css("-ms-transform","translate3d(0, "+c.move+"px, 0)");h.css("-o-transform","translate3d(0, "+c.move+"px, 0)");
h.css("transform","translate3d(0, "+c.move+"px, 0)");if(c.valSelector!==""){a(c.valSelector).text(f+1);}return false;};return this.each(function(){var f;
f=a(this);f.wrapInner('<div class="number" />').wrapInner('<div class="simple-counter-numbers numbers" />');c.counterHeight=f.height();d("Item wrapped. Button class: "+c.buttonSelector+", Button height: "+c.counterHeight+".");
if(c.buttonSelector!==""){return a("body").on("click",c.buttonSelector,e);}});}});}).call(this);

$('.notification').SimpleCounter();

setTimeout(function(){
        $('.notification').removeClass('bounce');     
     }, 1000);

 setInterval(function(){
    $('.notification').addClass('bounce');
     setTimeout(function(){
        $('.notification').removeClass('bounce');     
     }, 1000);
 },10000);