■ Fullpage-js
Fullpage.js는 웹 페이지에서 전체 화면 스크롤링 효과를 구현할 수 있는 JavaScript 라이브러리
웹 페이지를 여러 섹션으로 나누어 각 섹션을 스크롤링으로 전환할 수 있다.
이를 통해 사용자는 웹 페이지를 일반적인 방법보다 더 직관적으로 탐색할 수 있으며,
웹 페이지의 시각적 효과를 높일수 있음.
■ Fullpage 적용
○ CDN적용
- CDN 개념
Content delivery Network 콘텐츠 전송 네트워크
서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용
- 링크 가져오기
fullpage cdn
https://cdnjs.com/libraries/fullPage.js
- CSS, JS 링크
<head>
<!-- Fullpage CSS 코드-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.29/fullpage.css">
<!-- Fullpage에 필요한 스크립트 코드 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.29/fullpage.js"></script>
</head>
○ Fullpage 적용
- HTML
전체 페이지명(id = "fullpage")을 명확하게 해야 함. Script에서 설정과 동일
class로 해도 상관은 없음
내부 박스명 클래스 section으로 설정 (기본값)
각 section에서 내부 슬라이드 slide로 설정 (기본값)
<div id="fullpage">
<div class="section">
<h1>fullPage.js</h1>
</div>
<div class="section">
<div class="slide"><h1>Section 2</h1></div>
<div class="slide"><h1>Slide 2.2</h1></div>
<div class="slide"><h1>Slide 2.3</h1></div>
</div>
<div class="section" id="section2">
<h1>Section3</h1>
</div>
<div class="section">
<h1>Section4</h1>
</div>
</div>
- Css 구성
h1{
font-size: 6em;
text-align: center;
}
.section{ /* 배경색 */
background-color: aquamarine;
}
#section2{ /* 특정 section 배경색 */
background-color: salmon;
}
- Sctipt 구성
변수에 넣어서 사용(각각 통제하고자)
myFullpage == 변수명 다르게 해도 됨
new fullpage 대소문자 구분
#fullpage 페이지를 감싸는 박스의 클래스 또는 아이디명 동일 (# : 아이디, . : 클래스)
let myFullpage = new fullpage("#fullpage", {
});
■ Fullpage 간단한 옵션
○ Section 설정
sectionSelector : ".section"
section명을 적어주면됨. 변경되면 그에 맞게 class 지정
let myFullpage = new fullpage("#fullpage", {
sectionSelector: '.section'
});
○ navigation 설정
우측에 navigation 설정
let myFullpage = new fullpage("#fullpage", {
navigation: true,
});
navigtion 설정 변경
let myFullpage = new fullpage("#fullpage", {
navigation: true,
navigationPosition: 'left', //위치
navigationTooltips: ['1번', '2번', '3번', '4번'], // 각 점에 툴팁 추가
showActiveTooltip: true, // 활성화된 툴팁 표시
});
navigtion 색 변경
/* 네비 색변경 */
#fp-nav ul li a span{
background-color: blueviolet;
}
/* 네비 활성화 색변경 */
#fp-nav ul li a.active span{
background-color: blue;
}
/* 네비 툴팁 변경 */
#fp-nav ul li .fp-tooltip{
color: black;
font-weight: 900;
}
○ scrllingSpeed 설정
스크롤할때 animation 속도 설정
let myFullpage = new fullpage("#fullpage", {
scrollingSpeed: 3000, //3초
});
○ 클릭 메뉴 설정
- Html
<ul id="menu">
<li data-menuanchor="1"><a href="#1">slide1</a></li>
<li data-menuanchor="2"><a href="#2">slide2</a></li>
<li data-menuanchor="3"><a href="#3">slide3</a></li>
<li data-menuanchor="4"><a href="#4">slide4</a></li>
</ul>
- Css
#menu {
position: fixed;
top: 0;
left: 0;
z-index: 70;
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
margin: 10px;
color: #000;
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
#menu li:hover {
background: rgba(255, 255, 255, 0.8);
}
#menu li.active,
#menu li.active:hover {
background: rgba(0, 0, 0, 0.5);
}
#menu li a {
text-decoration: none;
color: #000;
padding: 9px 18px;
display: block;
}
#menu li.active a,
#menu li.active:hover a:hover {
color: #fff;
}
-script
let myFullpage = new fullpage("#fullpage", {
menu: "#menu",
anchors: ["1","2","3","4"],
});
○ 버튼형 슬라이드
- Html
<div id="fullpage">
<div class="section">
<h1>fullPage.js</h1>
</div>
<div class="section" id="s2">
<div class="slide"><h1>Section 2</h1></div>
<div class="slide"><h1>Slide 2.2</h1></div>
<div class="slide"><h1>Slide 2.3</h1></div>
</div>
<div class="section" id="s3">
<h1>Section3</h1>
</div>
<div class="section">
<h1>Section4</h1>
</div>
</div>
- Css
h1{
font-size: 6em;
text-align: center;
}
.section{
background-color: aquamarine;
}
#s2{ /* 스판 가운데로 */
text-align: center;
}
#s3{
background-color: salmon;
}
#fp-nav ul li a span, /*색 변경 */
.fp-slidesNav ul li a span {
background: blue;
}
-Script
let myFullpage = new fullpage("#fullpage", {
slidesNavigation: true, //일반
controlArrows: false, //화살표
});'HTML + CSS > Javascript' 카테고리의 다른 글
| Js - GSAP (0) | 2024.10.10 |
|---|---|
| Js - Swiper (1) | 2024.10.07 |
| Java Script 기초 (2) | 2024.09.09 |