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">
            <div class="numbers">
                <div class="number">6</div>
            </div>
        </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

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("http://itdevelop.cz/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;
}
.notification .numbers {
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    -moz-transition: -moz-transform 200ms ease-in-out;
    -ms-transition: -ms-transform 200ms ease-in-out;
    -o-transition: -o-transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out;
}
.info {
    width: 110px;
    height: 82px;
    margin: 10em auto;
    margin-bottom: 1em;
    background: url("http://itdevelop.cz/ss-icon.png") no-repeat;
}
.make-order {
    display: inline-block;
    padding: .7em 1em;
    background: #fff186;
    color: #232323;
    font-weight: bold;
    text-decoration: none;
}
.make-order:hover {
    background: #f2e47a;
}
.info-text {
    font-size: .8em;
    width: 263px;
    margin: 0 auto;
    margin-bottom: 4em;
    background: url("http://itdevelop.cz/ss-bottom.png") no-repeat top;
    padding-top: 2em;
    color: rgb(158, 158, 158);
}

CoffeeScript

move = 0

$(document).ready ->
    $('body').on 'click', '.make-order', ->
        $numbers = $ '.notification .numbers'
        lastNumber = parseInt $numbers.find('.number').last().text()
        $newNumber = $ '<div class="number">' + (lastNumber + 1) + '</div>'
        $numbers.append $newNumber
        move -= 48
        $numbers.css('-webkit-transform', 'translate3d(0, '+move+'px, 0)')
        $numbers.css('-moz-transform', 'translate3d(0, '+move+'px, 0)')
        $numbers.css('-ms-transform', 'translate3d(0, '+move+'px, 0)')
        $numbers.css('-o-transform', 'translate3d(0, '+move+'px, 0)')
        $numbers.css('transform', 'translate3d(0, '+move+'px, 0)')
        $('.val').text(lastNumber + 1)
        return false