2017-05-02 框架實戰 學習筆記

weixin_33670713發表於2017-05-02
框架筆記

框架實戰主要學習內容

  • animate.css 框架

  • wow.js 框架

  • scrollReveal.js 框架

  • BootStrap 框架

  • BootStrap 為學習重點

animate.css 框架

  • 通過新增類名操作標籤
    特點：簡單實用，新增的類名必須第一個類名為 "animated"，後面接所需特效的關鍵字名，動畫特效只能執行一次
<div class = 'animated bounce'>
</div>
  • 一些常用的特效（flash\bounce\fade）
  • 重新整理頁面的方法
window.location.reload();
  • 因為這個框架的動畫只能執行一次，所以在當次動畫執行之後進行回撥或者啟動定時器進行重新整理頁面的操作達到多次執行動畫的目的。
  • 此框架是基於 css3 實現的

wow.js 框架

  • wow.js 框架是搭配 animate.css 使用的
  • wow.js 是基於 js 實現的
    -使用方法
<div class='wow slideInLeft'></div>
new WOW().init();
  • 此框架有一些配置資訊支援自定義屬性
var wow = new WOW{
        boxClass:'wow',
        animateClass:'animated',
        offset:0,
        mobile:true,  //是否支援移動端
        live:true,
        callBack:function(box){
        }
}
  • 此框架也有行內樣式
<div class='wow slideInLeft' data-wow-duration='2s' data-wow-delay='5s' data-wow-offset='10' data-wow-iteration='10'></div>
  • data-wow-duration: 特效持續事件
  • data-wow-delay: 特效延遲時間
  • data-wow-offset:滾動多少開始執行動畫特效
data-wow-offset = 滾動距離 + 瀏覽器高度 - 控制元件上部到頁面上部的距離

scrollReveal.js 框架

  • 用法
<div class = 'foo'>foo</div>
<div class = 'bar'>bar</div>
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');
  • scrollReveal.js 的一些配置資訊
sr.reveal('.foo',{
        reset:true,              //向上滾動也有特效，預設是 false，為沒有特效
        orgin:bottom,         //動畫出現起始位置
        distance:20px,
        duration:500,
        delay:0,
        rotate:{x:0,y:0,z:0},
        scale:0,
        // Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
        easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
        mobile: true,    //是否支援移動端
})

window.sr = ScrollReveal();
//新增配置
var config = {
        //滾動滑鼠時，動畫開關
        reset:true
};
//給小男孩單獨設定動畫
var config1 = {
        reset:true,
        origin:'left',
        duration:1000,
        delay:0,
        rotate:{x:20,y:50,z:80},
        opacity:0.2,
        scale:2
};
//呼叫方法
sr.reveal('.imgSrc',config);
sr.reveal('.man',config1);
  • scrollReveal 幀動畫
//多用一個引數
window.sr = ScrollReveal({duration:2000});
sr.reveal('.box',30);

bootStrap 框架的使用

  • 初體驗縮減版
<!DOCTYPE html>
<html lang = "zh-CN">
<head>
        <meta charset = "utf-8">
        <title>bootStrap 初體驗</title>
        <link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
<body>
          <h1>hello world</h1>
</body>
</html>
  • bootstrap 所包含的檔案
//css 檔案
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
//js 檔案
bootstrap.js
bootstrap.min.js
npm.js
//fonts 字型檔案
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2

相關文章