방금 회사 웹 사이트를 구축하고 전체 화면을 스크롤하여 공식 웹 사이트의 탐색 경험을 크게 향상 시켰습니다. FullPage.js를 사용하는 방법을 요약하겠습니다. 나를 교정하는 데 오신 것을 환영합니다
1. FullPage.js 소개
FullPage.js 는 브라우저의 전체 화면 스크롤을 구현하는 JS 플러그인 세트입니다. 많은 웹 사이트가 이제 더 나은 탐색 경험을 달성하기 위해이를 사용합니다.
달성 할 수있는 기능 :
• 앞뒤로 및 키보드 제어를 지원합니다
• 여러 콜백 기능
• 휴대폰 및 태블릿 터치 이벤트를 지원합니다
• CSS3 애니메이션을 지원합니다
• 지원 창 줌
• 윈도우가 확대 될 때 자동 조정
• 스크롤 너비, 배경색, 스크롤 속도, 루프 옵션, 콜백, 텍스트 정렬 등을 설정할 수 있습니다.
2. 플러그인 다운로드
npm | npm fullpage.js를 설치합니다
bower | bower 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를 소개 한 다음 풀 페이지를 소개해야합니다. Demo를 처음 작성하기 시작했을 때 주문 순서가 잘못되었고 FullPage.js의 브라우저 오류로 인해 효과가 달성되지 않았습니다. jQuery는 정의되지 않았습니다.
4. HTML 코드를 쓰십시오
<div id = "fullpage"> <div> 섹션 1 </div> <div> 섹션 2 </div> <div> 섹션 3 </div> <div> 섹션 4 </div> </div>
모든 콘텐츠는 DIV에 ID 이름 FullPage와 함께 포함되며 신체에 추가 할 수 없습니다.
클래스 이름이있는 div 요소는 단일 페이지입니다. 다른 페이지들 사이의 교체품은 마우스 휠과 키보드를 통해 제어 할 수 있으며 목록 탐색도 설정할 수 있습니다.
동시에, 페이지에서 수평 스크린 컷 효과를 만들려면 Div.section에 Div.Slide를 추가 할 수 있습니다. 코드는 다음과 같습니다.
<div> <div> 슬라이드 1 </div> <div> 슬라이드 2 </div> <div> 슬라이드 3 </div> <div> 슬라이드 4 </div> </div>
5. 풀 페이지를 초기화하십시오
$ (document) .ready (function () {$ ( '#fullPage'). FullPage ({..... // 자세한 내용은 https://github.com/alvarotrigo/fullpage.js/});});사이드 바 탐색 설정
이 탐색은 일반적으로 웹 사이트 디자인에서 사용할 수 있습니다. 풀 페이지의 기본 탐색 스타일은 작은 검은 색 도트이며 다른 스타일 설정을 지원합니다.
<ul id = "mymenu"> <li data-menuanchor = "firstPage"> <a href = "#firstPage"> 첫 번째 섹션 </a> </li> <li data-menuanchor = "sec 섹션 </a> </li> <li data-menuanchor = "FourthPage"> <a href = "#FourthPage"> 네 번째 섹션 </a> </li>
#mymenu {위치 : 고정; ...} $ ( '#fullPage'). FullPage ({앵커 : [ 'FirstPage', 'sec6. 문제가 발생하고 해결책
웹 사이트가 완료된 후 방금 페이지를 입력하고 FullPage.js 파일이 초기화되기 전에 DOM CSS가로드되었으며 표시된 모든 스타일 내용이 함께 압박되어로드 후 복원됩니다. 웹 사이트가 최적화되고 인터넷 속도가 매우 강력한 경우이 기간은 짧지 만 여전히 사용자 경험이 나빠질 것입니다.
따라서 다양한 솔루션을 시도하십시오.
1.div. 섹션
섹션 {오버플로 : 숨겨진}
테스트 후이 방법은 쓸모가 없습니다.
2. 빈 마스크를 설정하면 모든 페이지가 완료되기 전에 마스크 만 표시되고 테마 컨텐츠가 숨겨지고로드 후 컨텐츠 디스플레이 마스크가 제거됩니다. 물론 마스크 계층에서 웹 사이트 관련 컨텐츠를 설정할 수도 있습니다.
특정 구현 방법 데모 :
<html> <head> <meta http-equiv = "content-type"content = "text/html; charset = gb2312"> gb2312 "> title> <script language ="javaScript "type ="text/javascript "> 함수 showallContent (status1, status2) { document.getElementByIdx ( "showContent"). style.display = status1; document.getElementByIdx ( "showload"). style.display = status2; }. </div>
<Script> showAllContent ( "none", ""); </script>
</body>
</html>
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.