포트폴리오 제작기 3편

제작중인 포트폴리오 랜딩페이지 이미지 

 

 

백엔드 프론트엔드의 기본 설정 등 완료하고, 서버에서 프론트엔드 기술들의 이미지와 이름을 API 응답으로 받아서 

화면에 뿌려주는 작업을 진행했다. 어떤 식의 포트폴리오를 만들어볼까 고민하다가, 포트폴리오를 하나의 홈페이지처럼 

만들어보기로 했다. 뭔가 포트폴리오가 아닌 정말 내가 운영하고 서비스하는 페이지의 느낌? 을 생각했다. 

 

인터렉티브하게 만들기 위해서 랜딩페이지를 먼저 구현 작업을 시작했고, 처음에는 전체에 프론트엔드 기술들의 아이콘이 둥둥 떠다니고 마우스 위치에 따라서 조금씩 이동하거나 360도 회전하는 등의 효과를 생각했는데, 막상 테스트해보니 이쁜 것 같지도 않고 사방 팔방 정신이 없어보여서 갈아엎었다.

 

기술들의 아이콘이 모여 동그라미를 그리고, 일정한 속도로 회전하도록 구현했다. 

CSS로도 가능한 작업이지만, 자바스크립트로 구현해봤다. (그동안 CSS만 사용해서 그런지...)

 

		lotateSkils() {
			const skils = this.$refs.landingPageSkils;
			skils.style.transform = `rotate(${this.rotateCount}deg)`;
			this.rotateCount += 0.3;
			if (this.rotateCount >= 360) this.rotateCount = 0;
			window.requestAnimationFrame(this.lotateSkils);
		},

 

빙글빙글 회전하는 스킬들의 코드를 보자면, 대충 이렇다. 

window.requestAnimationFrame 이라는 함수를 처음 사용해봤는데, 생각보다 사용하기도 쉽고 

프레임을 사용해서 그런지 애니메이션이 부드러워 완성도가 있어보였다. 

 

모니터의 주사율에 맞춰서 프레임이 재생되기 때문에, setInterval 함수보다 부드러운 연출이 가능하다. 

 

가운데 글자 같은 경우 타이핑 애니메이션을 구현 중이다. 아직 미구현인데, 

저장된 텍스트를 지웠다가, 다시 타이핑했다가, 재귀적으로 작동하는 함수를 만들기 위해 작업 중이다.