H5C3語義化標籤及Stellar外掛
語義化標籤:
1.語義化標籤的作用
1.1 從開發角度考慮是提高程式碼的可讀性可維護性
1.2 網站的釋出者:seo 搜尋引擎優化
2.語義化標籤的相容問題
2.1 IE9以下不支援H5標籤(大部分css3屬性,一些H5的api)
2.2 IE9以下不認識,把這些標籤當做行內元素去看待
2.3 語義化標籤需要動態建立 document.createElement('header') 同時設定塊級元素
2.4 有一款外掛能幫你完成這件事件 html5shiv.js
2.5 必須引入在頭部,在頁面結構之前,提前解析h5標籤
2.6 優化處理:支援H5標籤的不需要載入,IE9以下不支援H5載入
2.7 js判斷客戶的瀏覽器版本可以做到,但是不能做到js提前載入
2.8 條件註釋:網頁的任何地方 根據瀏覽器版本去載入內容(html標籤)
2.9 固定語法 lt 小於 gt 大於 lte 小於等於 gte 大於等於
Stellar外掛
- 描述
- 視差滾動(Parallax Scrolling)指網頁滾動過程中,多層次的元素進行不同程度的移動,視覺上形成立體運動效果的網頁展示技術主要核心就是前景和背景以不同的速度移動,從而創造出3D效果。
- 特性
- 視差滾動效果酷炫,適合於個性展示的場合。
- 視差滾動徐徐展開,適合於娓娓道來,講故事的場合。
- 視差滾動容易迷航,需要具備較強的導航功能。
- 視差滾動效果酷炫,適合於個性展示的場合。
- 原理
- 傳統的網頁的文字、圖片、背景都是一起按照相同方向相同速度滾動的,而視差滾動則是在滾動的時候,內容和多層次的背景實現或不同速度,或不同方向的運動。有的時候也可以加上一些透明度、大小的動畫來優化顯示。利用background-attachment屬性實現。
- 使用步驟
- 引用檔案
<script src="jquery/jquery.min.js"></script> <script src="jquery.stellar.min.js"></script>
- html結構
<div class="content" id="content1">
<p>TEXT HERE</p>
</div>
<div class="content" id="content2">
<p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
- 基本樣式
.content {
background-attachment: fixed;
height: 400px;
}
#content1 {
background-image: url("..");
}
#content2 {
background-image: url("..");
}
#content3 {
background-image: url("..");
}
#content4 {
background-image: url("..");
}
#content5 {
background-image: url("..");
}
#content6 {
background-image: url("..");
}
- js初始化
$.stellar({
horizontalScrolling: false,
responsive: true
});
- 引數解釋
horizontalScrolling 和 verticalScrolling |
該配置項用來設定視差效果的方向。horizontalScrolling設定水平方向,verticalScro設定垂直方向, 為布林值,預設為true |
responsive |
該配置項用來制定load或者resize時間觸發時是否重新整理頁面,其值為布林值,預設為false |
hideDistantElements |
該配置項用來設定移出視線的元素是否隱藏,其值為布林值,若不想隱藏則設定為false |
data-stellar-ratio="2" |
定義了此元素針對頁面滾動的速度比率,比如,0.5為頁面滾動的50%,2為頁面滾動的200%,所以數值越大,你可以看到頁面元素滾動速度越快。 |
data-stellar-background-ratio |
該配置項用在單個元素中,其值為一個正數,用來改變被設定元素的影響速度。 例如 值為0.3時,則表示背景的滾動速度為正常滾動速度的0.3倍。如果值為小數時最好在樣式表中設定 |