![[웹코딩 가이드] 홈](./_img/sparrow-sqr.svg "[웹코딩 가이드] 홈으로 돌아가기"){kind=small}
- Fancy 내비게이션바
- z-Animation은 이 강좌 사이트 전반에 걸쳐 적용되고 있는 애니메이션 플러그인으로서, 스크립트 소스는 </body> 앞과 사용자지정 GSAP 코드 앞에 넣어준다:
- 1. 내비게이션바 작성 및 배치:
-
2.
내비게이션바 색상은
Css변수를 사용하여 사용자 지정해줄 수 있다: - 3. 모바일/탭 장치에서 스크롤 시 배경 페이드인 효과를 준다:
<body>
<div className="animateMe"></div>
<h1>Hello GSAP!</h1>
..
<!-- GSAP 스크립트 소스 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<!-- 사용자정의 스크립트 코드 -->
<script src="./myCustomCode.js"></script>
<script>
// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(Flip) // 다른 플러그인들도 각각 같은 플러그인 이름으로 넣어주면 됩니다!
// gsap code here!
});
</script>
</body>
--bs-fancynav-togglerbar-bg: #ffffff;
--bs-fancynav-collapse-bg: #ffffff;
--bs-fancynav-link-color: #000000;
☞
✓ 그외에도 GSAP에는 다양한 플러그인이 포함되어 있는데, 필요하면; 예제 샘플들을 살펴보십시오..
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<!-- 각 플러그인 스크립트 소스 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Flip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollToPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Draggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Observer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/MotionPathPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/EaselPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/PixiPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/TextPlugin.min.js"></script>
<script>
// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(Flip) // 다른 플러그인들도 각각 같은 플러그인 이름으로 넣어주면 됩니다!
..
// gsap code here!
});
</script>
- 사용자정의 z-Animation 설정
-
애니메이션의 트리거에는
data-zanim-trigger= 'scroll'속성이 사용되는데, 이는 대상 DOM 요소가 뷰포트에 있는지 여부를 확인하여 요소가 돔에 있으면 애니메이션을 트리거한다: -
slide-down등 js/custom/zanimation.js 파일의 변수에 미리 정의된 애니메이션을 사용할 수도 있는데, 미리 정의된 변수들에는 다음과 같은 것들이 있다:default,slide-down,slide-left/right,zoom-in/out,zoom-out-slide-right/left,blur-in -
다른 애니메이션 요소 내의 요소에 애니메이션을 적용하려면;
부모 요소에서
data-zanim-timeline과data-zanim-trigger= 'scroll'을 사용한다: - GreenSock 설정과 함께 Css 속성을 사용하여 요소에 애니메이션을 적용할 수 있다:
-
애니메이션을 반응형으로 만들기 위해 Bootstrap의 반응형 중단점을 써서
data-zanim-{size}속성을 사용한다:
