UI Laboratory

UI 개발을 위한 레퍼런스

Scroll
Animation

설명
Scroll Animation은 사용자의 Scroll 위치에 반응하여 Animation을 제공한다.
즉, 브라우저상에서 스크롤링을 할때 Animation 영역이 가시영역에 들어오면 Animation을 시작한다.
여기서는 CSS3의 Keyframe Animation과 CSS Transition 을 사용하여 애니메이션을 제공하므로
IE10과 크롬을 비롯한 최신 브라우저만을 지원한다.

HTML

					

Animate.css

CSS

					<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
					<style type="text/css">
						html { font: 100%/1.5 "Roboto Condensed", sans-serif; color: #3d464d; background-color: #fff; -webkit-font-smoothing: antialiased; width: 100%; overflow: hidden-x; /* Centering in The Unknown */ text-align: center; }
						.animation-module {height:235px; padding:50px 0;}
						#animationSandbox {-webkit-animation-duration: 1s; -webkit-animation-delay: 0.2s;-moz-animation-duration: 1s; -moz-animation-delay: 0.2s;}
						.title { color: #f35626; background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 60s infinite linear; }
						.mega { font-size: 6rem; line-height: 1; }
						h1 { font-size: 3rem; font-weight: 100; line-height: 1; letter-spacing: -.05em; }
						.progress {position:relative; width:500px; height:10px; margin:0 auto; border:1px solid #dedede; border-radius:10px;}
						.bar {position:absolute; left:0; top:0; width:0%; height:10px; background-color:orange; border-radius:10px; -webkit-transition-property : width; -moz-transition-property : width; -o-transition-property : width; transition-property : width; -webkit-transition-duration : 0.5s; -moz-transition-duration : 0.5s; -o-transition-duration : 0.5s; transition-duration : 0.5s; -webkit-transition-timing-function : ease-out; -moz-transition-timing-function : ease-out; -o-transition-timing-function : ease-out; transition-timing-function : ease-out;}
						.bar.to-80 {width:80%;}

						.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
						@-webkit-keyframes bounceIn { 
							0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); }
							50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); }
							70% { -webkit-transform: scale(.9); transform: scale(.9); } 
							100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
						}

						@keyframes bounceIn {
							0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); }
							50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }
							70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); }
							100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
						}

						.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; }
					</style>
				

Javascript

<script type="text/javascript">
	var eventBridge = $('<div />');
	var $htmlBody = $('html, body');
	var eventDictionary = {
		global : {
			RESIZE : 'resize',
			ROTATE : 'rotate',
			SCROLL : 'scroll'
		 }
	};
	function getScrollTop(){
		return $(window).scrollTop();
	}
	(function($){

	 	var effect = 'bounceIn',
			animationEnd = false;
		/**
		AnimateModule Class

		@class $.AnimateModule
		@constructor
		**/
		$.AnimateModule = function(params){
			/**
			@method init
			**/
			function init(){
				bindEvents();
			}
		  
		  	function startAnim(x) {
				$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
					$(this).removeClass();
					animationEnd = true;
					if(animationEnd) motionBar('to-80');
				});
			}

			function motionBar(x){
				$('.progress').find('.bar').addClass(x);
			}

			function bindEvents(){

				var moduleHeight = $('.animation-module').outerHeight(),
					moduleTop = $('.animation-module').position().top,
					moduleBottom = moduleHeight + moduleTop;

				eventBridge.on(eventDictionary.global.SCROLL, function(e){
					var	scrollTop = getScrollTop();	

					if(scrollTop >= moduleTop && animationEnd == false){
						startAnim(effect);
					}

					if(scrollTop == 0){
						animationEnd = false;
						$('.progress').find('.bar').removeClass('to-80');
					}
				});

				$(window).on('scroll', function(e){
					eventBridge.trigger(jQuery.Event(eventDictionary.global.SCROLL));
				});
			}

			init();
		}
	}(jQuery));

	$(function(){
		new $.AnimateModule();
	});
</script>