jquery css で 通知バッジ

2013年10月6日更新 view: 539 view
photoBy: http://www.algernonproduct.co.jp/img_event/wf2012…

jquery と css で通知バッジを作ろう!

今流行!

googleや大手サイトだと何か通知があると丸いバッジで知らせてくれる。

これを作るにはどうしたらよいの?

スポンサードリンク

css

.circle {
    width:15px;
    padding:2px;
    height:15px;
    
    bottom:15px;
    right:-15px;
    
    
    
    position:absolute;
    background:white;
    border-radius:50%;
    box-shadow:1px 1px 1px rgba(0,0,0,0.4);
    text-indent:1px;
    font-weight:bold;
    text-align:center;
    font-size:12px;
    line-height:16px;
    color:white;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: bottom center;
    -webkit-animation-name: animation-bell;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: bottom center;
    -moz-animation-name: animation-bell;



    background: rgb(255,0,132); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,0,132,1) 0%, rgba(255,0,132,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,132,1)), color-stop(100%,rgba(255,0,132,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ff0084',GradientType=0 ); /* IE6-9 */
    
        
    
    



}

@-webkit-keyframes animation-bell {
0%{
    -webkit-transform: scale(1, 1);
    }
48%{
    -webkit-transform: scale(1, 1);
    }
50%{
    -webkit-transform: scale(1.3, 0.7);
    }
53%{
    -webkit-transform: scale(0.7, 1.3) translate(0, -15px);
    }
57.5%{
    -webkit-transform: scale(1, 1) translate(0, -3px);
    }
59%{
    -webkit-transform: scale(1, 1) translate(0, 0px);
    }
100% {
    -webkit-transform: scale(1, 1);
}
}
@-moz-keyframes animation-bell {
0%{
    -moz-transform: scale(1, 1);
    }
48%{
    -moz-transform: scale(1, 1);
    }
50%{
    -moz-transform: scale(1.3, 0.7);
    }
54%{
    -moz-transform: scale(0.7, 1.3) translate(0, -15px);
    }
58%{
    -moz-transform: scale(1, 1) translate(0, -3px);
    }
59%{
    -moz-transform: scale(1, 1) translate(0, 0px);
    }
100% {
    -moz-transform: scale(1, 1);
}
}

js と html

<script>
$(function() {
     $('#bell').each(function(){
        var count = $('#bell').data('notification-count');
        $(this).wrap($('<span>').css({'position':'relative'}))
            .parent().append($('<div>').addClass("circle").html(count));
     });
    
});
</script>
<div>
<a href="/"><img src="画像のURL" height="50" id="bell" data-notification-count="2"></a>
</div>

全てコピペで動きますよ。

スポンサードリンク

関連記事

関連カテゴリ