<script src="jquery.js" type="text/javascript"></script>

<p><a class="modal" href="sample_l.gif"><img src="sample.gif" alt="" /></a></p>

<p><a class="modal" href="#sample1">テキスト</a></p>

<!-- CSSで非表示に設定 -->

<div id="sample1">
	<p>モーダルウィンドウ表示用のページ内要素1</p>
	<p><a class="modal-move" href="#sample2">次のコンテンツへ</a></p>
	<p><a class="modal-close" href="#">閉じる</a></p>
</div>

<div id="sample2">
	<p>モーダルウィンドウ表示用のページ内要素2</p>
	<p><a class="modal-move" href="#sample1">前のコンテンツへ</a></p>
	<p><a class="modal-close" href="#">閉じる</a></p>
</div>

<!-- //CSSで非表示に設定 -->

#modal-win {
	width: 100%;
	position: absolute;
}
#modal-win-inner {
	box-shadow: 0 0 5px rgba(0, 0, 0, .25);
	margin: 0 auto;
	position: relative;
	z-index: 101;
}
#modal-bg {
	width: 100%;
	height: 100%;
	background-color: #000000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
}

(function($){

	$(function(){
		simpleModalWindow();
	});

	function simpleModalWindow(){

		var sp = 500;	//アニメーション速度
		var win = $(window);
		var body = $('body');
		var bg = $('<div id="modal-bg"></div>');
		bg.css('opacity', '0');

		//モーダルウィンドウ表示クリックイベント
		$(document).on('click', '.modal', function(){
			var py = win.scrollTop();
			var wh = win.height();
			var self = $(this);
			var link = self.attr('href');
			var check = link.match(/^#.+/);
			var mWin = $('<div id="modal-win"><div id="modal-win-inner"></div></div>');
			var mInner = mWin.find('#modal-win-inner');
			mInner.css('opacity', '0');
			body.append(mWin);
			mWin.prepend(bg);
			if(!check){
				mInner.append('<img src="' + link + '" alt="" />');
				var img = mWin.find('img');
				img.on('load', function(){
					view(img);
				});
			}
			else {
				var contents = $(link);
				mInner.append(contents);
				contents.css({display: 'block', zIndex: '101'});
				view(contents);
			}
			function view(a_elm){
				var w = a_elm.outerWidth();
				var h = a_elm.outerHeight();
				var mt = (wh - h) / 2 + py;
				bg.animate({opacity: '.75'}, sp);
				mWin.css('top', mt + 'px');
				mInner.css({width: w, height: h}).animate({opacity: '1'}, sp);
			}
			return false;
		});

		//モーダルウィンドウ内要素変更クリックイベント
		$(document).on('click', '.modal-move', function(){
			var py = win.scrollTop();
			var wh = win.height();
			var self = $(this);
			var link = self.attr('href');
			var check = link.match(/^#.+/i);
			var mWin = $('#modal-win');
			var mInner = mWin.find('#modal-win-inner');
			if(check){
				mInner.animate({opacity: '0'}, sp, function(){
					var nowContents = $(this).children();
					body.append(nowContents);
					nowContents.hide();
					var contents = $(link);
					mInner.append(contents);
					contents.css({display: 'block', zIndex: '101'});
					var w = contents.outerWidth();
					var h = contents.outerHeight();
					var mt = (wh - h) / 2 + py;
					bg.animate({opacity: '.75'}, sp);
					mWin.css('top', mt + 'px');
					mInner.css({width: w, height: h}).animate({opacity: '1'}, sp);
				});
			}
			return false;
		});

		//モーダルウィンドウクローズクリックイベント
		$(document).on('click', '#modal-bg, .modal-close', function(){
			var mWin = $('#modal-win');
			var mInner = mWin.find('#modal-win-inner');
			var contents = mInner.children();
			mInner.animate({opacity: '0'}, sp, function(){
				if(contents.attr("id")){
					body.append(contents);
					contents.hide();
				}
				mWin.remove();
			});
			bg.animate({opacity: '0'}, sp);
			return false;
		});

	}

})(jQuery);

<script src="jquery.js" type="text/javascript"></script>

<div id="wrap">
	<div id="box1">
		<div class="inner">コンテンツ1</div>
	</div>
	<div id="box2">
		<div class="inner">コンテンツ2</div>
	</div>
</div>

#wrap > div {
	min-width: 960px;
	background: no-repeat 50% 0 fixed;
	margin: 0 auto;
	position: relative;
}
#wrap #box1 {
	height: 1200px;
	background-image: url(sample1.jpg);
	z-index: 1;
}
#wrap #box2 {
	height: 1000px;
	background-image: url(sample2.jpg);
	z-index: 2;
}
#wrap .inner {
	width: 800px;
	margin: 0 auto;
}

(function($){

	$(function(){
		parallax();
	});

	function parallax(){

		//変数設定
		var elm = $("#wrap").find("> div"); //背景を動かす要素
		var sp = 5; //数値が小さいほど視差が大きくなる
		var win = $(window);

		//配列作成
		pos = [];
		os = [];
		osNextCheck = [];
		osNext = [];
		h = [];
		posArray = [];
		posY = [];

		//配列設定
		elm.each(function(i){
			var self = $(this);
			pos[i] = self.css("background-position");
			os[i] = self.offset().top;
			osNextCheck[i] = self.next().size();
			if(osNextCheck[i] != 0){
				osNext[i] = self.next().offset().top;
			}
			else{
				h[i] = self.height();
				osNext[i] = os[i] + h[i];
			}
			if(pos[i]){
				var posArraySet = pos[i].split(" ");
				posArray[i] = new Array(posArraySet[0], posArraySet[1]);
				posY[i] = posArray[i][1].replace("px", "");
			}
			else{
				posY[i] = elm.css("background-position-y").replace("px", "");
			}
		});

		//スクロールイベント
		win.scroll(function(){
			var y = $(this).scrollTop();
			var winH = win.height();
			elm.each(function(i){
				var self = $(this);
				if(pos[i]){
					if(y > os[i] - winH && y < osNext[i]){
						self.css("background-position", posArray[i][0] + parseInt(-y / sp + os[i] / sp) + "px");
					}
				}
				else{
					self.css("background-position-y", parseInt(-y / sp + os[i] / sp) + "px");
				}
			});
		});

	}

})(jQuery);

<script src="jquery.js" type="text/javascript"></script>

<body>
	<div id="canvasbg">
		<canvas id="canvas"></canvas>
	</div>
	<div id="contents">
		<p>テキストテキストテキストテキストテキスト</P>
	</div>
</body>

html {
	height: 100%;
}
body {
	min-height: 100%;
	background-color: #000000;
	overflow: auto;
	position:relative;
	z-index: 1;
}
#canvasbg {
	height: auto;
	width: 100%;
	height:100%;
	min-height:100%;
	overflow: auto;
	position: fixed;
	z-index: 1;
}
#canvasbg canvas {
	position: fixed;
	z-index: 1;
}
#contents {
	width: 600px;
	background-color: rgba(0,0,0,0.7);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 20px auto;
	position: relative;
	z-index: 2;
}
#contents p {
	color: #ffffff;
}

(function($){

	$(function(){

		//変数宣言
		var canvasElm = $("#canvas");
		var canvasBg = $("#canvasbg");
		var alpha = 0.1;				//透明度
		var locArray = 100;				//位置の配列数
		var sizeArray = 100;			//サイズの配列数
		var colorArray = 600;			//カラーの配列数
		var speed = 50;					//アニメーション速度
		var colorLen = colorArray-2;
		var sizeLen = sizeArray-2;
		var locLen = locArray-2;
		var canvasWidth, canvasHeight;
		var ctx;
		var sizeNum = 0;
		var colorNum = 0;

		//配列作成
		randomLoc = [];
		randomSize = [];
		randomSizeInitial = [];
		randomColor = [];
		color = [];
		vector = [];

		//ランダム値作成関数
		function random(a_num, a_min){ //a_minは最小値、a_num+a_minは最大値
			return randomNum = Math.floor(Math.random()*a_num)+a_min;
		}

		//配列追加
		for(var i=0; i<locArray; i++){
			randomLoc.push(random(50, 50));
		}
		for(var i=0; i<sizeArray; i++){
			randomSize.push(random(70, 30));
		}
		for(var i=0; i<colorArray; i++){
			randomColor.push(random(255, 0));
		}
		for(var i=0; i<sizeArray; i++){
			vector.push(1);
		}
		for(var i=0, len=randomSize.length; i<len; i++){
			randomSizeInitial[i] = randomSize[i];
		}

		//Canvasサイズ取得関数
		function canvasSize(){
			canvasElm.attr("width", canvasBg.width()).attr("height", canvasBg.height());
			canvasWidth = canvasElm.width();
			canvasHeight = canvasElm.height();
		}

		//canvas表示関数
		function init(){
			var canvas = document.getElementById("canvas");
			if (canvas.getContext){
				ctx = canvas.getContext("2d");
				if(jQuery.support.opacity){
					setInterval(draw, speed); //draw関数を繰り返す
				}
				else {
					draw();
				}
			}
		}

		//カラー取得関数
		function getColor(){
			for(var i=0; i<3; i++){
				color[i] = randomColor[colorNum];
				colorNum++;
				if(colorNum>colorLen){
					colorNum = 0;
				}
			}
			return "rgba("+color[0]+","+color[1]+","+color[2]+","+alpha+")";
		}

		//サイズ取得関数
		function getSize(){
			if(sizeNum>sizeLen){
				sizeNum = 0;
			}
			var size = randomSize[sizeNum];
			sizeNum++;
			return size;
		}

		//円表示コンストラクタ関数
		function Round(a_color, a_x, a_y, a_size){
			this.color = a_color;
			this.x = a_x;
			this.y = a_y;
			this.size = a_size;
		}

		//円表示メソッド
		Round.prototype.view = function(){
			ctx.fillStyle = this.color;
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.size, 0, Math.PI*2, true);
			ctx.closePath();
			ctx.fill();
			locNum++;
			roundNum++;
		}

		//canvas表示内容関数
		function draw(){

			//Canvasに透明度のある背景色を重ねて徐々に消していく
			ctx.globalCompositeOperation = "source-over";
			ctx.beginPath();
			ctx.fillStyle = "rgba(0,0,0,0.1)";
			ctx.fillRect(0, 0, canvasWidth, canvasHeight);

			//円の重なり部分の描写を設定
			ctx.globalCompositeOperation = "lighter";

			//変数初期化
			sizeNum = 0;
			colorNum = 0;
			locNum = 0;
			roundNum = 0;
			var locX = 0; 
			var locY = 0;

			//配列作成
			roundPool = [];

			//関数キャッシュ
			var f_getColor = getColor;
			var f_getSize = getSize;
			var f_Round = Round;

			//ランダムに円を作成
			for(var i=0, len=canvasHeight; i<len; i+=loc){
				for(var j=0, len=canvasWidth; j<len; j+=loc){
					var loc = randomLoc[locNum];
					if(locNum>locLen){
						locNum = 0;
					}
					roundPool[roundNum] = new f_Round(f_getColor(), loc*locX, loc*locY, f_getSize());
					roundPool[roundNum].view();
					locX++;
				}
				locX = 0;
				locY++;
			}

			//サイズ配列の数値を変更（アニメーション設定）
			for(var i=0, len=sizeArray; i<len; i++){
				var nowSize = randomSize[i]-1;
				var maxSize = randomSizeInitial[i];
				var easing = Math.floor(Math.pow(nowSize-(maxSize/2), 2)/(-Math.pow(maxSize, 2)/12)+4); //イージング設定
				if(nowSize>maxSize-1 || nowSize<2){ //サイズが0もしくは初期値になったら縮小拡大を反転する
					vector[i]*=-1;
				}
				randomSize[i]-=easing*=vector[i]; //次回描写の円のサイズを設定
			}

		}

		//Canvas表示
		$(window).bind("load",function(){
			canvasSize();
			init();
		})
		.bind("resize",function(){ //ウィンドウリサイズ時にCanvasのサイズを変更
			canvasSize();
		});

	});

})(jQuery);

<script src="jquery.js" type="text/javascript"></script>

<img src="sample1.gif" class="rollover">
<img src="sample2.gif" class="rollover">
<img src="sample3.gif" class="rollover">

(function($){

	//プラグイン実行
	$(function(){
		$("img.rollover").imgOvAnime(); //実行する要素を記述。オプションあり。
	});

	//プラグイン
	$.fn.imgOvAnime = function(option){

		var o = $.extend({
			ovStr: "_ov",
			speed: 500,
			type: "fade"
		},option);
		var overElements = $(this);

		//フェード関数
		function fade(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative"}).each(function(){
				var self = $(this);
				var url = self.attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var ovImg = $("<img>").attr("src",url).css({position: "absolute"});
				function anime(a_alp){
					self.stop().animate({opacity:a_alp},speed);
				}
				self.before(ovImg).hover(
				function(){
					anime("0");
				},
				function(){
					anime("1");
				});
			});
		}

		//スライドトップ関数
		function slideTop(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"});
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var ovImg = $("<span>").css({
						width: w,
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						fontSize: "0"
					});
					function anime(a_h){
						self.prev().stop().animate({height:a_h},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(h);
					},
					function(){
						anime("0");
					});
				});
			});
		}

		//スライドレフト関数
		function slideLeft(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"});
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var ovImg = $("<span>").css({
						width: "0",
						height: h,
						backgroundImage: "url("+urlChange+")",
						position: "absolute"
					});
					function anime(a_w){
						self.prev().stop().animate({width:a_w},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(w);
					},
					function(){
						anime("0");
					});
				});
			});
		}

		//フェードスライドトップ関数
		function fadeSlideTop(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"});
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var ovImg = $("<span>").css({
						width: w,
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						opacity: "0",
						fontSize: "0"
					});
					function anime(a_h,a_alp){
						self.prev().stop().animate({height:a_h,opacity:a_alp},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(h,"1");
					},
					function(){
						anime("0","0");
					});
				});
			});
		}

		//スライドトップ2関数
		function slideTop2(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var imgBack = $("<span>").css({
						width: w,
						height: h,
						backgroundImage: "url("+urlDef+")",
						position: "absolute",
						fontSize: "0"
					});
					var ovImg = $("<span>").css({
						width: w,
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						fontSize: "0"
					});
					function anime(a_h1,a_h2){
						var selfOvImg = self.prev();
						selfOvImg.animate({height: a_h1},speed);
						selfOvImg.prev().stop().animate({height: a_h2},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(h,"0");
					},
					function(){
						anime("0",h);
					});
				});
			});
		}

		//フェード拡大縮小関数
		function fadeSizing(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var imgBack = $("<span>").css({
						width: w,
						height: h,
						backgroundImage: "url("+urlDef+")",
						position: "absolute",
						fontSize: "0"
					});
					var ovImg = $("<span>").css({
						width: "0",
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						opacity: "0",
						fontSize: "0"
					});
					function anime(a_w1,a_w2,a_h1,a_h2,a_alp1,a_alp2){
						var selfOvImg = self.prev();
						selfOvImg.stop().animate({width: a_w1,height: a_h1,opacity: a_alp1},speed);
						selfOvImg.prev().stop().animate({width: a_w2,height: a_h2,opacity: a_alp2},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(w,"0",h,"0","1","0");
					},
					function(){
						anime("0",w,"0",h,"0","1");
					});
				});
			});
		}

		//アニメーションタイプ確認
		switch(o.type){
		case "fade":
			fade();
			break;
		case "slideTop":
			slideTop();
			break;
		case "slideLeft":
			slideLeft();
			break;
		case "fadeSlideTop":
			fadeSlideTop();
			break;
		case "slideTop2":
			slideTop2();
			break;
		case "fadeSizing":
			fadeSizing();
			break;
		}

	}

})(jQuery);

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

<ul id="fontSize">
	<li><img class="changeBtn" src="sample-s.gif" alt="小"></li>
	<li><img class="changeBtn" src="sample-m.gif" alt="中"></li>
	<li><img class="changeBtn" src="sample-l.gif" alt="大"></li>
</ul>

<div id="changeArea">
<!-- ここからはフォントサイズが変更される -->
	<p>テキストテキストテキストテキストテキスト</p>
<!-- ここまではフォントサイズが変更される -->
</div>

<ul id="fontSize">
	<li class="changeBtn">小</li>
	<li class="changeBtn">中</li>
	<li class="changeBtn">大</li>
</ul>

<div id="changeArea">
<!-- ここからはフォントサイズが変更される -->
	<p>テキストテキストテキストテキストテキスト</p>
<!-- ここまではフォントサイズが変更される -->
</div>

(function($){

	$(function(){
		fontsizeChange();
	});

	function fontsizeChange(){

		var changeArea = $("#changeArea");			//フォントサイズ変更エリア
		var btnArea = $("#fontSize");				//フォントサイズ変更ボタンエリア
		var changeBtn = btnArea.find(".changeBtn");	//フォントサイズ変更ボタン
		var fontSize = [100,116,131];				//フォントサイズ（HTMLと同じ並び順、幾つでもOK、単位は％）
		var ovStr = "_ov";							//ロールオーバー画像ファイル末尾追加文字列（ロールオーバー画像を使用しない場合は値を空にする）
		var activeClass = "active";					//フォントサイズ変更ボタンのアクティブ時のクラス名
		var defaultSize = 0;						//初期フォントサイズ設定（HTMLと同じ並び順で0から数値を設定）
		var cookieExpires = 7;						//クッキー保存期間
		var sizeLen = fontSize.length;
		var useImg = ovStr!="" && changeBtn.is("[src]");

		//現在クッキー確認関数
		function nowCookie(){
			return $.cookie("fontsize");
		}

		//画像切替関数
		function imgChange(elm1,elm2,str1,str2){
			elm1.attr("src",elm2.attr("src").replace(new RegExp("^(\.+)"+str1+"(\\.[a-z]+)$"),"$1"+str2+"$2"));
		}

		//マウスアウト関数
		function mouseOut(){
			for(var i=0; i<sizeLen; i++){
				if(nowCookie()!=fontSize[i]){
					imgChange(changeBtn.eq(i),changeBtn.eq(i),ovStr,"");
				}
			}
		}

		//フォントサイズ設定関数
		function sizeChange(){
			changeArea.css({fontSize:nowCookie()+"%"});
		}

		//クッキー設定関数
		function cookieSet(index){
			$.cookie("fontsize",fontSize[index],{path:'/',expires:cookieExpires});
		}

		//初期表示
		if(nowCookie()){
			for(var i=0; i<sizeLen; i++){
				if(nowCookie()==fontSize[i]){
					sizeChange();
					var elm = changeBtn.eq(i);
					if(useImg){
						imgChange(elm,elm,"",ovStr);
					}
					elm.addClass(activeClass);
					break;
				}
			}
		}
		else {
			cookieSet(defaultSize);
			sizeChange();
			var elm = changeBtn.eq(defaultSize);
			if(useImg){
				imgChange(elm,elm,"",ovStr);
				imgChange($("<img>"),elm,"",ovStr);
			}
			elm.addClass(activeClass);
		}

		//ホバーイベント（画像タイプ）
		if(useImg){
			changeBtn.each(function(i){
				var self = $(this);
				self.hover(
				function(){
					if(nowCookie()!=fontSize[i]){
						imgChange(self,self,"",ovStr);
					}
				},
				function(){
					mouseOut();
				});
			});
		}

		//クリックイベント
		changeBtn.click(function(){
			var index = changeBtn.index(this);
			var self = $(this);
			cookieSet(index);
			sizeChange();
			if(useImg){
				mouseOut();
			}
			if(!self.hasClass(activeClass)){
				changeBtn.not(this).removeClass(activeClass);
				self.addClass(activeClass);
			}
		});

	}

})(jQuery);

<script src="jquery.js" type="text/javascript"></script>

<img src="sample1.gif" class="rollover">
<img src="sample2.gif" class="rollover">
<img src="sample3.gif" class="rollover">

<script src="jquery.js" type="text/javascript"></script>

<body>
	<div id="canvasbg">
		<canvas id="canvas"></canvas>
	</div>
	<div id="contents">
		<p>テキストテキストテキストテキストテキスト</P>
	</div>
</body>

html {
	height: 100%;
}
body {
	min-height: 100%;
	overflow: auto;
	position:relative;
	z-index: 1;
}
#canvasbg {
	height: auto;
	width: 100%;
	height:100%;
	min-height:100%;
	overflow: auto;
	position: fixed;
	z-index: 1;
}
#canvasbg canvas {
	position: fixed;
	z-index: 1;
}
#contents {
	width: 600px;
	margin: 20px auto;
	position: relative;
	z-index: 2;
}

$(function(){

	//変数宣言
	var Canvas = $("#canvas"),
	CanvasBg = $("#canvasbg"),
	alpha = 0.2, //透明度
	locArray = 100, //位置の配列数
	sizeArray = 100, //サイズの配列数
	colorArray = 600, //カラーの配列数
	speed = 50, //アニメーション速度
	canvasWidth,
	canvasHeight,
	locNum,
	sizeNum,
	colorNum,
	colorR,
	colorG,
	colorB,
	ctx,
	loc,
	nowSize;
	
	//配列作成
	randomLoc = new Array();
	randomSize = new Array();
	randomSizeInitial = new Array();
	randomColor = new Array();
	sizeValue = new Array();
	easing = new Array();

	//ランダム値作成関数
	function random(num,min){ //minは最小値、num+minは最大値
		randomNum = Math.floor(Math.random()*num)+min;
		return randomNum;
	}

	//配列追加
	for(var i=0; i<locArray; i++){
		randomLoc.push(random(50,50));
	}
	for(var i=0; i<sizeArray; i++){
		randomSize.push(random(90,10));
	}
	for(var i=0; i<colorArray; i++){
		randomColor.push(random(255,0));
	}
	for(var i=0; i<sizeArray; i++){
		sizeValue.push(1);
	}
	for(var i=0; i<randomSize.length; i++){
		randomSizeInitial[i] = randomSize[i];
	}
	for(var i=0; i<4; i++){
		easing.push(i+2);
	}

	//カラー設定関数
	function color(){
		 return "rgba("+colorR+","+colorG+","+colorB+","+alpha+")";
	}

	//サイズパーセンテージ設定関数
	function sizeRatio(num,ratio){
		return randomSizeInitial[num]/100*ratio;
	}

	//Canvas表示関数
	function init(){
		var canvas = document.getElementById("canvas");
		if (canvas.getContext){
			ctx = canvas.getContext("2d");
			setInterval(draw, speed); //draw関数を繰り返す
		}
	}

	//Canvas表示内容
	function draw(){

		//Canvasを#canvasbg（背景と同じサイズ）と同じサイズにする
		Canvas.attr({height:CanvasBg.height()}).attr({width:CanvasBg.width()});

		canvasWidth = Canvas.width();
		canvasHeight = Canvas.height();

		//Canvasをクリア
		ctx.clearRect(0,0,canvasWidth,canvasHeight);

		//円の重なり部分の描写を設定
		ctx.globalCompositeOperation = "lighter";

		//変数を0に設定
		locNum = 0;
		sizeNum = 0;
		colorNum = 0;

		//ランダムに円を作成
		for(var i=0; i<canvasWidth; i+=loc){
			for(var j=0; j<canvasWidth; j+=loc){
				loc = randomLoc[locNum++];
				if(locNum>randomLoc.length-1){
					locNum = 0;
				}
				size = randomSize[sizeNum++];
				if(sizeNum>randomSize.length-1){
					sizeNum = 0;
				}
				colorR = randomColor[colorNum++];
				colorG = randomColor[colorNum++];
				colorB = randomColor[colorNum++];
				if(colorNum>randomColor.length-1){
					colorNum = 0;
				}
				ctx.beginPath();
				ctx.fillStyle = color();
				ctx.arc(j, i, size, 0, Math.PI*2, true);
				ctx.fill();
			}
		}

		//サイズ配列の数値を変更（アニメーション設定）
		for(var i=0; i<randomSize.length; i++){

			nowSize = randomSize[i];

			//イージング設定
			if(nowSize<sizeRatio(i,90) && nowSize>sizeRatio(i,10)){
				sizeValue[i] *= easing[0];
			} else
			if(nowSize<sizeRatio(i,80) && nowSize>sizeRatio(i,20)){
				sizeValue[i] *= easing[1];
			} else
			if(nowSize<sizeRatio(i,70) && nowSize>sizeRatio(i,30)){
				sizeValue[i] *= easing[2];
			} else
			if(nowSize<sizeRatio(i,60) && nowSize>sizeRatio(i,40)){
				sizeValue[i] *= easing[3];
			}

			//サイズが0もしくは初期値になったら縮小拡大を反転する
			if(nowSize>randomSizeInitial[i] || nowSize<1){
				sizeValue[i] *= -1;
			}

			//縮小拡大の値を計算
			randomSize[i]-=sizeValue[i];

			//イージング用に変更したsizeValueの値をリセット
			switch(sizeValue[i]){
				case easing[0]:
				case -easing[0]:
					sizeValue[i] /= easing[0];
					break;
				case easing[1]:
				case -easing[1]:
					sizeValue[i] /= easing[1];
					break;
				case easing[2]:
				case -easing[2]:
					sizeValue[i] /= easing[2];
					break;
				case easing[3]:
				case -easing[3]:
					sizeValue[i] /= easing[3];
					break;
			}

		}

	}

	//Canvas表示
	init();

});

<script src="jquery.js" type="text/javascript"></script>

<ul id="rotaMenu">
	<li><a href="#box1">メニュー1</a></li>
	<li><a href="#box2">メニュー2</a></li>
	<li><a href="#box3">メニュー3</a></li>
	<li><a href="#box4">メニュー4</a></li>
</ul>

<div id="rotationWrap">
	<div id="rotation">
		<div id="box1" class="rota">
			<p>テキストテキストテキスト</p>
		</div>
		<div id="box2" class="rota">
			<p>テキストテキストテキスト</p>
		</div>
		<div id="box3" class="rota">
			<p>テキストテキストテキスト</p>
		</div>
		<div id="box4" class="rota">
			<p>テキストテキストテキスト</p>
		</div>
	</div>
</div>

ul#rotaMenu {
	display: inline-block;
	margin-bottom: 10px;
}
ul#rotaMenu li {
	margin-right: 10px;
	float: left;
}
ul#rotaMenu li a {
	display: block;
	width: 100px;
	background-color: #eee;
	background: -webkit-gradient(linear,center top,center bottom,from(#fff),to(#ddd));
	background: -moz-linear-gradient(top, #fff, #ddd);
	background: -o-gradient(linear,center top,center bottom,from(#fff),to(#ddd));
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-box-shadow: 0 0 3px #ccc;
	-moz-box-shadow: 0 0 3px #ccc;
	padding: 5px;
	color: #666;
	text-shadow: 1px 1px 0 #fff;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
}
ul#rotaMenu li a:hover {
	background: -webkit-gradient(linear,center top,center bottom,from(#ddd),to(#fff));
	background: -moz-linear-gradient(top, #ddd, #fff);
}
ul#rotaMenu li a#active {
	background-color: #666;
	background: -webkit-gradient(linear,center top,center bottom,from(#666),to(#333));
	background: -moz-linear-gradient(top, #666, #333);
	border: 1px solid #333;
	color: #ddd;
	text-shadow: -1px -1px 0 #333;
}
div#rotationWrap {
	width: 798px;
	background-color: #eee;
	background: -webkit-gradient(linear, center top, center bottom, from(#f7f7f7), to(#eee));
	background: -moz-linear-gradient(top, #f7f7f7, #eee);
	border: 1px solid #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 0 5px #bbb;
	-moz-box-shadow: 0 0 5px #bbb;
	overflow: hidden;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
}
div#rotation {
	position: relative;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
}
div#rotation div.rota {
	width: 780px;
	padding: 10px;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
}
div#rotation div.rota p {
	color: #333;
	text-shadow: 1px 1px 0 #fff;
	line-height: 1.5;
}

$(function(){

	//対象要素設定
	var wrap = $("#rotationWrap");
	var rotaArea = $("#rotation");
	var menu = $("#rotaMenu a");
	var rotaBox = $("div.rota",rotaArea);

	//初期表示設定
	$(window).bind("load",function(){ //ロード終了後実行
		wrap.css({
			height: rotaBox.eq(0).prop("offsetHeight") //#rotationWrapの高さを一つめのdiv.rota高さに合わせる
		});
	});
	menu.eq(0).attr("id","active"); //一つめのdiv.rotaにのid属性activeを加える
	if(!jQuery.support.opacity){ //IE6,7,8に適用
		rotaBox.not(":eq(0)").css({
			visibility: "hidden" //一つめ以外のdiv.rotaを非表示にする
		});
	};
	
	//メニューアクティブ変更クリックイベント
	menu.click(function(){ //クリックされた#rotaMenu aに対してid属性activeを移動する
		menu.not(this).removeAttr("id");
		$(this).attr("id","active");
	});

	//css設定
	rotaBox.css({
		position: "absolute",
		top: "0",
		left: "0"
	});

	//div.rotaに対しての設定
	rotaBox.each(function(){ //div.rotaをそれぞれを90度づつずらして回転させる
		var index = rotaBox.index(this);
		var angle = 90*index;
		var rotate = "rotate(-"+angle+"deg)";
		$(this).css({
			"-webkit-transform": rotate,
			"-moz-transform": rotate,
			"-o-transform": rotate,
			"-ms-transform": rotate,
			"transform": rotate
		});
	});

	//コンテンツ回転クリックイベント
	menu.click(function(){ //#rotaMenu aをクリックで#rotationを回転させる
		var index = menu.index(this);
		var boxHeight = rotaBox.eq(index).prop("offsetHeight");
		var angle = 90*index;
		var rotate = "rotate("+angle+"deg)";
		rotaArea.css({
			height: boxHeight,
			"-webkit-transform": rotate,
			"-moz-transform": rotate,
			"-o-transform": rotate,
			"-ms-transform": rotate,
			"transform": rotate
		});
		if(!jQuery.support.opacity){ //IE6,7,8に適用
			rotaBox.eq(index).css({ //クリックしたdiv.rotaを表示する
				visibility: "visible"
			});
			rotaBox.not("':eq("+index+")'").css({ //クリックした以外のdiv.rotaを非表示にする
				visibility: "hidden"
			});
		};
		wrap.css({ //表示されているdiv.rotaにあわせて#rotationWrapの高さを変更する
			height: boxHeight
		});
		return false;
	});

});

<script src="jquery.js" type="text/javascript"></script>

<ul id="sample">
	<li><div class="himonoren"><img src="jqueryhimonoren_img_sample1.jpg" alt=""></div></li>
	<li><div class="himonoren"><img src="jqueryhimonoren_img_sample2.jpg" alt=""></div></li>
</ul>

ul#sample {
	display: inline-block;
	margin-left: 10px;
}
ul#sample li {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 9px;
	margin: 0 10px 10px 0;
	float: left;
}

$(function(){

	//対象要素設定
	var Noren = $(".himonoren");
	
	//一旦画像を非表示
	$("img",Noren).hide();

	//ロード終了後実行
	$(window).bind("load", function(){

		//classがhimonorenの要素に対しての処理
		Noren.each(function(){

			//変数宣言
			var This = $(this),
			NorenImg = $("img",This),
			ImgWidth = NorenImg.width(), //画像の幅を取得
			ImgHeight = NorenImg.height(); //画像の高さを取得

			//CSS設定
			This.css({
				width: ImgWidth,
				height: ImgHeight,
				position: "relative"
			});
			NorenImg.css({position: "absolute"});

			//要素追加
			for(var i=0; i<ImgWidth; i++){ //画像の幅のサイズ分要素を追加
				NorenImg.after("<span></span>");
			}
			
			//追加要素CSS設定
			var NorenSpan = $("span",This);
			var NorenSpanLng = NorenSpan.length;
			NorenSpan.css({ //追加要素を幅1px高さは画像と同じにして画像の上に重なるよう設定
				display: "block",
				width: "1px",
				height: ImgHeight+"px",
				backgroundColor: "#fff",
				position: "absolute",
				top: "0"
			});
			for(var i=0; i<NorenSpanLng; i++){ //追加要素の位置を1pxずつ横にずらす
				NorenSpan.eq(i).css({left: i});
			}
			
			//非表示にしていた画像を表示
			NorenImg.show();

			//ホバーイベント
			NorenSpan.hover(
			function(){ //追加要素マウスオン時にフェードアウト設定
				$(this).not(":animated").fadeOut(200);
			},
			function(){ //追加要素マウスアウト時にフェードイン設定
				$(this).fadeIn(5000);
			});

		});

	});

});