框架一 :: Animate.css
- Animate.css是一個css動畫樣式庫,可以減少我們的開發(fā)時間.它預設了抖動（shake）鸯两、閃爍（flash）、彈跳（bounce）窃这、翻轉（flip）、旋轉（rotateIn/rotateOut）征候、淡入淡出
（fadeIn/fadeOut）等多達70多種動畫特效杭攻，幾乎包含了所有常用的動畫特效。 - 重點: 主要是兼容各種瀏覽器,Animate的底層是靠css實現(xiàn)的,當然只兼容支持CSS3animate屬性的瀏覽器: IE10+疤坝、Firefox兆解、Chrome、Opera跑揉、Safari锅睛。
- **官網演示：https://daneden.github.io/animate.css/ **
Animate.css的具體使用
-
引入文件
<link rel="stylesheet" href="animate.min.css"> - 給要做動畫的HTML標簽添加上相對應的類，比如：
<div class="box myAnimated flip"></div> - 注意: 類 animated 的作用是控制動畫的持續(xù)時間畔裕，是所有動畫的前提條件衣撬， 在其后面的類則為動畫的效果類。
框架二 :: WOW.js
-
核心作用：讓我們的頁面滾動更有質感扮饶，更酷炫
- 通過WOW.js具练，可以在頁面逐漸向下滾動的過程中逐漸釋放這些動畫效果。也就是說：當我們向下滾動頁面時甜无，可以省去很多判斷條件扛点，讓CSS動畫逐漸展示出來哥遮。
-
特點
- 輕量級類庫， 不依賴jQuery陵究，超簡單的安裝和使用眠饮，與animate.css配合，只需要短短幾行代碼就可以實現(xiàn)很多特效铜邮。
- 容易定制仪召，我們可以改變動畫去設置喜歡的風格、延遲松蒜、長度扔茅、偏移和迭代等等。
-
兼容性問題
- 因為秸苗，WOW.js要和animate.css配合使用召娜，所有其也只兼容支持CSS3 animate屬性的瀏覽器：IE10+、Firefox惊楼、Chrome玖瘸、Opera、Safari檀咙。
-
使用方法
- 引入文件
<!-- Css文件 必須有這個animate文件的支持才能使用WOW -->
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
- 在相對的HTML標簽中通過類名進行綁定
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
- 然后在JavaScript文件中只需要一行初始化代碼就搞定咯
new WOW().init(); - 案例演示地址 : http://www.reibang.com/p/28a42dd03792
WOW.js常用的屬性
data-wow-delay: 動畫開始前延遲
data-wow-duration: 動畫持續(xù)時間
data-wow-iteration: 動畫重復次數
data-wow-offset: 距離瀏覽器底部到隱藏框頂部的距離（偏移量）
-
使用方法
- 可以加入 data-wow-duration (動畫持續(xù)時間)和 data-wow-delay （動畫延遲時間）等屬性雅倒。
<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s"></div>
<div class="wow slideInRight" data-wow-iteration="5"></div>
- data-wow-offset 圖解
**data-wow-offset**
- WOW的默認配置參數,如果需要自定義配置,可手動修改
var wow = new WOW({
boxClass: 'wow', // 動畫元素的CSS類（默認類名wow）
animateClass:'animated', // 動畫CSS類 （默認類名animated）
offset: 0, // 距離可視區(qū)域多少開始執(zhí)行動畫（默認為0）
mobile: true, // 是否在移動設備上執(zhí)行動畫 （默認是true）
});
wow.init();
- 但是WOW.js實例的動畫只能加載一次，如果要重新執(zhí)行動畫必須要進行刷新弧可。
- 為了更好的解決這個問題,所以引出以下這個框架
框架三 :: scrollReveal
-
介紹
- scrollReveal是一個兼容PC端和移動設備的滾動動畫庫屯断。不同的是WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以播放一次或無限次侣诺；
-
特點
- scrollReveal同時兼容PC端和移動端；
- 0依賴（不依賴于jQuery氧秘，也不依賴于animate.css）;
- 定制性高年鸳，使用簡單方便快捷。
瀏覽器兼容
雖然scrollReveal.js不依賴于animate.css,但是它也是用CSS3的動畫創(chuàng)建的,所以需要對H5和C3支持比較好的瀏覽器,比如: IE10+丸相、Firefox搔确、Chrome、Opera灭忠、Safari膳算。
**官網：https://scrollrevealjs.org/ **
-
使用方法
- 引入文件
<script src="js/scrollReveal.js"></script>
<!-- HTML -->
<div class="box"></div>
// JavaScript
window.onload = function () {
window.sr = ScrollReveal();
sr.reveal('.box');
}
- 常用參數 - 可以自己手動修改參數
var config = {
reset: false, // 滾動鼠標時，動畫開關
origin: 'bottom', // 動畫開始的方向
duration: 500, // 動畫持續(xù)時間
delay: 0, // 延遲
rotate: {x:0, y:0, z:0}, // 過度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.9, //縮放
// 緩動'ease', 'ease-in-out'弛作，'linear'
easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)',
// 回調函數
beforeReveal: function(domEl){},
beforeReset: function(domEl){},
afterReveal: function(domEl){},
afterReset: function(domEl){}
};
window.sr = ScrollReveal();
sr.reveal('.sr', config);
- **案例1演示鏈接: http://www.reibang.com/p/824c79577376 **
- **案例2演示鏈接:http://www.reibang.com/p/c54b32a54c9f **
ScrollReveal 和 WOW的區(qū)別和聯(lián)系
- 他們都不依賴jQuery;
- wow依賴于animate.css 涕蜂，ScrollReveal不依賴任何其他插件或者庫；
- wow的釋放動畫映琳，只能夠實現(xiàn)一次机隙，而ScrollReveal可以無限次使用蜘拉；
- ScrollReveal 參數相對比較多，比較復雜些有鹿；
- 實際工作中旭旭，用wow比較多。
框架四 :: Zepto
-
介紹
- 隨著移動端的愈加火爆葱跋，目前很多HTML5的框架都在?持移動?向持寄，?如：Vue.js，zepto.js娱俺，React Native等等稍味。
- Zepto 是一個輕量級的針對現(xiàn)代高級瀏覽器的 JavaScript 庫， 它與jquery 有著類似的api矢否。
如果你會用 jquery仲闽，那么你也會用 zepto。
Zepto的設計目的是提供 jQuery 的類似的API僵朗，但并不是100%覆蓋 jQuery 赖欣。Zepto設計的目的是有一個5-10k的通用庫、下載并快速執(zhí)行验庙、有一個熟悉通用的API顶吮，所以你能把你主要的精力放到應用開發(fā)上。
-
jQuery和Zepto.js的區(qū)別
- jQuery更多是在PC端被應用粪薛，因此悴了，考慮了很多低級瀏覽器的的兼容性問題；而Zepto.js則是直接拋棄了低級瀏覽器的適配問題违寿，顯得很輕盈湃交；
- Zepto.js在移動端被運用的更加廣泛；
- jQuery的底層是通過DOM來實現(xiàn)效果的藤巢， zepto.js 是靠css3 來實現(xiàn)的
- Zepto.js可以說是閹割版本的jQuery搞莺。
-
** 授之于魚 **
-
Zepto設計模塊
zepto為了保持足夠的輕量和效率，只保留了默認的最基本的功能掂咒，其他的功能才沧，如果有需要，只要再次引入就可以了绍刮；
-
zepto模塊
** zepto 模塊 ** 注意 : jQuery的底層是通過DOM來實現(xiàn)效果的温圆， zepto 是靠css3 來實現(xiàn)的
- **案例鏈接地址:http://www.reibang.com/p/e57b12abaf07 **
-
tap 和 click 的區(qū)別
- tap 只作用在移動端，PC端是無效的
- click 在pc端和移動端都是ok的
- 但是我們在移動端要用tap孩革，因為 tap 比 click 快200-300ms
-
zepto和jquery
- 首先岁歉，zepto默認只具有基本的模塊，其他功能模塊需要單獨引?嫉戚，引?的模塊刨裆，必須放在zepto的后面澈圈，fx.js 和fxmethods.js 他們之間必須是fxmethods.js在fx.js的后面；
- 其他的包之間順序無所謂帆啃；
- jQuery默認是一個文件中瞬女，包含所有的功模塊；
- zepto的底層是通過css3實現(xiàn)的,jQuery是操作的DOM,所以有些css3的效果努潘，是jquery做不到的诽偷；
- zepto比jQuery多了更多的移動端的事件的支持，比如說tap疯坤， swipe等等
- zepto的兼容性比jQuery差报慕，因為zepto更多的是注重移動端和效率，jQuery注重的是兼容性压怠；
注意:zepto上面的動畫眠冈，不要加太多， 因為動畫很耗性能菌瘫，加多了會很卡，特別是一些webview開發(fā)雇盖；
框架五 :: swiper.js
介紹
swiper是一款免費以及輕量級的移動設備觸控滑塊的js框架栖忠，主要是為iOS設計崔挖，同時，在Android庵寞、WP系統(tǒng)和其他PC瀏覽器上也有著良好的體驗捐川。
-
特點
- 輕量級卷哩，簡潔高效，可定制性非常高属拾；
- 橫跨各種設備，兼容IOS渐白、Android逞频、WP、PC端設備襟诸；
- 提供多種版本支持（可自由選擇jQuery/zepto版或原生js）;
**注意:swiper從3.0開始不再全面支持PC端。因此菇用，如需要在PC上兼容更多瀏覽器陷揪，可以選擇swiper 2.x(支持IE7) **
-
使用方法
- 引入方法
<link rel="stylesheet" href=“css/swiper.min.css">
<script src=“js/swiper.min.js"></script>
- HTML結構
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
- Js文件調用
var swiper = new Swiper('.swiper-container');
-
高級效果和參數設置
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動條 -->
<div class="swiper-scrollbar"></div>
</div>
** js部分 **
var mySwiper = new Swiper ('.swiper-container', {
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動條
scrollbar: '.swiper-scrollbar',
});
** 其他參數 根據自己項目的需求可以手動設置 **
loop: true, //循環(huán)開關
autoplay: 3000, //?動播放間隔時間（單位：毫秒）默認不?動播放
direction: 'vertical', //切換?向 ?平(horizontal)或垂直(vertical)
speed:300, //切換速度（單位：毫秒）
keyboardControl:true, //鍵盤控制開關
paginationType:‘bullets’, //分?器外觀 bullets 卦绣、 fraction 飞蚓、 progress
effect: 'fade', //切換效果 fade、cube溅漾、coverflow八堡、flip
-
swiper animate
- 引入文件(比之前多了animate.css 和swiper.animate.js)
<link rel="stylesheet" href=“css/swiper.min.css">
<link rel="stylesheet" href=“css/animate.min.css">
<script src=“js/swiper.min.js"></script>
<script src=“js/swiper.animate.min.js"></script>
- HTML
- 在需要運動的元素上面增加類名 ani, 然后添加swiper animate 參數：
- swiper-animate-effect：切換效果，例如 fadeInUp
- swiper-animate-duration：動畫持續(xù)時間（單位秒）兄渺，例如 0.5s
- swiper-animate-delay: 延遲時間（單位秒）
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slider 1</p>
</div>
</div>
</div>
- js調用
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隱藏動畫元素
swiperAnimate(swiper); //初始化完成開始動畫
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每個slide切換結束時也運?當前slide動畫
}
});
前面這幾款框架是比較流行和常用的
LESS --- -- is MORE , Than CSS
介紹
Less 是一門 CSS 預處理語言挂谍，使用了類似CSS的語法，為CSS賦予了動態(tài)語言的特征炼绘。它擴展了 CSS 語言妄田，增加了變量、Mixin(混合)脚曾、嵌套启具、函數和運算等特性，使 CSS 更易維護和擴展拷沸。此外，Less 可以運行在 Node 或瀏覽器端秧了。特點
作為CSS的一種擴展示惊，LESS CSS不僅向下兼容CSS的語法愉镰，而且連新增的特性也是使用CSS語法。這樣的設置使得學習LESS非常輕松录择，而且你可以在任何時候回退到CSS碗降。用類似js的寫法去寫LESS,可以設置變量,可以用函數!
變量
單獨定義一系列通用的樣式，然后在需要的時候去調用动看。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了
// JS中定義變量
var name = '張三';
// LESS中定義變量
@color:red;
h1 {
color: @color;
}
-
嵌套 --- 值得注意的是:嵌套層級一般不要超過三層
在一個選擇器中嵌套另一個選擇器來實現(xiàn)繼承菱皆，這樣很大程度上減少了代碼量挨稿，并且代碼看起來更加清晰。
div {
h1 {
color:red;
}
}
-
運算
運算提供了加篷店、減臭家、乘钉赁、除操作，其他復雜的運算交給函數；通常我們可以做屬性值和顏色的運算，這樣就可以實現(xiàn)屬性值之間的復雜關系按厘。 > 注意：運算符與值之間必須以空格分開钱慢。
@w:500px;
div {
h1{
width: @w - 100;
}
}
h1 {
width: @w;
border: 1px solid #000;
}
-
混合(Mixins)
-
混合可以將一個定義好的class A輕松的引入到class B中束莫，從而簡單的實現(xiàn)class B 繼承class A的所有屬性。我們還可以帶參數的調用策严，就像使用函數一樣饿敲。
**混合(Mixins)** - 注意：混合的使用就和js的自定義函數類似怀各，首先 混合 必須前面是以 . +混合名稱開始
- 結構：.名稱(變量){}
- 可以有默認值，也可以沒有默認值寿酌，沒有的話硕蛹，在調用的時候必須傳參，有默認值的時候就可以不用傳遞參數僵腺；
- 多個參數之間和js一樣辰如，用逗號（,） 隔開
-
-
函數
-
LESS中的函數 - 映射了JavaScript函數代碼贵试，如果你愿意的話，可以操縱屬性值豌蟋。
LESS 函數
- 比如：鼠標移上亮度增加20%梧疲。
- 需要查找的時候，直接查文檔就可以了
- 比如:
-
saturate(@color, 10%); // 飽和度增加 10%
desaturate(@color, 10%); // 飽和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 設定透明度為 50%
spin(@color, 10); // 色相值增加 10
-
匹配模式
- 類似js中的if else判斷缭受，只有匹配成功才能起作用
**匹配模式**
- 注意：匹配模式中,定義的模式名稱都是一樣的米者，只是參數不一樣宇智，調用的時候只需選擇對應的參數就可以了。
-
使用方法
- 方式一：客戶端直接調用
<link rel="stylesheet/less" href="less/less.less">
<!--用于編譯LESS的-->
<script type="text/javascript" src="js/less.min.js"></script>
注意：必須在服務器環(huán)境中才能生效喂分，動態(tài)編譯注入虛擬DOM或者內存中妻顶，類似ajax蜒车。 開發(fā)中常用的服務器組合：WAPM
- 方式二：預編譯（提前編譯）
在代碼編輯器中，按照LESS的語法規(guī)則寫好LESS文件沥潭；
使用編譯工具把.less文件編譯成.css文件嬉挡；
把編譯后的css文件引入到頁面即可庞钢。
-
**編譯工具 --- Koala **
點擊添加文件,然后直接轉換就可以使用
**Koala** 如何在一個LESS文件中導入另一個LESS文件
@import "less.less"; // 注意：less文件擴展名可選-
補充
- // 不會被編譯器編譯的注釋
- /**/ 是可以被編譯器編譯的 注釋
- ~’’ 表示的是禁止被編譯
- & 表示選擇所有的父級元素
-
授之于漁
- LESS官網：http://lesscss.org/
- LESS中文網 ： http://www.lesscss.cn/ http://www.lesscss.net/
敬請期待 ...
- 接下來會更新Bootstrap框架,因為Bootstrap框架的底層就是用LESS編譯的,而且內容也比較多.
- 考慮到Bootstrap在前端比較火爆和熱門,所以單獨抽出來整理
