smarti,스마트아이

jquery를 이용한 상자 내용 이동

jQuery를 이용한 상자 내용 이동

jQuery를 이용한 웹사이트 템플릿으로 사이트에 메뉴 항목을 선택하면 상단에 작게 흩어져 있는 상자가 애니메이션 되면서 컨텐츠 영역을 형성하는 애니메이션 효과를 내는 예제이다.

컨텐츠 영역은 Kevin Luck의 멋진 jScrollPane 플러그인을 사용할 사용자 정의 스크롤이다. 또한 작은 상자를 애니메이션하는 동안 회전하기 위해 Grady 의 jQuery 2d 변환 플러그인을 사용하고 약간의 양념을 위해 jQuery Easing 플러그인을 사용한다. 사진은 Photography by JIN.THAI( http://www.flickr.com/photos/jinthai/ )

 

예제보기

다운로드

MovingBoxesContent.zip

0.43MB

HTML

먼저 오버레이가 있는 배경 이미지를 배치

<div id="mb_background" class="mb_background">
	<img class="mb_bgimage" src="images/default.jpg" alt="Background"/>
	<div class="mb_overlay"></div>
</div>

div 요소를 임의의 위치와 회전 각도가 있는 작은 상자를 추가한다.

<div id="mb_pattern" class="mb_pattern"></div>

작은 상자는 총 16개로 배치

메뉴와 제목은 다음과 같이

<div class="mb_heading">
	<h1>Lack of Color</h1>
</div>

<div id="mb_menu" class="mb_menu">
	<a href="#" data-speed="600" data-easing="easeOutBack">About</a>
	<a href="#" data-speed="1000" data-easing="easeInExpo">Work</a>
	<a href="#" data-speed="600" data-easing="easeOutBack">Media</a>
	<a href="#" data-speed="1000" data-easing="easeInExpo">Contact</a>
</div>

다음으로 컨텐츠 영역의 구조를 정의한다.

<div id="mb_content_wrapper" class="mb_content_wrapper">
	<span class="mb_close"></span>
	<div class="mb_content">
		<h2>About</h2>
		<div class="mb_content_inner">
			<p>Some text...</p>
		</div>
	</div>
	<div class="mb_content">
		...
	</div>
	<div class="mb_content">
		...
	</div>
	<div class="mb_content">
		...
	</div>
</div>

컨텐츠 요소 중 하나에는 이미지 목록이 포함된다.

<div class="mb_content_inner">
	<p>...</p>
	<ul id="mb_imagelist" class="mb_imagelist">
		<li><img src="images/small/1.jpg" alt="image1" data-bgimg="images/image1.jpg"/></li>
		<li><img src="images/small/2.jpg" alt="image2" data-bgimg="images/image2.jpg"/></li>
		<li>...</li>
	</ul>
	<p>...</p>
</div>

 

CSS

모든 기본 스타일을 재설정하는 reset.css를 포함하고 주요 속성을 정의한다.

@import url('reset.css');

body{
	background:#000;
	color:#fff;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
}
a{
	color:#fff;
	text-decoration:none;
}

배경과 오버레이 패턴으로 사용할 이미지의 스타일 정의

img.mb_bgimage{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	opacity:0.8;
	z-index:1;
}
.mb_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:2;
}

메뉴 컨테이너 내부의 링크 요소

.mb_menu a{
	background-color:#000;
	margin-bottom:2px;
	opacity:0.9;
	display:block;
	width:98px;
	height:98px;
	color:#fff;
	line-height:98px;
	text-align:center;
	text-transform:uppercase;
	outline:none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-transition: all 0.2s ease-in;
}
.mb_menu a:hover{
	color:#000;
	background-color:#fff;
}

'work' 섹션의 썸네일 목록 스타일

ul.mb_imagelist li{
	float:left;
	margin:2px;
	cursor:pointer;
}
ul.mb_imagelist li img{
	display:block;
	opacity:0.3;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-transition: all 0.5s ease-in-out;
}
ul.mb_imagelist li img:hover{
	opacity:1.0;
}

 

Javascript

작은 상자를 만들어 제한된 영역 주위에 흩어져 회전시킨다. 메뉴 항목 선택시 해당 상자가 특정 위치로 애니메이션 되고 기본 컨텐츠 컨테이너를 형성한다. 닫기하면 상자가 다시 분산된다.

var $ menu = $ ( '#mb_menu' ), 
    $ menuItems = $ menu.children ( 'a' ), 
    $ mbWrapper = $ ( '#mb_content_wrapper' ), 
    $ mbClose = $ mbWrapper.children ( '.mb_close' ), 
    $ mbContentItems = $ mbWrapper.children ( '.mb_content' ), 
    $ mbContentInnerItems = $ mbContentItems.children ( '.mb_content_inner' ); 
    $ mbPattern = $ ( '#mb_pattern' ), 
    $ works = $ ( '#mb_imagelist> li' ), 
    $ mb_bgimage = $ ( '#mb_background> img' ),

jScollPane 플러그인을 초기화 하며 호출할 때 컨텐츠 div의 내부 영역에 사용자 지정 스크롤을 적용한다.

initPlugins = function() {
	$mbContentInnerItems.jScrollPane({
		verticalDragMinHeight: 40,
		verticalDragMaxHeight: 40
	});
},

'initPattern'은 16개 상자를 임의로 배치한다. 상단 및 왼쪽값을 특정 범위로 제한

initPattern = function() {
	for(var i = 0; i < 16 ; ++i) {
		//opacity, random top, left and angle
		var o = 0.1,
		t = Math.floor(Math.random()*196) + 5, // between 5 and 200
		l = Math.floor(Math.random()*696) + 5, // between 5 and 700
		a = Math.floor(Math.random()*101) - 50; // between -50 and 50
				
		$el = $('
').css({
			opacity : o,
			top     : t + 'px',
			left    : l + 'px'
		});
			
		if (!$.browser.msie)
			$el.transform({'rotate'	: a + 'deg'});
			
		$el.appendTo($mbPattern);
	}
	$mbPattern.children().draggable(); //just for fun
},

컨텐츠 영역을 닫으면 다시 작은 상자를 흩트려서 이동한다.

disperse = function() {
	$mbPattern.children().each(function(i) {
		var o = 0.1,
		t = Math.floor(Math.random()*196) + 5, 
		l = Math.floor(Math.random()*696) + 5, 
		a = Math.floor(Math.random()*101) - 50; 
		$el = $(this),
		param = {
			width	: '50px',
			height	: '50px',
			opacity	: o,
			top		: t + 'px',
			left	: l + 'px'
		};
				
		if (!$.browser.msie)
			param.rotate = a + 'deg';
				
		$el.animate(param, 1000, 'easeOutExpo');
	});
},

이벤트 처리

initEventsHandler = function() {
	/*
		click a link in the menu
	 */
	$menuItems.bind('click', function(e) {
		var $this = $(this),
		pos = $this.index(),
		speed = $this.data('speed'),
		easing = $this.data('easing');
		//if an item is not yet shown
		if(!$menu.data('open')){
			//if current animating return
			if($menu.data('moving')) return false;
			$menu.data('moving', true);
			$.when(openItem(pos, speed, easing)).done(function(){
				$menu.data({
					open	: true,
					moving	: false
				});
				showContentItem(pos);
				$mbPattern.children().fadeOut(500);
			});
		}
		else
			showContentItem(pos);
		return false;
	});
		
	/*
		click close makes the boxes animate to the top of the page
	 */
	$mbClose.bind('click', function(e) {
		$menu.data('open', false);
		/*
			if we would want to show the default image when we close:
			changeBGImage('images/default.jpg');
		 */
		$mbPattern.children().fadeIn(500, function() {
			$mbContentItems.hide();
			$mbWrapper.hide();
		});
			
		disperse();
		return false;
	});
		
	/*
		click an image from "Works" content item,
		displays the image on the background
	 */
	$works.bind('click', function(e) {
		var source	= $(this).children('img').data('bgimg');
		changeBGImage(source);
		return false;
	});
			
},

'work' 섹션에서 축소판 중 하나를 클릭하면 배경 이미지가 변경된다.

changeBGImage = function(img) {
	//if its the current one return
	if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
		return false;
				
	var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
	$itemImage.insertBefore($mb_bgimage);
		
	$mb_bgimage.fadeOut(1000, function() {
		$(this).remove();
		$mb_bgimage = $itemImage;
	});
	$itemImage.fadeIn(1000);
},

이미 표시된 컨텐츠 항목 표시

showContentItem = function (pos)  { 
	$ mbContentItems.hide (); 
	$ mbWrapper.show (); 
	$ mbContentItems.eq (pos) .show (). children ( '.mb_content_inner' ) .jScrollPane (); 
},

'openItem'은 상자를 페이지의 상단에서 중앙으로 이동하고 각 컨텐츠 항목을 표시한다.

openItem = function(pos, speed, easing) {
	return $.Deferred(
		function(dfd) {
			$mbPattern.children().each(function(i) {
				var $el = $(this),
				param = {
					width	: '100px',
					height	: '100px',
					top     : 154 + 100 * Math.floor(i/4),
					left	: 200 + 100 * (i%4),
					opacity	: 1
				};

				if (!$.browser.msie)
					param.rotate = '0deg';

				$el.animate(param, speed, easing, dfd.resolve);
			});
		}
	).promise();
};

Quotation : 메리 루 (웹디자이너 겸 개발자)

 

[코딩공부] - 전체화면 CSS 기반 슬라이더 만드는 방법

전체화면 CSS 기반 슬라이더 만드는 방법

[세상살이] - 크롬에서 화면 캡쳐하기 확장도구 이용하기

크롬에서 화면 캡쳐하기 확장도구 이용하기

[코딩공부] - CSS fixedNavigation2 예제 다운로드

CSS fixedNavigation2 예제 다운로드

[디자인공부] - 포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

[디자인공부] - WebP 웹을 위한 새로운 이미지 포맷

WebP 웹을 위한 새로운 이미지 포맷