菜菜菜的前端學習日誌 - Day27

動畫特效

昨天用了一些簡單的語法做了一個待辦事項清單(To Do List)

而 jQuery 因為能夠很容易地去操作 Dom 所以許多開發者經常使用來製作特效或動畫效果

下面這效果是，隨著卷軸滾動會判斷元素到達特定位置時會展開及收合

並且在展開時會有彈一下的效果

我們就來實做一下類似上面這個效果好了

實作

首先先將 Html 元素建構起來

<div class="content">      //實際上建立很多content，但是就不列出來啦，太長了
Hello My name is Andy!!
</div>

再來就美化它一下

.content{
  width: 200px;
  height: 30px;
  background-color: #3399ff;
  margin: 20px 0px;
  padding: 5px 10px;
  border-radius: 10px;
}

目前看起來會是這樣

再來因為會使用到捲軸事件，所以先來測試一下捲軸事件吧

因為是 .container 這個 Div 有捲軸所以對這個 Div 加上捲軸事件

$(".container").scroll(function(){
  console.log('haha')
});

就來看看有沒有成功的觸發事件呢

好的這樣子看來我們是有成功觸發事件的

接下來就來取得每一個 Dom 的位置

$(window).scroll(function(){
  $(".content").each(function(){
    var dom = $(this);                    
    var boxHeight = $(window).height();
    console.log(boxHeight);               //取得容器高度
    var boxScrollTop = $(window).scrollTop();
    console.log(boxScrollTop);            //取得容器捲軸的位移
    var domPosition = dom.offset().top - boxScrollTop;
    console.log(domPosition);             //取得元素的位置
  });
});

這樣子我們就取得每個元素的位置了

接下來就是判斷每個元素在可視區時展開，移出可視區就收合

因為要讓他有彈一下的感覺

我們先在 .content 內加上之前講過的 transition 屬性

因為要收合效果就針對 transform 做效果

.content{
  width: 200px;
  height: 30px;
  background-color: #3399ff;
  margin: 20px 0px;
  padding: 5px 10px;
  border-radius: 10px;
  transition: transform .2s;   //收合跟展開效果不一樣所以其他的用js加進去
}

再來就是判斷式了，最下面再加上這判斷式

     在可視區的最頂點       因為位置判斷是以頂端來判斷所以再減去一個元素的高度
if(domPosition < 0 || domPosition > (windowHeight - 30)){
  dom.css({"transform" : "scaleX(0)", "transition-timing-function" : "linear"});
}else{
  dom.css({"transform":"scaleX(1)", "transition-timing-function":"cubic-bezier(.62,1.93,.59,.66)"});
}

效果就會是像下面這樣

可能有人會說上面那個例子收合跟展開不是從中間，而是從左邊或右邊欸

因為我們沒有設置 transform 變形的起始點

所以我們只要再加上下面這行就好拉

  transform-origin: left;

成果就會是這樣囉