scroll switch

jQueryで位置（高さ）を取得して、任意の高さに来たらcssを切り替えてアニメーションさせる。任意の高さに来たらtransformなどが書いてある.onというcssが有効になる。

2014-02-06

Sec1

Sec2

css

html,body {
		margin: 0;
		padding: 3em;
	}
	section{
		padding:30em 0
	}
	/*1つめ*/
	.box {
		height: 10em;
		margin: 0 1em 2em 0;
		position: relative;
		border: 2px solid #333;
	}
	.box:before {
		content: "1回転して３倍に拡大";
		display: block;
		position: absolute;
		left: 45%;
		top : 45%;
		background-color:pink;
		transition: 0.5s;
	}
	

	.on.box:before {
		transform: scale(3) rotate(1turn);
		background-color:purple;
		color:#fff;
	}
	
	/*2つめ*/
	.box2 {
		height: 10em;
		margin: 0 1em 2em 0;
		position: relative;
		border: 2px solid #333;
	}
	.box2:before {
		content: "半回転して2倍に拡大";
		display: block;
		position: absolute;
		left: 45%;
		top : 45%;
		background-color:indianred;
		transition: 0.5s;
	}
	

	.on.box2:before {
		transform: scale(-2) rotate(1turn);
		background-color:skyblue;
	}
	
	

jQuery

$(function(){
	var scrollBottom;
	var wHeight;
	var sec1Top = $("#sec1 .box").offset().top;//1つめ　varの関数名はif文で使われる　動かしたいオブジェクトの数だけこの行も必要
	var wowwow = $("#sec2 .box2").offset().top;//2つめ　varの関数名はif文で使われる
	
	function getScrollTop(){
		wHeight = Math.floor($(window).height() * 0.5);//0.5は画面の真ん中、0はTOP、1はBOTTOMで変化
		scrollBottom = $(window).scrollTop() + wHeight;
	
		//動かしたいオブジェクトの数だけifとelse（２つでワンセット）がある

		if(scrollBottom >= sec1Top){
			
			$("#sec1 .box").addClass("on");
		}
		else{
			$("#sec1 .box").removeClass("on");
		}
		
		
		if(scrollBottom >= wowwow){
			
			$("#sec2 .box2").addClass("on");
		}
		else{
			$("#sec2 .box2").removeClass("on");
		}
	
	
	}
	$(window).on("load scroll", getScrollTop);
});

//.offset() .scrollTop() .addClass .removeClassはjQueryの変数なので「ヌー」で調べられる。
//仕組みは、ある位置（ここでは0.5に来た時）にcssが入れ替わる。.boxから.box onに。
//変化する矩形は疑似要素でcssのtransformでアニメーションしている。

html

<section id="sec1">
			<div>
				<h1>Sec1</h1>
				<div class="box"></div>
			</div>
		</section>
        
        <section id="sec2">
			<div>
				<h1>Sec2</h1>
				<div class="box2"></div>
			</div>
		</section>

リンク元：http://nobu-69.com/