Fullpage.js 전체 화면 스크롤 플러그인 사용 예
- 高洛峰원래의
- 2017-01-11 09:35:341453검색
회사 웹사이트가 방금 완성되었습니다. 전체 화면 스크롤을 통해 공식 웹사이트의 탐색 경험이 크게 향상되었습니다. 그럼 fullpage.js를 활용하는 방법을 정리해보겠습니다. 수정 환영
1. fullpage.js 소개
fullpage.js는 전체 화면 스크롤을 구현하는 js 플러그인 세트입니다. 현재 많은 웹사이트에서 더 나은 브라우징 경험을 제공하기 위해 사용됩니다.
가능한 기능:
•앞으로, 뒤로 및 키보드 제어 지원
•다중 콜백 기능
•휴대폰 및 태블릿 터치 이벤트 지원
•CSS3 애니메이션 지원
•창 크기 조정 지원
•창 크기 조정 시 자동으로 조정
•스크롤 너비, 배경색, 스크롤 속도, 주기 옵션, 콜백, 텍스트 정렬 등을 설정할 수 있습니다.
2 .플러그인 다운로드
npm|npm install fullpage.js
bower|bower install fullpage.js
github|https://github.com/alvarotrigo/fullPage.js/
cdn|https://cdnjs.com/libraries/fullPage.js
3. 파일 도입 방법
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.fullPage.js"></script>
참고: 먼저 jquery를 소개한 다음 전체 페이지를 소개하세요. 처음 데모 작성을 시작했을 때 잘못된 순서로 인해 효과를 얻을 수 없었습니다. 브라우저에서 fullpage.js의 jquery가 정의되지 않았다는 오류를 보고했습니다.
4. HTML 코드 작성
<div id="fullpage">
<div class="section">section1</div>
<div class="section">section2</div>
<div class="section">section3</div>
<div class="section">section4</div>
</div>
모든 내용은 ID 이름이 fullpage인 div에 포함되어 있습니다.
클래스 이름이 .section인 div 요소는 단일 페이지입니다. 마우스 휠과 키보드를 통해 여러 페이지 간 교체를 제어할 수 있으며 목록 탐색을 설정할 수도 있습니다.
동시에 페이지 내에서 가로 화면 자르기 효과를 만들고 싶다면 div.slide를 div.section에 추가하면 됩니다. 코드는 다음과 같습니다.
<div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div>
5. 전체 페이지 초기화
$(document).ready(function() {
$('#fullpage').fullpage(
{
.......
//options 详情参看https://github.com/alvarotrigo/fullPage.js/
}
);
});
사이드바 탐색 설정
이 탐색은 웹사이트 디자인에서 일반적입니다. 전체 페이지의 기본 탐색 스타일은 작은 검은색 점입니다. 또한 다른 스타일 설정도 지원합니다.
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
#myMenu{
position:fixed;
...
}
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
6. 발생한 문제 및 해결 방법
홈페이지 사후 테스트 중 발견, 그냥 페이지에 들어가면 fullpage.js 파일이 초기화를 완료하기 전에 DOM CSS가 로드되고 표시되는 모든 스타일 콘텐츠가 함께 모여 로드 후에 복원됩니다. 웹사이트가 최적화되고 인터넷 속도가 빠르면 이 기간은 상대적으로 짧지만 여전히 나쁜 사용자 경험을 가져올 것입니다.
그래서 다양한 해결방법을 시도해보았습니다.
1.div.section
section{overflow:hidden}
테스트해본 결과 이 방법은 소용이 없었습니다.
2. 빈 마스크를 설정합니다. 모든 페이지가 완료되기 전에는 마스크만 표시됩니다. 로딩이 완료되면 컨텐츠 표시 마스크가 제거됩니다. 물론 마스크 레이어에 웹사이트 관련 콘텐츠를 설정할 수도 있습니다.
구체적인 구현 방법 데모:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function showAllContent(status1,status2){
document.getElementByIdx("showContent").style.display=status1;
document.getElementByIdx("showLoad").style.display=status2;
}
</script>
</head>
<body onLoad='showAllContent("","none")'>
<div id="showLoad" style="z-index:2; display:block; width:auto; height:auto;">页面加载中......</div>
<div id="showContent" style="z-index:1; ">
//最终要显示的内容<br></div><br><script>showAllContent("none","");</script><br></body><br></html>
위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 지원합니다.
fullpage.js 전체 화면 스크롤 플러그인 사용 예와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!