[ js ]css3のアニメーションでアイコン的動きにするjQueryプラグインを作ってみた

コピペで使えるCSS3アニメーション http://jsdo.it/gryng02/css3animation を拝見していて、「New!」が一つずつ大きくなるのが面白いけど、文字が多くなったらcss書くの大変だな。と思ったので指定された場所にcssを適用させるjqueryプラグインを書いてみた。

ま、活用できるかは置いておくとして…。

New!

Conguratulations!

Update!

Topics!

ソース

css（外部ファイルとかでicon_tip.css）

/*

 文字一つ一つにかかるスタイル指定。
  似たような感じでバリエーションを増やしてクラス名を引数で渡す

*/
.icnBgGreen {
	background-color: rgba( 0, 250, 0, 1 );
	color: rgba( 255, 255, 255, 1 );
	font-weight: bold;
	font-size: 110%;
	padding: 4px;
}
.icnBgRed {
	background-color: rgba( 250, 0, 0, 1 );
	color: rgba( 255, 255, 255, 1 );
	font-weight: bold;
	font-size: 110%;
	padding: 4px;
}




/*

 アニメーションさせたりするのスタイル指定。
  数字を変更するくらいで基本は変更しなくてよいはず

*/
span#iconTip {
	display: inline;
}
span#iconTip span.icnLetter {
	display: inline-block;
	-webkit-transform-origin: middle center;
	-moz-transform-origin: middle center;
	-ms-transform-origin: middle center;
	-o-transform-origin: middle center;
	transform-origin: middle center;
	-webkit-transform: scale( 1 );
	-moz-transform: scale( 1 );
	-ms-transform: scale( 1 );
	-o-transform: scale( 1 );
	transform: scale( 1 );
	-webkit-animation: 1.3s ease-in-out icnLetterX infinite;
	-moz-animation: 1.3s ease-in-out icnLetterX infinite;
	-o-animation: 1.3s ease-in-out icnLetterX infinite;
	animation: 1.3s ease-in-out icnLetterX infinite;
}
@-webkit-keyframes icnLetterX {
	0% {
		-webkit-transform: scale( 1 );
	}
	70% {
		-webkit-transform: scale( 1 );
	}
	85% {
		-webkit-transform: scale( 1.5 );
	}
	100% {
		-webkit-transform: scale( 1 );
	}
}
@-moz-keyframes icnLetterX {
	0% {
		-moz-transform: scale( 1 );
	}
	70% {
		-moz-transform: scale( 1 );
	}
	85% {
		-moz-transform: scale( 1.5 );
	}
	100% {
		-moz-transform: scale( 1 );
	}
}
@-o-keyframes icnLetterX {
	0% {
		-o-transform: scale( 1 );
	}
	70% {
		-o-transform: scale( 1 );
	}
	85% {
		-o-transform: scale( 1.5 );
	}
	100% {
		-o-transform: scale( 1 );
	}
}
@keyframes icnLetterX {
	0% {
		transform: scale( 1 );
	}
	70% {
		transform: scale( 1 );
	}
	85% {
		transform: scale( 1.5 );
	}
	100% {
		transform: scale( 1 );
	}
}

JavaScript（外部ファイルとかでjquery.icon_tip.js）

;

( function( $ ) {

    $.fn.iconTip = function( config ) {
        var defaults = {
            elem: 'span'
            , iconTipId: 'iconTip'
            , class: 'icnBgGreen'
            , letterClass: 'icnLetter'
        };

        var options = $.extend( defaults, config );

        return this.each( function() {
            var $one = $( this )
            , one_txt = $one.text()
            , $icon_tip = $( document.createElement( options.elem ) ).attr( 'id', options.iconTipId );

            $.each( one_txt.split(''), function( i, s ) {
                var delay = 0 + ( i / 10 ) + 's';
                var cssprop = {
                    'webkitAnimationDelay': delay
                    , 'mozAnimationDelay': delay
                    , 'oAnimationDelay': delay
                    , 'animationDelay': delay
                };
                $icon_tip.append( $( document.createElement( options.elem ) ).text( s ).addClass( options.class ).addClass( options.letterClass ).addClass( options.letterClass + ( i + 1 ) ).css( cssprop ) );
            } );

            $one.contents().remove();
            $one.append( $icon_tip );
        } );
    };

} )( jQuery );

HTMLと実行部分

New!
Conguratulations!
Update!
Topics!


<script>
$( '#new' ).iconTip();
$( '#cong' ).iconTip( {class:'icnBgRed'} );
$( '#upd' ).iconTip();
$( '#topics' ).iconTip( {class:'icnBgRed'} );
</script>

classをキー、クラス名を値にした連想配列を引数で渡すと一文字ずつspanのclassにくっつきます。デフォルトは、上記cssの

.icnBgGreen {
	background-color: rgba( 0, 250, 0, 1 );
	color: rgba( 255, 255, 255, 1 );
	font-weight: bold;
	font-size: 110%;
	padding: 4px;
}

2種類、3種類バリエーションを増やしたい時は似たようなスタイルシートのクラスを作って引数で渡す。

あとは、適宜数字をいじれば…。