今天來介紹一下往下滑和往上滑的指引動畫和搭配Web API。
現在都很流行第一屏設計做好做滿，
有時候太美了會讓使用者忘記（/根本不想）往下滑，

適當地指引下滑，就是個滿重要的動作，
尤其是當你想讓他看下面的資訊的時候。

而回到最上面，這個使用情境我本人就不是很常用了，
有使用習慣的可以幫我留個言?

先看成果：

這邊主要就是使用Web API: scrollTo & scrollBy

scrollTo: 就是往下滑到指定的位置，
scrollBy: 是指現在的位置再加上指定的距離，

再加上參數：behavior: 'smooth'
讓滑動可以很順暢地溜～上去

mouse.addEventListener('click',function(){
  window.scrollBy({
    top: window.innerHeight,
    behavior: 'smooth'
  });
})

toTop.addEventListener('click',function(){
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
})

而滑鼠的動態部分，是用CSS做的，
自己覺得滿可愛的

@keyframes mouse{
  0%, 50%{
    transform: translate(-50%, 0);
    top: 10%;
    opacity: 1;
  }
  80%, 100%{
    transform: translate(-50%, 0) scale(0.5);
    top: 40%;
    opacity: 0;
  }
}

全部的code

直接看code吧！

//html
<section>
  <div class="mouse"></div>
</section>
<section>
    <div class="to-top"></div>
</section>

//SCSS

section{
  width: 100%;
  height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.mouse{
  cursor: pointer;
  width: 30px;
  height: 50px;
  border-radius: 20px;
  border: 2px solid white;
  position: relative;
  margin-bottom: 60px;
  
  &:before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    left: 50%;
    top: 10%;
    transform: translate(-50%, 0);
    animation: mouse 3s infinite ; 
  }
}

@keyframes mouse{
  0%, 50%{
    transform: translate(-50%, 0);
    top: 10%;
    opacity: 1;
  }
  80%, 100%{
    transform: translate(-50%, 0) scale(0.5);
    top: 40%;
    opacity: 0;
  }
}

.to-top{
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid white;
  position: relative;
  margin-bottom: 100px;
  &:before{
    content:'';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(-45deg) translate(-70%, 0);
    top: 20%;
    left: 50%;
    animation: toTop 2s infinite ease-in;
  }
}

@keyframes toTop{
  0%, 30%{
    top: 20%;
    opacity: 1;
  }
  80%{
    top: 5%;
    opacity: 0.3;
  }
  90%,100%{
    top: 0%;
    opacity: 0;
  }
}

//JS
const mouse = document.querySelector('.mouse');
const toTop = document.querySelector('.to-top');

mouse.addEventListener('click',function(){
  window.scrollBy({
    top: window.innerHeight,
    behavior: 'smooth'
  });
})

toTop.addEventListener('click',function(){
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
})

以上！

今天的code在這裡
code還有明天會談談的進場特效～
之後要做往下滑和往上滑就回來偷code就好！?

有任何錯誤想法歡迎批評指教！