포트폴리오 제작 시작 #1

이번에 포트폴리오를 웹으로 제작하게되었다.

 

우선 기본 세팅으로 FullPage와 Scroll Trigger, Slider 를 사용하여 제작해보려고 한다.

 

디자인은 얼추 맞추긴했지만 이게 모 아니면 도 인 디자인이다보니

 

하다가 안되면 갈아엎기로 했다.

 

포트폴리오에는 브랜드 / 본인소개 / 프로세스 / 코딩작업(프로세스) / 프로세스 / 연락처

 

식으로 넣으려고 시안작업까지 완료했다!

 

우선 내가 사용하려는 FullPage는 부분 유료화이기때문에

 

CDNjs 사이트에 있는 코드를 사용하였다!

 

 FullPage 

 

풀페이지는 요즘 사이트들에 자주 사용되는 섹션마다 스크롤이 내려가지는.. 효과인데 FullPage 사이트에 가면 설명이 잘 되어있어서 보면 확인할수 있다!

 

See the Pen FullPage by Mina (@Mina-ch) on CodePen.

 

 Scroll Trigger 

 

스크롤 트리거의 경우는 해당 사이트 를 이용하여 사용하려고 한다!

 

옵션 정보는 이 사이트를 사용하면 된다.

 

그리고 추가로 찾아본 예시 코드펜

 

See the Pen Reveal animations based on scroll direction - ScrollTrigger by GreenSock (@GreenSock) on CodePen.

 

typed.js 를 알게되어서 적용하려는데 이게 계속 vscode랑 코드펜을 봐도 처음에는 적용이되는데

시간이 지나면 타이핑되는 효과가 적용이 안되고 있어서.. 다시한번 확인해봐야겠다!!

 

이쪽이 일단 해뒀던 타이핑 효과! 아래는 참고했던 코드펜!

 

See the Pen Typed JS by EXM (@exm) on CodePen.

 

그리고  Scroll Custom 도 해보고싶어서 찾아봤다!

 

See the Pen Scrollbot v2 by Akshay (@akzhy) on CodePen.

 

 

나중에 좀 익숙해지고 하면 해보고싶은 디자인의 슬라이더형식의 포트폴리오..

지금은 지금꺼에도 정리가 안되어있어서 정리가되면 따로 한번 제작해보고싶다!

 

See the Pen Canvas image displacement - portfolio slider by Dan (@dtab428) on CodePen.

우선 지금은 시안잡고 이제 막 풀페이지를 적용해놓은 상태라서 앞으로 계속 작업하면서 블로그에 글 남길 생각이다!

 

앞으로도 파이팅 ... >.<