原生js實現全屏滾動--fullPage

時間 2019-12-14

原文原文鏈接

原生js實現全屏滾動

fullPage.js

function fullPage() {
      const fullPage = document.getElementsByClassName("full_page")[0];
      const fullPageItems = fullPage.getElementsByClassName("full_page_item");
      const sliderTab = document.getElementsByClassName("slider_tab")[0];
      const sliderTabItems = document.getElementsByTagName("li");
      const sliderTabDivs = document.getElementsByClassName("small_tab");
      const sliderTabImgs = sliderTab.getElementsByTagName("img");
      const nextPage = document.getElementsByClassName("next_page")[0];
      
      let pageIndex = 0, pageScroll = true, prevIndex = 0;
      
      document.onmousewheel = mouseWheel;
      document.addEventListener("DOMMouseScroll", mouseWheel)
    
      // 點擊箭頭，實現下一頁
      nextPage.onclick = scrollDown
    
      sliderTabClick()
    
      // 滾輪事件
      function mouseWheel(e) {
        if(e.wheelDelta) {
          if(e.wheelDelta > 0) {
            scrollUp()
          } else {
            scrollDown()
          }
        } else {
          if(e.detail > 0) {
            scrollDown()
          } else {
            scrollUp()
          }
        }
      }
    
      // 上滑
      function scrollUp() {
        if(pageIndex > 0 && pageScroll) {
          prevIndex = pageIndex;
          pageIndex --;
          srcollToPage(pageIndex, prevIndex)
        } else if(pageIndex <= 0) {
          pageIndex = 0
        }
      }
    
      // 下滑
      function scrollDown() {
        if(pageIndex < fullPageItems.length - 1 && pageScroll) {
          prevIndex = pageIndex;
          pageIndex ++;
          srcollToPage(pageIndex, prevIndex)
        } else if(pageIndex >= fullPageItems.length - 1) {
          pageIndex = fullPageItems.length - 1
        }
      }
    
      // 滾動到對應頁
      function srcollToPage(pageIndex, prevIndex) {
        fullPage.style.top = - pageIndex * 100 + "%";
        fullPage.style.transition = `all ease-in ${(Math.abs(pageIndex - prevIndex) - 1)/2 + .3}s`
        sliderTabSelect(pageIndex)
        pageScroll = false
        scrollTimer()
        if(pageIndex == sliderTabItems.length -1) {
          nextPage.style.opacity = "0"
        } else {
          nextPage.style.opacity = "1"
        }
      }
    
      // 定時器 解決函數連續執行
      function scrollTimer() {
        setTimeout(function() {
          pageScroll = true
        }, 500)
      }
    
      // 頁面滾動，導航對應變化
      function sliderTabSelect(index) {
        for(let i = 0; i < sliderTabDivs.length; i ++) {
          sliderTabDivs[i].classList.remove("active");
          sliderTabImgs[i].classList.remove("select");
        }
        sliderTabDivs[index].classList.add("active");
        sliderTabImgs[index].classList.add("select")
      }
    
      // 點擊導航，頁面滾動
      function sliderTabClick() {
        for(let i = 0; i < sliderTabItems.length; i ++) {
          sliderTabItems[i].onclick = function () {
            if(i > pageIndex) {
              fullPage.style.top = - (i - 1) * 100 + "%";
            } else {
              fullPage.style.top = - (i + 1) * 100 + "%";
            }
            srcollToPage(i, pageIndex)
            pageIndex = i
          }
        }
      }
    }

html部分--index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="../common/reset.css">
      <link rel="stylesheet" href="css/index.css">
      <title>全屏滾動</title>
    </head>
    <body>
      <div class="container">
        <div class="full_page">
          <div class="full_page_item home">
            第1頁
          </div>
          <div class="full_page_item info">
            第2頁
          </div>
          <div class="full_page_item skill">
            第3頁
          </div>
          <div class="full_page_item project">
            第4頁
          </div>
          <div class="full_page_item contact">
            第5頁
          </div>
        </div>
        <ul class="slider_tab">
          <li>
            <div class="small_tab active">
              <img class="select" src="img/icons/home.png" alt="" />
            </div>
          </li>
          <li>
            <div class="small_tab">
              <img src="img/icons/person.png" alt="" />
            </div>
          </li>
          <li>
            <div class="small_tab">
              <img src="img/icons/skill.png" alt="" />
            </div>
          </li>
          <li>
            <div class="small_tab">
              <img src="img/icons/project.png" alt="" />
            </div>
          </li>
          <li>
            <div class="small_tab">
              <img src="img/icons/pen.png" alt="" />
            </div>
          </li>
        </ul>
        <div class="next_page">
          <img src="img/icons/arrow_down.png" alt="下三角" srcset="">
        </div>
      </div>
      <script src="js/fullPage.js"></script>
      <script src="js/index.js"></script>
    </body>
    </html>

css部分--index.css

/* 容器 */
    .container {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }
    
    /* 全屏滾動容器 */
    .full_page {
      width: 100%;
      height: 500%;
      /* overflow: hidden; */
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .full_page_item {
      width: 100%;
      height: 20%;
      position: relative;
    }
    
    .home {
      background: url(../img/bg.png) #87b0a5;
    }
    
    .info {
      background: url(../img/bg.png) #109085;
    }
    
    .skill {
      background: url(../img/bg.png) #a29971;
    }
    
    .project {
      background: url(../img/bg.png) #788990;
    }
    
    .contact {
      background: url(../img/bg.png) #999;
    }
   
    /* 全屏滾動tab */
    .slider_tab {
      position: fixed;
      top: 50%;
      right: 30px;
      margin-top: -150px;
    }
    
    .slider_tab li {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .slider_tab li div {
      width: 15px;
      height: 15px;
      background: #f0f0f0;
      border-radius: 50%;
    }
    
    .slider_tab li div.active {
      width: 50px;
      height: 50px;
      background: #666;
      transition: all .3s;
    }
    
    .slider_tab li div img {
      width: 60%;
      height: 60%;
      padding-top: 20%;
      padding-left: 20%;
      display: none;
    }
    
    .slider_tab li div img.select {
      display: block;
    }
    
    /* 下一頁 */
    .next_page {
      width: 30px;
      height: 30px;
      position: fixed;
      left: 50%;
      margin-left: -15px;
      cursor: pointer;
      animation:jump .8s infinite;
      -moz-animation:jump .8s infinite; /* Firefox */
      -webkit-animation:jump .8s infinite; /* Safari and Chrome */
      -o-animation:jump .8s infinite; /* Opera */
    }
    
    .next_page img { 
      width: 100%;
    }
    
    @keyframes jump
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-moz-keyframes jump /* Firefox */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-webkit-keyframes jump /* Safari 和 Chrome */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-o-keyframes jump /* Opera */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }

js部分--index.js

window.onload = function() {
      fullPage()
    }

圖片

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。