집 >웹 프론트엔드 >JS 튜토리얼 >jquery_javascript 기술을 기반으로 전체 화면 스크롤 효과 구현

jquery_javascript 기술을 기반으로 전체 화면 스크롤 효과 구현

WBOY원래의: 2016-05-16 15:29:331421검색

그래서 오늘은 fullPage.js와 다른 이 fullPage를 소개하겠습니다. Fullpage는 IE6과의 하위 호환성이 더 뛰어나며 어떤 js 라이브러리에도 의존하지 않고 독립적으로 사용할 수 있습니다. 기능적으로는 fullPage.js만큼 강력하지는 않지만 일반적인 용도로는 충분하며, 특히 애니메이션 효과의 크기 조정과 회전을 자유롭게 설정하여 다양한 애니메이션 효과를 연출할 수 있습니다. 또한 fullPage.js에는 없는 가로 스크롤도 지원합니다.

데스크톱(ie5.5) 및 모바일 버전과 호환
개인 홈페이지나 웹 애플리케이션을 구축하는 데 사용할 수 있습니다
jQuery를 사용하지 않고 9KB 미만의 컴팩트한 프레임워크입니다

소개하기 전에 작업 렌더링을 살펴보겠습니다.

핵심 라이브러리를 소개합니다. 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 편지함과 유사한 전체 화면 스크롤 효과를 얻는 방법에 관한 것입니다. 자신의 웹사이트에 적합한 전체 화면 스크롤 효과를 만들 수 있기를 바랍니다.

성명：

이전 기사：Jquery_jquery에서 request, request.form 및 request.querystring의 차이점다음 기사：Jquery_jquery에서 request, request.form 및 request.querystring의 차이점

jquery_javascript 기술을 기반으로 전체 화면 스크롤 효과 구현

관련 기사