今日の人気記事

  1. Bootstrapを使ったページ送りを実装「bootstrap pagination」

背景におもしろい効果を!六角形のアニメーション「Hex」

当ページのリンクには広告が含まれています。

スポンサーリンク

六角形のアニメーションを実装するプラグイン「Hex」を紹介します。

jQueryプラグイン「Hex」

このプラグインを使えば、たくさんの六角形がふわーっと流れるようなアニメーション効果を実装することができます。

オプションでは六角形が流れる方向、色、回数、遅延などを設定することができます。

Webサイト全体の背景やタイトルの背景に使うとおもしろいかもしれませんね。

スポンサーリンク

それではデモページをご覧ください。

「Hex」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hex - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="hex.js"></script>
<script>
$(document).ready(function(){
  $(".demo").hex();
});
</script>
<style>
.demo {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
</style>
</head>
<body>
<h1>Hex のデモでーす。</h1>
<div class="demo"></div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)