CSStransition 制作全屏页面滚动幻灯片

最近看到网上的一些页面效果，主要可以用于后续切换页面时使用，就自己动手制作一个

思路流程：

• css 设置类面设置transition transform：translateX（100%）属性设置DOM属性 动画效果
• 监听页面鼠标滑动事件，键盘点击事件，鼠标点击事件
• 浏览器兼容性测试，效果事件测试

css效果主要设置切换时，新增类名【active】设置移入移出时的transfrom 时X轴的移动距离，100% / -100%

.page.active {
  z-index: 5;
  transition: opacity .7s, z-index 0s .7s, -webkit-transform .7s;
  transition: transform .7s, opacity .7s, z-index 0s .7s;
  transition: transform .7s, opacity .7s, z-index 0s .7s, -webkit-transform .7s;
}

.page.active .half {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
  transition: -webkit-transform .7s ease-out;
  transition: transform .7s ease-out;
  transition: transform .7s ease-out, -webkit-transform .7s ease-out;
}

.page.previous {
  opacity: 0.4 !important;
  visibility: visible !important;
  transition: opacity .7s, z-index 0s, -webkit-transform .7s;
  transition: transform .7s, opacity .7s, z-index 0s;
  transition: transform .7s, opacity .7s, z-index 0s, -webkit-transform .7s;
}

.page.small {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
}

.page.small .half {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

.page:nth-child(2) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(2) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(3) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(3) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(4) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(4) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(5) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(5) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(6) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(6) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(7) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(7) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(8) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(8) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(9) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(9) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(10) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(10) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

jq 实现切换过程

 function pagination(page, movingUp) {
    scrolling = true;
    var diff = curPage - page,
        oldPage = curPage;
    curPage = page;
    $(".page").removeClass("active small previous");
    $(".page-" + page).addClass("active");
    $(".nav-btn").removeClass("active");
    $(".nav-page" + page).addClass("active");
    if (page > 1) {
      $(".page-" + (page - 1)).addClass("previous");
      if (movingUp) {
        $(".page-" + (page - 1)).hide();
        var hackPage = page;
        setTimeout(function() {
          $(".page-" + (hackPage - 1)).show();
        }, 600);
      }
      while (--page) {
        $(".page-" + page).addClass("small");
      }
    }
    console.log(diff)
    if (diff > 1) {
      for (var j = page + 1; j < oldPage; j++) {
        $(".page-" + j + " .half").css("transition", "transform .7s ease-out");
      }
    }
    setTimeout(function() {
      scrolling = false;
      $(".page .half").attr("style", "");
      $(".page")
    }, 700);
  }
  
  
   function navigateUp() {
    if (curPage > 1) {
      curPage--;
      pagination(curPage, true);
    }
  }

  function navigateDown() {
    if (curPage < pages) {
      curPage++;
      pagination(curPage);
    }
  }

监听页面的点击事件，鼠标滚动事件，键盘点击事件
【注：取消默认属性】

  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (!scrolling) {
      if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        navigateUp();
      } else { 
        navigateDown();
      }
    }
  });
  
  $(document).on("click", ".scroll-btn", function() {
    if (scrolling) return;
    if ($(this).hasClass("up")) {
      navigateUp();
    } else {
      navigateDown();
    }
  });
  
  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });
  
  $(document).on("click", ".nav-btn:not(.active)", function() {
    if (scrolling) return;
    pagination(+$(this).attr("data-target"));
  });

测试：
在鼠标键盘切换，点击切换过程中未发现切换不流畅的事件发生，但是因使用绝对定位的原因，未适配手机端，

总结：动画效果实现主要采用了css transfrom 实现，并且使用监听jqDOM属性的改变，实现动画效果切换，手机端须在最外的DOM层设置相对定位，保证适配手机端

github地址：https://github.com/panpanxiong3/Front-end-effect-link/tree/master/js/全屏页面滚动幻灯片背景切换