標籤彙整:Animation

JavaScript 螢幕高度觸發動畫 scrollTop

目的

網頁滑到中間,觸發動畫

解説

  • document.body.scrollTop:偵測現在在的位置離網頁頂端的距離
  • window.innerHeight:螢幕畫面高度
  • 把動畫的CSS寫成別的class,不要直接寫在元素上
  • 頂端距離條件完成後,加上動畫CSS,達成觸發動畫效果

範例

滑到第2頁觸發動畫

.page1
.page2
 #box
*
 box-sizing: border-box
 //border: 1px solid #000

html,body
 margin: 0
 padding: 0

.page1,.page2
 width: 100vw
 height: 100vh
 background: linear-gradient(#99E1D9 50%, #F0F7F4 50%)
 background-size: 2%
 text-align: center
 
#box
 width: 100px
 height: 100px
 background-color: darken(#99E1D9, 15%)
 border-radius: 100%
 margin-right: auto
 margin-left: auto
 position: relative
 opacity: 0
 top: 40vh
 animation-fill-mode: both
 
//動畫class分開寫
.fadeIn
 animation: fadeIn 3s
 
@keyframes fadeIn
 0%
  opacity: 0
 100%
  opacity: 1
//不能用document.body.addEventListener
//因為不是拖動body
//而是拖動整個頁面document
document.addEventListener("scroll",

  function(){

   if(document.body.scrollTop>window.innerHeight*0.5){
    //class添加不能使用className+=
    //要用效能更高的classList.add()
    document.querySelector("#box").classList.add("fadeIn");
   }  
  }
 );

Display

補充:scrollBottom方法

沒有 scrollBottom ,但是可以自己算

//body長度 - scrollTop
//現在位置離底部距離
document.body.clientHeight-document.body.scrollTop

更新:document.body.scrollTop永遠是0

某些webkit結構的瀏覽器的scrollTop不是在document.body裡面,而是在document.documentElement裡面。

【解決方法】

document.body.scrollTop→替換成:document.documentElement.scrollTop

SVG 動畫

animate

svg#pic1(viewbox="-50 -50 100 100")
 
 line(x1=-20, y1=0, x2=20, y2=0)
 line(x1=0, y1=-20, x2=0, y2=20)
 circle(cx=0,cy=0,r=10)
 //attributeName="要動的地方"
 //dur="秒數"
 //values="影格"
 //repeatCount="重複次數,indefinite重複無限"
   animate(attributeName="r" dur="2s" values="10;30;10" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px
 
#pic1
 stroke: black
 stroke-width: 3px
 & circle
  fill: white

Display

animateTransform & group

svg#pic2(viewbox="-50 -50 100 100")
 circle(cx=0, cy=0, r=10)
 //group: g,Jade内子元素要縮排。animate要放在g内層
 g
  line(x1=-20, y1=0, x2=20, y2=0)
  line(x1=0, y1=-20, x2=0, y2=20)
  rect(x=-20, y=-20, width=40, height=40)
  //attributeName="transform"
     //type="scale or rotate ..."
     //dur="秒數"
     //values="影格"
  //repeatCount="重複次數,indefinite重複無限"
  animateTransform(attributeName="transform" type="rotate" dur="2s" values="0;360" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px
 
#pic2
 stroke: black
 stroke-width: 3px

 & circle
  fill: white

 & rect
  fill: none

Display

begin:指定開始時間,産生錯落效果

//begin: 開始秒數,也可以指定負數,這樣開始時就可以直接動
svg#pic4(viewbox="0 0 200 200")
 rect(x=0, y=0, width=20, height=100)
  animate(attributeName="height" begin="0s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=30, y=0, width=20, height=120)
  animate(attributeName="height" begin="-0.3s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=60, y=0, width=20, height=140)
  animate(attributeName="height" begin="-0.6s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=90, y=0, width=20, height=160)
  animate(attributeName="height" begin="-0.9s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=120, y=0, width=20, height=120)
  animate(attributeName="height" begin="-1.2s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=150, y=0, width=20, height=80)
  animate(attributeName="height" begin="-1.5s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=180, y=0, width=20, height=60)
  animate(attributeName="height" begin="-1.8s" dur="2s" values="100;200;100" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px

Display

CSS Animation

解説

  1. @keyframes 指定動畫名稱
    0%
    位置
    100%
    位置
  2. 要動的元素增加一行
    animation:  動畫名稱  秒數  次數

範例

.box
 .block 上下移動
.box
 width: 350px
 height: 300px
 border: solid 1px
 position: relative
 
.block
 width: 50px
 height: 50px
 border: solid 1px
 position: absolute
 bottom: 0px
 left: 150px
 animation: ani1 2s infinite
 
@keyframes ani1
 0%
   bottom: 250px
 50%
   bottom: 0px
 100%
   bottom: 250px

Display

上下移動

transition-delay

意義

變化延遲某指定秒數

範例

.block
  h5 請點選
  h1 標題
  p 内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文
.block
  border: solid 2px
  width: 300px
  height: 300px
  padding: 20px
  font-family: 微軟正黑體
  &:hover
    & h1,& p
      opacity: 1 
  & h1,& p
    opacity: 0
    transition-duration: 0.5s
  & p
    transition-delay: 0.5s

Dsiplay

請點選

標題

内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内

hover & active

定義

hover:游標移過
active:游標點擊時

hover

.block 請點擊
.block
 width: 100px
 height: 100px
 border: solid 1px

.block:hover
 background-color: #283618

Display

請點擊

active

.block 請點擊
.block
 width: 100px
 height: 100px
 border: solid 1px

.block:active
 background-color: #F0F3BD

Display

請點擊

進階:操控内部元素

.block1 請點擊
 .block2
 .block3
.block1
 width: 100px
 height: 100px
 border: solid 1px

.block2,.block3
 width: 20px
 height: 20px
 border: solid 1px

.block1:hover 
 .block2
  background-color: #04A777
  width: 80px

.block1:active
 background-color: #05668D

Display

請點擊

進階:延緩變化

.block1 請點擊
 .block2
 .block3
.block1
 width: 100px
 height: 100px
 border: solid 1px

.block2,.block3
 width: 20px
 height: 20px
 border: solid 1px

.block1:hover 
 .block2
  background-color: #04A777
  width: 80px
  transition-duration: 1s


.block1:active
 background-color: #05668D
 transition-duration: 1s

Display

請點擊