JavaScript

jQueryでCSS3の回転のアニメーションをプラグインなしでやってみる

記事内に商品プロモーションを含む場合があります

今日はjQueryの小ネタを紹介します。

jQueryのanimateメソッドはwidthやmarginなど、数値を直接変更させることはできますが、CSS3のtransform:rotateなどは変更できないようになっています。しかし、jQueryのanimateメソッドはjQueryオブジェクトのCSSプロパティだけでなく、JavaScriptのオブジェクトの変化もアニメーションさせることができます。今回はそれをつかって、画像をanimateメソッドを使って回転させる方法を紹介します。

HTMLは以下の通り

<body>
	<p class="button">回転する!</p>
	<img class="img" src="koala.jpg" />
</body>

CSSはこんな感じ

<style>;
	body {
		padding:50px;
	}
	p.button {
		display: inline-block;
		border:1px solid #aaa;
		padding:4px;
		cursor: pointer;
	}
	img.img {
		display: block;
	}
</style>

そして、JavaScriptのコードは以下の通り

$(function(){
	// ボタンをクリックした時
	$('p.button').click(function(){
		// degという変数を0から360まで3秒かけて変化させる。
		$({deg:0}).animate({deg:360}, {
			duration:3000,
			// 途中経過
			progress:function() {
				$('img.img').css({
					transform:'rotate(' + this.deg + 'deg)'
				});
			},
			// アニメーション完了
			complete:function() {
				alert('1回転しました!');
			}
		});
	});
});

詳しく解説しなくても、直感でわかるかと思いますが、要するにdegという変数を0から360まで変化させます。変化中ではprogressというオブジェクトに関数を割り当てます。その関数内で、CSSメソッドを使って、transform:rotate(XXXdeg);をやるという処理です。

この、animateメソッドでjQueryオブジェクトを変化させるという方法は、結構いろいろな場面で使えそうですね。今回のようにCSS3の新しいプロパティを使うだけでなく、アイデアしだいでは、ちょっと凝った動きなんかもできそう。ぜひお試しください!

===

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA