- 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.12.7/dist/gsap.min.js"></script>
<!-- 사용자정의 스크립트 코드 -->
<script src="myCustomCode.js"></script>
<script>
// Custom code using GSAP
</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>