그래서 오늘은 fullPage.js와 다른 이 fullPage를 소개하겠습니다. Fullpage는 IE6과의 하위 호환성이 더 뛰어나며 어떤 js 라이브러리에도 의존하지 않고 독립적으로 사용할 수 있습니다. 기능적으로는 fullPage.js만큼 강력하지는 않지만 일반적인 용도로는 충분하며, 특히 애니메이션 효과의 크기 조정과 회전을 자유롭게 설정하여 다양한 애니메이션 효과를 연출할 수 있습니다. 또한 fullPage.js에는 없는 가로 스크롤도 지원합니다.
소개하기 전에 작업 렌더링을 살펴보겠습니다.
핵심 라이브러리를 소개합니다. pagefull은 JS 라이브러리에 따라 다르므로 자체적으로만 소개하면 됩니다.
<script src="js/fullPage.min.js"></script>
html 쓰기
//请在head区加入以下代码,移动端使用 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <!--[if lte IE 7]> <body scroll="no"> <![endif]--> <!--[if gt IE 7]><!--> <body> <!--<![endif]--> <div id="pageContain"> <div class="page page1 current"> <div class="contain"> </div> </div> <div class="page page2"> <div class="contain"> </div> </div> <div class="page page3" data-step="4"> <div class="contain"> <p class="demo-data-step">data-step可以让你在不切屏的情况下更换动画</p> </div> </div> <div class="page page4"> <div class="contain"> </div> </div> <div class="page page5"> <div class="contain"> </div> </div> <div class="page page6"> <div class="contain"> </div> </div> </div> <ul id="navBar"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body>
CSS 작성 CSS3에 익숙하지 않은 친구들은 돌아가서 보충해 주세요. 여기서는 CSS를 자유롭게 정의할 수 있습니다. 프로젝트의 요구 사항.
html { -ms-touch-action: none; /* 阻止windows Phone 的默认触摸事件 */ } body, div, p { margin: 0; padding: 0; } ul { list-style: none; } body { width: 100%; *cursor: default; overflow: hidden; font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial; } #pageContain { overflow: hidden; } .page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0; } .current .contain,.slide .contain { display: block; } .current { display: block; z-index: 1; } .slide { display: block; z-index: 2; } .swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important; } .page1 { background: #37c1e3; } .page2 { background: #009922; } .page3 { background: #992211; } .page4 { background: #ff00ff; } .page5 { background: #00ff00; } .page6 { background: #22ffff; } #navBar { z-index: 3; position: absolute; top: 10%; right: 3%; } #navBar .active { background: #ccc; } #navBar li { cursor: pointer; margin-bottom: 10px; transition: all .7s ease; border-radius: 50%; line-height: 40px; text-align: center; width: 40px; height: 40px; } p { width: 200px; height: 100px; color:#fff; text-align: center; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px; opacity: 1; transition: all .8s ease; transform-origin: 50% 50%; } .step1 p { transform: translate(0, -50px); -webkit-transform: translate(0, -50px); } .step2 p { opacity: 0; transform: scale(2); -webkit-transform: scale(2); } .step3 p { transform: scale(1); -webkit-transform: scale(1) opacity: 1; } .step4 p { -webkit-transform: rotate(360deg) translate(0,-200px) scale(.3); transform: rotate(360deg) translate(0,-200px) scale(.3); opacity: 0; }
JS를 작성하여 효과를 얻으세요
var runPage; runPage = new FullPage({ id : 'pageContain', // 容器id slideTime : 800, // 每页切换时间,单位为毫秒 continuous : false, // 是否循环(即能从最后页跳到第一页面) effect : { // 滚动效果 transform : { translate : 'Y', // 'X'|'Y'|'XY'|'none' X轴|Y轴|XY轴|无 scale : [.1, 1], // [scalefrom, scaleto] [起始缩放比例, 结束时缩放比例] rotate : [0, 0] // [rotatefrom, rotateto] [起始旋转角度, 结束时旋转角度] }, opacity : [0, 1] // [opacityfrom, opacityto][起始透明度, 结束时透明度] }, mode : 'wheel,touch,nav:navBar', // 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id' easing : 'ease' // easing('ease','ease-in','ease-in-out' 或使用贝塞尔曲线 [.33, 1.81, 1, 1]; // ,onSwipeStart : function(index, thisPage) { // 触摸开始时的回调函数 // return 'stop'; // } // ,beforeChange : function(index, thisPage) { // 滑动开始时的回调函数 // return 'stop'; // } // ,callback : function(index, thisPage) { // 滑动结束后的回调函数 // alert(index); // }; });
세부 매개변수 설정
id String – 외부 패키지 ID
slideTime 정수(기본값:800) – 페이지 전환 시간(밀리초)
효과 객체(기본값:{}) – 효과 매개변수
모드 문자열(기본값:'') - 변환 모드 'wheel,touch,nav:navBar'는 'wheel, touch, navbar:navbarid'를 의미합니다
콜백 함수 – 슬라이딩 종료 후 콜백 함수
인터페이스
전체 페이지는 개발자가 이 플러그인을 사용하여 호출할 수 있는 몇 가지 변명도 제공합니다.
prev() 이전 페이지로 바로 슬라이드
next() 다음 페이지로 바로 슬라이드
thisPage() 현재 페이지 번호를 반환합니다
go(num) 페이지 번호로 바로 슬라이드
위 내용은 NetEase 편지함과 유사한 전체 화면 스크롤 효과를 얻는 방법에 관한 것입니다. 자신의 웹사이트에 적합한 전체 화면 스크롤 효과를 만들 수 있기를 바랍니다.