포트폴리오에 사용된 JS

포트폴리오를 준비하면서 벤치마킹을 열심히 하면서 괜찮은 JS 플러그인들이 많아서 소개하려합니다.

 

1. fullPage.js

첫번째로 소개해줄 플러그인은 첫번째 포트폴리오 기획했던 내용중

https://chpofo.tistory.com/40

1번인  "스크롤 한번 할 때마다 한 영역씩 이동" 이걸 할수 있는 플러그인입니다.

JS를 잘 하지 못하는 사람들은 이걸 사용하면 편하실텐데

저는 학원에서 배운 소스를 통해서 구현했습니다.

해당 부분또한 새로운 포스팅으로 누구나 할 수 있도록 정리해드릴께요 :)

 

fullPage js

alvarotrigo.com/fullPage/

fullPage scroll snapping. Create full screen pages fast and simple

해당 플러그인은 원래는 무료였지만 현재는 유료가 되었다고 하더라고

버전 2까지는 무료이라고 하니 버전2를 사용하시면 될거같아요

 

사용방법은 깃허브에 자세히 나와있으니 확인하시면 될거같아요

https://github.com/alvarotrigo/fullPage.js

alvarotrigo/fullPage.js

 

fullPage.js-2.9.7.zip

8.36MB

조만간 저의 소스도 공유해드릴께요^

 

 

2. Animate On Scroll Library

Animate On Scroll Library

michalsnik.github.io/aos/

AOS - Animate on scroll library

웹페이지를 스크롤 시 효과를 구현하려면 복잡하고 코드가 길어지는데

해당 라이브러리를 사용하게되면 복잡하고 긴 코드를 구현하지 않아도,

쉽게 웹 페이지스크롤효과를 구현해낼 수 있다.

 

해당 라이브러리는 저의 포트폴리오에도 사용된 아주 유용한 라이브러리입니다.

원래는 해당 부분도 학원에서 수업을 들었지만 하필 그 수업을 할때 학원을 결석하는 바람에...

이해하기가 어려워서 플러그인을 발견해서 해당 플러그인을 사용하게 되었습니다.

 

적용방법은 해당홈페이지 맨 하단 부분에 잘 나와있어요

다운을 받아서 연결하여도 되고, CDN 연결해서 사용할 수 있어요

편리하신 방법으로 연결을 하시면 될거같습니다.

 

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> 
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
	AOS.init(); 
</script>

 

위의 소스를 HTML상단에 추가를 하시면 바로 사용가능합니다.

또한 해당 홈페이지에 들어가게되면 효과들이 주르륵 나오는데 거기서 사용하고 하는 효과를

요소에 추가만 해주면 따라란!! 하고 등장하고 사라지는 효과를 볼수 있습니다.

 

<div data-aos="fade-down" data-aos-duration="1500"> 
  <div class="box"> 
    box1 
  </div> 
</div>

data-aos : 적용할 애니메이션 효과의 이름

data-aos-duration : 적용할 애니메이션의 지속시간(1초 = 1000ms)

 

3. particles.js

particles.js

vincentgarreau.com/particles.js/

particles.js - A lightweight JavaScript library for creating particles

이 플러그인은 저의 포트폴리오 메인화면에 넣고싶어서 찾아놓은 플러그인입니다.

해당 플러그인은 해당 홈페이지에 들어가서 마우스로 움직여보면 오...오..오... 하는 플러그인ㅋㅋ

 

오른쪽부분에서 커스텀이 가능하지만 커스텀을 하고 다운로드를 눌러도 처음소스로 다운로드가 되니

다운받아서 커스텀 한대로 소스를 수정하시면 될듯합니다.

 

소스 수정방법과 사용방법은 이 또한 깃허브에 잘 나와있으니 참고하시면 될거같아요

github.com/VincentGarreau/particles.js/

VincentGarreau/particles.js

포트폴리오 표지

저는 해당 플러그인의 모양을 별 모양으로 바꾸고 배경색과 별 색깔을 기획에서 말했던 색상으로 변경하여서 사용했어요~~

위에는 로그를 배치하여 포트폴리오 느낌으로다가 해봤는데 어떤가요?ㅎㅎ

 

 

 

저에게도 많은 도움이 되었던 플러그인이기에 여러분들에게도 소개하는 포스팅을 해보았습니다.

이런 플러그인들이 없어도 포트폴리오를 이쁘게 꾸미실 수있겠지만.. 저는 안돼서 플러그인의 힘을 빌려

포트폴리오를 만들어보려고 합니다^^

 

 

이렇게 소개하는 포스팅을 마치고

다음 포스팅은 첫번째 포트폴리오의 디자인과

실패아닌 실패를 한 이유를 하나하나 짚고 넘어가볼까합니다ㅎㅎ

 

 

도움이 될지는 모르겠지만 도움이 되기를 빌며 이번 포스팅을 마치도록 하겠습니다.

 

 

 

댓글과 하트는 저에게 많은 힘이 됩니다 :)