메인페이지 (index.html)

1. 사전계획

• 메인 페이지 입장 시, 콘텐츠 슬라이드 애니메이션
• 자세히보기 버튼 로딩 애니메이션
• 모바일용 햄버거메뉴 버튼 애니메이션

2. 개발과정

(css keyframe 및 전체소스는 github에서 확인해주세요!)

2-1. 메인 콘텐츠 움직임

재사용을 염두하여 class 로 만들어놨음
실제 소스에는 각 animation과 @keyframe 에 크로스브라우징 작업 완료!

• 폴더 이미지 등장 애니메이션(slide-down)

.slide-down { animation: slideDown 1s ease-in-out; }

• 폴더 이미지 반복 애니메이션(up-down)

.up-down { animation: upDown 1.2s ease-in-out infinite; }

• 텍스트 페이드 애니메이션(fade-up)

.fade-up { animation: fadeUp 1s ease-in-out; }

2-2. 버튼 로딩 애니메이션

쫀득한 클릭감을 위해서 한 컷 한 컷 직접 연구해봄
실제 소스에는 각 animation과 @keyframe 에 크로스브라우징 작업 완료!

• 버튼 mousedown 시, translate Y 축 움직임

$('.entrance-btn').on('mousedown', function (e) {
	$(this).css('transform', 'translateY(4px)');
});

• 버튼 mouseup 되면 2종류의 로딩 애니메이션 실행

$('.entrance-btn').on('mouseup', function (e) {
	$(this).html('').addClass('circle-motion');
	function loadingBar() {
		$('.loading-bar').addClass('loading');
	}
	setTimeout(loadingBar, 600);
});

/* 버튼 움직임 */
.circle-motion { animation: circleBtn 1s ease-in-out forwards; }
/* 로딩바 움직임 */
.loading { animation: loading .8s ease-in-out forwards; }

2-3. 모바일용 햄버거메뉴 애니메이션

실제 소스에는 각 animation과 @keyframe 에 크로스브라우징 작업 완료!

• 햄버거메뉴는 메뉴버튼 박스만들고
  그 안에 span태그로 위에서부터 3개의 가로라인을 그려서 만들었음
• menu-open1,3 과 menu-close1,3 클래스명으로 가로라인의 움직임을 제작하고

/* 모바일메뉴 열기버튼효과 */
/*첫번째 line*/
.menu-open1 { animation: menuOpen1 1s forwards; }
/*세번째 line*/
.menu-open3 { animation: menuOpen3 1s forwards; }

/* 모바일메뉴 닫기버튼효과 */
/*첫번째 line*/
.menu-close1 { animation: menuClose1 1s forwards; }
/*세번째 line*/
.menu-close3 { animation: menuClose3 1s forwards; }

• 자바스크립트로 클릭이벤트에 해당 클래스들 탈부착해줌

3. 결과물

4. 개인적 코멘트

영상디자인할때도 이런 쫀득한 움직임들을 좋아했는데
어도비툴이 아닌 코딩으로 만들 수 있어서 신기했다

완전히 같지는 않겠지만
키프레임이나 타이밍함수등 에펙에서 사용하던 것들을
생각보다 자유도있게 사용할 수 있어서 재밌었다

단순 웹개발자이지만 이런 모션의 퀄리티가
웹 디자인의 퀄리티를 높인다는 생각에
앞으로도 여러 움직임을 만들고 연습해보려고 한다!