基本環境介紹
什麼是響應式網頁設計？(上)
兼容各種螢幕解析度的網頁設計
HTML5、CSS3
- 桌面版
- 行動版
- 960 px 三欄式排版
- 768 px 三欄式間距變少
- 375 px 例如：Iphone6 單欄式呈現方式
響應式設計 CSS3 media queries 的語法
來去做到 PC IPad Mobile 都可以自適應螢幕解析度，來達到更好的瀏覽體驗。
什麼是響應式網頁設計?(下)
網頁講解
- PDA 版
- 單欄式或固定
- 響應式
基本環境建立 (上)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>基本環境建立 (下)
Viewport
Viewport 可以解決 Chrome 醬的問題
<meta name="viewport" content="width=device-width, initial-scale=1">- 瀏覽器顯示寬度 = 裝置的寬度
- 縮放比為 1
| device-width | 畫面寬度 |
| device-height | 畫面高度 |
| initial-scale | 初始縮放比 |
| minimun-scale | 最小可縮放比 |
| maximun-scale | 最大可縮放比 |
| user-scalable | 使用者是否可縮放 |
maximum-scale = 2 最大縮放比為 2 倍。
emmet 熱鍵：meta:vp
基本環境建立 (下) – 課程補充
「Viewport 說明」
同學可能會疑惑 viewport 是什麼，老師這邊額外簡單補充一下，viewport 主要是為了智慧型手機的顯示網頁時畫面較小的問題，那麼為了解決這問題 W3C 在 HTML 制定了專門的標籤語法給網頁使用
<meta name="viewport" content="width=device-width, initial-scale=1.0">因此這個標籤可以讓我們在智慧型手機上自動調整畫面顯示，所以這是格外重要的 HTML 屬性唷。
CSS 3 Media Query 觀念 (上)
CSS 程式碼
/* CSS STYLES */
/* PC */
.title{
color: red;
}
.content{
color: #000;
}
/* TABLET */
@media (max-width: 768px){
.title{
color: blue;
}
.content{
font-size: 30px;
}
}
/* MOBILES */
@media (max-width: 375px){
.title{
color: yellow;
}
}CSS 3 Media Query 觀念 (下)
在之前，已經知道 RWD 與裝置寬度有關，且 CSS 可以依據寬度設定版型。
先來定義一下規則吧
- 預設底色顯示紅色
- 低於或等於 768px 的顯示藍色
- 低於或等於 375px 的顯示綠色
body{
background: red;
}
@media (max-width: 768px) {
body{
background: blue;
}
}
@media (max-width: 375px) {
body{
background: green;
}
}min-width 語法教學
先來定義一下規則吧
- 預設底色顯示為綠色
- 高於或等於 375 px 顯示為藍色
- 高於或等於 768 px 顯示為紅色
body{
background: green;
}
@media (min-width: 375px){
body{
background: blue;
}
}
@media (min-width: 768px){
body{
background: red;
}
}- max-width：由大到小
- min-width：由小到大
瀏覽器內建模擬 Mobile 介面工具
- Chorme
- Safari
常見版型布局設定
Flex RWD 排版方式
Flex 是現今非常流行的排版方式
禁止顯示 x 軸法則
max-width: 流體式佈局
程式碼範例
.wrap{
max-width: 600px;
margin: 0 auto;
}max-width: 一個小設定輕易將網頁設定成流體式佈局-課程補充
「課程說明」
這邊額外補充一下，中文內文單行字元 30~40 會比較好閱讀，英文則是 32~80 個字元數
更詳細一點的規範與說明可以看以下參考連結唷
版型單位 % 數觀念
<body>
<div class="wrap">
</div>
</body>父元素 – wrap的父元素是body
程式碼範例
<div class="wrap">
<div class="menu"></div>
<div class="content"></div>
</div>.wrap{
max-width: 500px;
margin: 0 auto;
height: 200px;
background: #000;
}
.menu{
width: 30%;
height: 100px;
background: orange;
float: left;
}
.content{
width: 70%;
height: 100px;
background: blue;
float: left;
}三欄流體式設計
版型：
- 三欄式：33.3333%
- 兩欄式：50%
- 單欄式：100%
原則上全部的欄位加起來不超過100%
程式碼範例
<div class="wrap">
<ul class="news">
<li>
<h2>大標題</h2>
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
</ul>
</div>CSS 程式碼範例
/* CSS RESET */
/* CSS STYLES */
.wrap{
max-width: 960px;
padding-top: 20px;
margin: 0 auto;
line-height: 1.5;
}
.news h2{
color: #000000;
padding: .3em 0;
font-size: 20px;
}
.news li{
width: 31.33333%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1em;
float: left;
}
/* iPad 直式 */
@media (max-width: 768px){
.news li{
width: 48%;
}
}
/* iPhone 5 橫式 */
@media (max-width: 569px){
.news li{
width: 98%;
}
}左側 Float 固定、右側流體式設計
程式碼範例
<div class="wrap">
<div class="menu">
<ul>
<li>心牆</li>
<li>終於</li>
<li>我是如此相信</li>
</ul>
</div>
<div class="content">
<h3>心墻</h3>
<p>
在長雨落花迷濛 思亂交錯中<br>
風嘯傳聲驚動心懸空<br>
千里埋伏迎來 誰處身世外<br>
避不過命運安排<br>
閉上眼我能看見你的臉<br>
睜開眼悲盡蒼涼刀劍滿天<br>
繁塵中誰與爭鋒<br>
無聲掀起暗湧<br>
命運的流轉看破人世變幻<br>
傷離別離別太殤 猶念驚鴻一瞥<br>
遇見你的那一天<br>
同偕到白髮攜手共度年華<br>
回眸間一眼萬年<br>
被淹沒隱藏的愛<br><br>
終是不自來<br>
權弄一生盡時悔無奈 來世若再相見<br>
以身化作劍 護你一生的周全<br>
湖中倒影相依偎的姿態<br>
無憂絢爛的歲月一去不再<br>
繁塵中誰與爭鋒 無聲掀起暗湧<br>
命運的流轉看破人世變幻<br>
傷離別離別太殤 猶念驚鴻一瞥<br>
遇見你的那一天<br>
同偕到白髮攜手共度年華<br>
回眸間一眼萬年 宮牆外風雨欲來<br>
黑夜漫延角巷 錦服繡刀在追逐不懼成敗<br>
人離散咫尺天涯 淚光滿目悲愴<br>
獨留心中的凝望<br>
心牆若撕開冰冷中的期待<br>
奈何啊空留遺憾 回頭看思量難忘<br>
</p>
<h3>終於</h3>
<p>
流年低聲輕輕說一段溫柔的唇語<br>
光陰輾轉夢裡編織著動人的秘密<br>
夢中的漣漪穿梭在心裡<br>
陪我顛沛流離風浪起<br>
飄搖無依蜿蜒幾裡<br>
留下斑駁的痕跡<br><br>
終於以約為期讓我在今夕遇見你<br>
撥亂宿命幾世等待一段 緣起<br>
眼中天地 是我背負的荊棘<br>
最想卻是和你再相聚<br>
兩世凡塵如你只為我抵擋這風雨<br>
也曾是你和我分享觸動人的憧憬<br>
眉目間沉溺綰幾許親密<br><br>
心火搖曳在彼此眼裡<br>
成為知己山海約定<br>
願為此情去追尋<br><br>
終於是你喚醒勇氣常駐在我心裡<br>
就算隔世一言為定不分 不離<br>
不再畏懼 命運送我的荊棘<br>
破繭成蝶飛舞在天地<br>
終於我能為你成為這更好的自己<br>
褪去繁華找回最初真心 不渝<br>
一路崎嶇 是我無悔的經歷<br>
哪怕有天記憶被抹去<br><br>
終於漂泊好久的船停靠在你懷裡<br>
依然還會給我海闊天空的勇氣<br>
當分離 終有一天再相聚<br>
我的心還守在你這裡
</p>
<h3>我是如此相信</h3>
<p>
鳥群離開了森林 整座天空很灰心<br>
蝴蝶不再被吸引 玫瑰盛開的很安靜<br>
遠方的風雨不停 城市蒼白而孤寂<br>
徘徊無助的人群 焦慮著何時放晴<br><br>
故事裡能毀壞的只有風景<br>
誰也摧毀不了我們的夢境<br>
弦月旁的流星劃過了天際<br>
我許下的願望該向誰去說明<br><br>
隕石在浩瀚的宇宙間旅行<br>
璀璨的夜空裡漫天的水晶<br>
我的禱告終於有了回音<br><br>
我是如此相信 在背後支撐的是你<br>
一直與我並肩而行 仰望等太陽升起<br>
聽見鳥群回來的聲音<br><br>
為我守候的人是你 給了我堅定的信心<br>
雙手彈奏出黎明 原來愛如此的動聽<br><br>
鳥群離開了森林 整座天空很灰心<br>
蝴蝶不再被吸引 玫瑰盛開的很安靜<br>
遠方的風雨不停 城市蒼白而孤寂<br>
徘徊無助的人群 焦慮著何時放晴<br><br>
故事裡能毀壞的只有風景<br>
誰也摧毀不了我們的夢境<br>
弦月旁的流星劃過了天際<br>
我許下的願望該向誰去說明<br><br>
隕石在浩瀚的宇宙間旅行<br>
璀璨的夜空裡漫天的水晶<br>
我的禱告終於有了回音<br><br>
我是如此相信 在背後支撐的是你<br>
一直與我並肩而行 仰望等太陽升起<br>
聽見鳥群回來的聲音<br><br>
為我守候的人是你 給了我堅定的信心<br>
雙手彈奏出黎明 原來愛如此的動聽<br><br>
我是如此相信 在背後支撐的是你<br>
一直與我並肩而行 仰望等太陽升起<br>
聽見鳥群回來的聲音<br><br>
為我守候的人是你 給了我堅定的信心<br>
雙手彈奏出黎明 原來愛如此的動聽
</p>
</div>
</div>CSS 程式碼範例
/* CSS RESET */
/* CSS STYLES */
.wrap{
max-width: 800px;
margin: 0 auto;
}
.menu{
width: 200px;
float: left;
padding-top: 10px;
background: #000;
}
.menu li{
margin-bottom: 20px;
color: #fff;
}
.content{
margin-left: 210px;
background: orange;
color: #fff;
}Float: none 清除浮動並排效果
CSS 程式碼範例
@media (max-width: 768px){
.menu{
float: none;
width: 100%;
}
}
@media (max-width: 768px){
.content{
margin-left: 0;
}
}網站版型框架設定
CSS 事前設定
*,*:before,*:after{
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
}範例程式碼
<div class="wrap">
<div class="header">
<h1 class="logo"><a href="#">公司LOGO</a></h1>
<ul class="menu">
<li><a href="#">心墻</a></li>
<li><a href="#">終於</a></li>
<li><a href="#">我是如此相信</a></li>
</ul>
</div>
<div class="content">
<h2>心墻</h2>
<p>
在長雨落花迷濛 思亂交錯中<br>
風嘯傳聲驚動心懸空<br>
千里埋伏迎來 誰處身世外<br>
避不過命運安排<br>
閉上眼我能看見你的臉<br>
睜開眼悲盡蒼涼刀劍滿天<br>
繁塵中誰與爭鋒<br>
無聲掀起暗湧<br>
命運的流轉看破人世變幻<br>
傷離別離別太殤 猶念驚鴻一瞥<br>
遇見你的那一天<br>
同偕到白髮攜手共度年華<br>
回眸間一眼萬年<br>
被淹沒隱藏的愛<br><br>
終是不自來<br>
權弄一生盡時悔無奈 來世若再相見<br>
以身化作劍 護你一生的周全<br>
湖中倒影相依偎的姿態<br>
無憂絢爛的歲月一去不再<br>
繁塵中誰與爭鋒 無聲掀起暗湧<br>
命運的流轉看破人世變幻<br>
傷離別離別太殤 猶念驚鴻一瞥<br>
遇見你的那一天<br>
同偕到白髮攜手共度年華<br>
回眸間一眼萬年 宮牆外風雨欲來<br>
黑夜漫延角巷 錦服繡刀在追逐不懼成敗<br>
人離散咫尺天涯 淚光滿目悲愴<br>
獨留心中的凝望<br>
心牆若撕開冰冷中的期待<br>
奈何啊空留遺憾 回頭看思量難忘<br>
</p>
<h2>終於</h2>
<p>
流年低聲輕輕說一段溫柔的唇語<br>
光陰輾轉夢裡編織著動人的秘密<br>
夢中的漣漪穿梭在心裡<br>
陪我顛沛流離風浪起<br>
飄搖無依蜿蜒幾裡<br>
留下斑駁的痕跡<br><br>
終於以約為期讓我在今夕遇見你<br>
撥亂宿命幾世等待一段 緣起<br>
眼中天地 是我背負的荊棘<br>
最想卻是和你再相聚<br>
兩世凡塵如你只為我抵擋這風雨<br>
也曾是你和我分享觸動人的憧憬<br>
眉目間沉溺綰幾許親密<br><br>
心火搖曳在彼此眼裡<br>
成為知己山海約定<br>
願為此情去追尋<br><br>
終於是你喚醒勇氣常駐在我心裡<br>
就算隔世一言為定不分 不離<br>
不再畏懼 命運送我的荊棘<br>
破繭成蝶飛舞在天地<br>
終於我能為你成為這更好的自己<br>
褪去繁華找回最初真心 不渝<br>
一路崎嶇 是我無悔的經歷<br>
哪怕有天記憶被抹去<br><br>
終於漂泊好久的船停靠在你懷裡<br>
依然還會給我海闊天空的勇氣<br>
當分離 終有一天再相聚<br>
我的心還守在你這裡
</p>
<h2>我是如此相信</h2>
<p>
鳥群離開了森林 整座天空很灰心<br>
蝴蝶不再被吸引 玫瑰盛開的很安靜<br>
遠方的風雨不停 城市蒼白而孤寂<br>
徘徊無助的人群 焦慮著何時放晴<br><br>
故事裡能毀壞的只有風景<br>
誰也摧毀不了我們的夢境<br>
弦月旁的流星劃過了天際<br>
我許下的願望該向誰去說明<br><br>
隕石在浩瀚的宇宙間旅行<br>
璀璨的夜空裡漫天的水晶<br>
我的禱告終於有了回音<br><br>
我是如此相信 在背後支撐的是你<br>
一直與我並肩而行 仰望等太陽升起<br>
聽見鳥群回來的聲音<br><br>
為我守候的人是你 給了我堅定的信心<br>
雙手彈奏出黎明 原來愛如此的動聽<br><br>
鳥群離開了森林 整座天空很灰心<br>
蝴蝶不再被吸引 玫瑰盛開的很安靜<br>
遠方的風雨不停 城市蒼白而孤寂<br>
徘徊無助的人群 焦慮著何時放晴<br><br>
故事裡能毀壞的只有風景<br>
誰也摧毀不了我們的夢境<br>
弦月旁的流星劃過了天際<br>
我許下的願望該向誰去說明<br><br>
隕石在浩瀚的宇宙間旅行<br>
璀璨的夜空裡漫天的水晶<br>
我的禱告終於有了回音<br><br>
我是如此相信 在背後支撐的是你<br>
一直與我並肩而行 仰望等太陽升起<br>
聽見鳥群回來的聲音<br><br>
為我守候的人是你 給了我堅定的信心<br>
雙手彈奏出黎明 原來愛如此的動聽<br><br>
我是如此相信 在背後支撐的是你<br>
一直與我並肩而行 仰望等太陽升起<br>
聽見鳥群回來的聲音<br><br>
為我守候的人是你 給了我堅定的信心<br>
雙手彈奏出黎明 原來愛如此的動聽
</p>
</div>
<div class="sidebar">
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
<div class="footer">
Copyright © 2016
</div>
</div>CSS 程式碼範例
/* CSS RESET SETTINGS */
*,*:before,*:after{
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
}
/* CSS STYLES */
.wrap{
max-width: 960px;
margin: 0 auto;
}
.header{
position: relative;
height: 350px;
}
@media (max-width: 768px){
.header{
height: auto;
}
}
.logo{
position: absolute;
top: 30px;
left: 0px;
}
.logo a{
display: block;
width: 250px;
text-indent: -99999px;
height: 250px;
background: url(../img/M1.png);
}
@media (max-width: 768px){
.logo{
position: relative;
margin: 0 auto;
width: 150px;
}
.logo a{
display: block;
width: 150px;
height: 170px;
background: url(../img/M2.png) no-repeat;
}
}
.menu{
float: right;
margin: 30px 0 0 0;
}
.menu li{
float: left;
background: #3399ff;
border-right: 1px solid #fff;
}
.menu li a{
color: #fff;
display: block;
width: 100px;
font-weight: bold;
text-align: center;
height: 30px;
line-height: 30px;
text-decoration: none;
}
@media (max-width: 768px){
.menu{
float: none; /* 拿掉浮動 */
}
.menu li{
width: 90%;
float: none; /* float style */
margin: 0 auto 10px auto;
border-radius: 3px;
}
.menu li a{
width: 100%;
text-align: center;
}
}
.content{
float: left;
width: 75%;
border: 2px solid #000;
padding: 10px;
}
.content h2{
font-weight: bold;
font-size: 26px;
padding: 30px 0 20px 0;
}
.content p{
line-height: 1.8;
letter-spacing: 1pt;
padding: 0 0 30px 0;
}
.sidebar{
float: right;
width: 20%;
border: 2px solid #000;
padding: 5px;
margin-left: 5%;
}
.sidebar img{
margin: 0 0 10px 0;
}
@media (max-width: 768px){
.content, .sidebar{
border: none;
float: none; /* 拿掉浮動 */
width: 100%; /* 百分比呈現寬度 */
margin: 0;
}
.sidebar img{
display: block;
max-width: 90%;
height: auto;
margin-bottom: 10px;
}
}
.footer{
clear: both;
padding: 1em 0;
text-align: center;
}第二章作業
作業規範：
- 先從 PC 開始再依序做到手機
- PC 寬度為 1000px
- 表頭選單在 767px 後變成 2*2 選單排列
- 課程列表在 1000px 以下時也能自適應，767px 後變成單欄式排版
iPad 直式 – 768*1024
以 UI 設計角度切入響應式設計該注意的細節
動線設計：並非所有內容都要全部塞到網頁內容
斷點時機：設計多欄式佈局的必要觀念
以文字行數為例
- 左右留白大約在 10~20px 之間。
斷點時機：設計多欄式布局的必要觀念-課程補充
「課程說明」
這邊額外補充一下，中文內文單行字元 30~40 會比較好閱讀，英文則是 32~80 個字元數
更詳細一點的規範與說明，可以看以下參考連結唷
點擊範圍：設計讓人好點選的元素
- 手指範圍約 44 px。
- 設計點擊範圍至少高度都要滿足 44 px 以上會比較好。
少即是多：避免資訊量爆炸
PC 螢幕解析度下的內容
- 縮圖
- 標題
- 局部內文
- 其他說明
Mobile 螢幕解析度下的內容
- 縮圖
- 標題
載具特性：使用者行為 touch、hover 傻傻分不清楚
- PC 是滑過的事件
- iPad、Mobile 是點擊的事件
斷點元素：只有手機才會顯示的功能與Layout切換
舉例：漢堡選單
斷點：960 px、768 px
桌面版
- 選單為水平排列
- 隱藏漢堡選單
行動版
- 選單為垂直排列 (預設隱藏)
- 顯示漢堡選單
程式碼
.navbar-menu > li{
display: inline-block;
}
.button-toggle{
display: none;
}
@media screen and (max-width: 768px){
.navbar-menu{
display: none;
}
.navbar-menu.active{
display: block;
}
.navbar-menu > li{
display: block;
}
.button-toggle{
display: inline-block;
}
}斷點元素：只有手機才會顯示的功能與Layout切換-課程補充
「課程說明」
因為同學可能沒聽過 「Layout」是什麼，所以老師這邊額外簡單補充一下
Layout 是網頁的通用版型的意思，舉例來講，你在逛網頁時往往會有一些地方是相同的，通常是 header (首頁) 與 footer (頁尾)，但只有中間的內容(content)會隨著使用者切換，而這個 header 與 footer 就是 Layout 唷。
斷點規劃
先要有個認知，響應式無法讓所有螢幕解析度都最佳化
/* 斷點 Breakpoint */
@media (max-width: 768px){
.news li{
width: 48%;
}
}
@media (max-width: 569px){
.news li{
width: 98%;
}
}有些設計稿，會單純針對 768px 給予客製化的版型，因為剛好是 iPad 的尺寸，
所以在 768px 時就會顯示雙欄式排版，而假使解析度在 iPad 以下時，例如 767px 就會設計承單欄，以滿足手機版上較大的螢幕解析度。
所以在開發時，比較常用的就是 768px、767px 來下斷點，不會使用 769px 來下斷點。
遵循 80/20 法則，先兼容熱門瀏覽器吧！
如何替客戶設計響應式斷點？
- 有舊網站時，先套 Google分析 觀察數據
- 如果沒有，以最熱門的解析度為主
什麼是 Mobile First 與 Desktop First 優先？
Mobile First 手機版型優先
.wrap{
padding-top: 20px;
margin: 0 auto;
line-height: 1.5;
}
@media (min-width: 960px){
.wrap{
max-width: 960px;
}
}
.news h2{
color: #000000;
padding: .3em 0;
font-size: 20px;
}
.news li{
width: 98%;
margin-right: 1%;
margin-left: 1%;
}
@media (min-width: 768px){
.news li{
width: 48%;
float: left;
margin-bottom: 1em;
}
}
@media (min-width: 960px){
.news li{
width: 31.33333%;
}
}Desktop First 電腦版型優先
.wrap{
max-width: 960px;
padding-top: 20px;
margin: 0 auto;
line-height: 1.5;
}
.news h2{
color: #000000;
padding: .3em 0;
font-size: 20px;
}
.news li{
width: 31.33333%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1em;
float: left;
}
/* 斷點 Breakpoint */
@media (max-width: 768px){
.news li{
width: 48%;
}
}
@media (max-width: 569px){
.news li{
width: 98%;
}
}斷點順序
- Mobile First – 手機>平板>高螢幕解析度PC
- Desktop First – 高螢幕解析度PC>平板>手機
為何要考量 Mobile First 與 Desktop 優先的網頁版型？
依版型靈活度來決定。
常見 PC 解析度斷點設計
中間內容的解析度
- 960px (常見)
- 1000px
- 1280px
- 1440px (少見還是有)
程式碼範例：表頭滿版設計
<div class="header">
<div class="container">
<div class="logo"></div>
</div>
</div>
<div class="content container">
<p>1234</p>
</div>.header{
height: 80px;
background: #000;
margin-bottom: 30px;
}
.header .logo{
height: 50px;
width: 50px;
background: yellow;
float: left;
}
.container{
max-width: 960px;
margin: 0 auto;
}Viewport Sizes 服務網站介紹
Viewport Sizes 服務網站介紹-課程補充
「課程說明」
Viewport Sizes 目前已經更改網址成：連結
但由於該網站中沒有比較新的型號，因此這邊老師也提供其他查詢網址唷~
自我補充
六角講師斷點設計分享
分享老師自己必會設定的 media 斷點 ，
更新日期：2016/10/8
- iPad – 768px
- iPad以下 – 767px
- iPhone 6 Plus – 414px (視專案族群)
- iPhone 6 – 375px (視專案族群)
- iPone 5、SE – 320px
有學生應該會很好奇，
為什麼 還會有一個 767px 的斷點，
因為通常 iPad 直式 是 Android、IOS 平版很常見的大小，
再接著 767px~320px 我便會視為他們都是手機 size，
所以在 767 px 以下時就會直接把他變成手機版型，
畢竟 767px~6xx size 相當少見，一開始各位學生可以先確保一些熱門斷點上優化即可，
至少可以滿足 80% 以上的客戶，
不用太吹毛求疵，當然你力求優化的話也是 ok 的。
再來 320px 是你最小需要注意的 SIZE，
現在仍然有許多手機是 320px，尤其是小 size 的 iPhone，
以前甚至有 240px 的手機，但現在已經相當稀有了。
所以如果是 PC 做到手機的話，語法就會有點像是這樣：
Desktop First 範例程式碼
.wrap{
max-width: 960px;
}
.header{
height: 80px;
}
.list li{
width: 33%;
}
.list h3{
font-size: 24px;
}
@media (max-width: 768px){
.header{
height: auto;
}
.list li{
width: 48%;
margin: 0 1%;
}
}
@media (max-width: 767px){
.list li{
width: 98%;
}
}
@media (max-width: 414px){
.list li{
font-size: 18px;
}
}響應式表格與表單設計
響應式表格設計 (上)
範例程式碼
<div class="container">
<table class="order">
<tr>
<th class="m-none" width="15%">編號</th>
<th width="15%">訂單日期</th>
<th width="15%">姓名</th>
<th width="20%">品項</th>
<th width="15%">總金額</th>
<th class="m-none" width="15%">管理</th>
</tr>
<tr>
<td class="m-none">000001</td>
<td>2020/05/04</td>
<td>買家一</td>
<td>冰箱</td>
<td>20000</td>
<td class="m-none">
<input type="button" value="修改">
<input type="button" value="刪除">
</td>
</tr>
<tr>
<td class="m-none">000002</td>
<td>2020/05/04</td>
<td>買家二</td>
<td>電風扇</td>
<td>5000</td>
<td class="m-none">
<input type="button" value="修改">
<input type="button" value="刪除">
</td>
</tr>
<tr>
<td class="m-none">000003</td>
<td>2020/05/04</td>
<td>買家三</td>
<td>電腦</td>
<td>15000</td>
<td class="m-none">
<input type="button" value="修改">
<input type="button" value="刪除">
</td>
</tr>
</table>
</div>/* css reset
============================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-family: 標楷體;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html body div.clear, html body span.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.container{
max-width: 800px;
}
.order{
width: 100%;
}
.order th,.order td{
border: 1px solid green;
padding: 5px;
text-align: center;
}
.order th{
background: green;
color: #fff;
}
@media(max-width: 569px){
.m-none{
display: none;
}
}響應式表格設計 (下)
範例程式碼
<h1>個人家電</h1>
<p>大部分的家電用品在這都可以找到，就算找不到，該公司可以代為訂購所需家電用品，價格與市面上的一樣，而在服務我們提供了售後服務以及回購的折扣。</p>
<div class="container">
<table class="order">
<tr>
<th width="15%">編號</th>
<th width="10%">訂單日期</th>
<th width="10%">姓名</th>
<th width="20%">品項</th>
<th width="20%">地址</th>
<th width="10%">總金額</th>
<th width="15%">管理</th>
</tr>
<tr>
<td>000001</td>
<td>2020/05/04</td>
<td>買家一</td>
<td>冰箱</td>
<td>台北市XX區XX路</td>
<td>20000</td>
<td>
<input type="button" value="修改">
<input type="button" value="刪除">
</td>
</tr>
<tr>
<td>000002</td>
<td>2020/05/04</td>
<td>買家二</td>
<td>電風扇</td>
<td>台南市XX區XX路</td>
<td>5000</td>
<td>
<input type="button" value="修改">
<input type="button" value="刪除">
</td>
</tr>
<tr>
<td>000003</td>
<td>2020/05/04</td>
<td>買家三</td>
<td>電腦</td>
<td>高雄市XX區XX路</td>
<td>15000</td>
<td>
<input type="button" value="修改">
<input type="button" value="刪除">
</td>
</tr>
</table>
</div>
<h1>個人家電</h1>
<p>大部分的家電用品在這都可以找到，就算找不到，該公司可以代為訂購所需家電用品，價格與市面上的一樣，而在服務我們提供了售後服務以及回購的折扣。</p>/* css reset
============================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-family: 標楷體;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html body div.clear, html body span.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
h1{
font-size: 24px;
line-height: 1.5;
}
.container{
max-width: 800px;
margin-bottom: 1em;
}
.order th,.order td{
border: 1px solid green;
padding: 5px;
text-align: center;
}
.order th{
background: green;
color: #fff;
}
@media (max-width:569px){
.container{
overflow-x: auto;
}
.order{
width: 768px;
}
}pure.css：加強你對網頁元素的了解
pure.css：按鈕設計原理
講解和範例
.pure-button{
/* Structure */
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner{
padding: 0;
border: 0;
}/*csslint outline-none:false*/
.pure-button{
font-family: inherit;
font-size: 100%;
padding: 0.5em 1em;
color: #444; /* rgba not supported (IE 8) */
color: rgba(0, 0, 0,0.80); /* rgba supported */
border: none rgba(0, 0, 0, 0); /* IE 9 + everything else */
background-color: #e6e6e6;
text-decoration: none;
border-radius: 2px;
}pure.css：自行新增子模組
同時選取相同字串 – Ctrl + d
pure.css 中的 button.css 把 pure 更改成 btn 並貼在自己的程式碼上。
pure.css：重新認識表單狀態
<input type="text" class="mail" />.mail:focus{
border: 10px solid #000;
outline: 0;
}focus 的事件 聚焦在這在這個欄位上，去觸發CSS裡設定的值。
瀏覽器預設會有淡淡的藍線，如果影響到外觀可以增加 outline: 0; 來拿掉那條線。
修改 placeholder 文字顏色:
placeholder 的話，會使用到 ::placeholder 這個選取器寫法
<p class="demo-1"><input id="demo-1" name="fname" type="text" placeholder="輸入文字"></p>
<p class="demo-2"><input id="demo-2" name="fname" type="text" placeholder="輸入文字"></p>/*webkit瀏覽器專用*/
.demo-2 ::-webkit-input-placeholder { color: red; }
/*Firefox 4-18瀏覽器專用*/
.demo-2 input::-moz-placeholder { color: red; }
/*Firefox 19+瀏覽器專用*/
.demo-2 input::-moz-placeholder{color:red;}
/*IE10瀏覽器專用*/
.demo-2:-ms-input-placeholder{color: red;}pure.css：如何將表單整合至網頁
範例程式碼
<div class="wrap">
<div class="header"></div>
<div class="content">
<div class="form-login">
<h2>六角西餐廳</h2>
<form class="pure-form pure-form-stacked">
<fieldset>
<label for="stacked-email">Email</label>
<input class="form-login-text" type="email" id="stacked-email" placeholder="Email" />
<span class="pure-form-message">This is a required field.</span>
<label for="stacked-password">Password</label>
<input class="form-login-text" type="password" id="stacked-password" placeholder="Password" />
<label for="stacked-remember" class="pure-checkbox">
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</div>
</div>
<div class="footer"></div>
</div>/* CSS RESET */
/* CSS RESET SETTINGS */
/* PURE CSS */
/* CSS STYLES */
.wrap{
max-width: 960px;
margin: 0 auto;
}
.header{
height: 80px;
background: red;
}
.content{
padding: 80px 0;
}
.form-login{
max-width: 375px;
margin: 0 auto;
color: red;
}
.form-login .pure-form-stacked .form-login-text{
margin: 1em 0;
}
.footer{
height: 80px;
background: blue;
}表單設計：文字欄位並非只有「text」
範例程式碼
email： <input type="email"><br>
電話： <input type="tel"><br>
數量： <input type="number"><br>電腦上預覽手機畫面模擬器
- Apple 官方提供的 iOS 模擬器，只要安裝 XCode 就能夠運行
- Windows 可以安裝 Android 模擬器，可以安裝 Android Studio 官方所提供的工具 – emulator
表單設計：文字欄位並非只有「text」-課程補充
「課程補充」
在這邊老師是使用 Mac 的 Xcode 模擬 iPhone 介面，但是這個功能只有在 Mac 上才有，因此這邊建議可以使用 Chrome 瀏覽器來模擬就可以囉。
響應式圖形設計
基礎篇：響應式圖片設計
<img src="img/img.jpg" alt>方法一
img{
width: 100%;
}方法二
img{
max-width: 100%;
}基礎篇：響應式圖片reset 教學
/* img reset */
img{
max-width: 100%;
height: auto;
}心法篇：圖片 SIZE 規劃，刻意設計較大張一點的技巧
滿版圖片大小約600px。
心法篇：判斷圖片使用時機
- Logo 使用 svg 圖片
- bar 上的社群圖片小圖大部分是 png
- banner 使用 jpg 或 png
- list 的圖片可能會用 jpg
SVG 篇：向量圖片介紹
SVG 是向量圖片，不會因為尺寸變大而模糊。
PNG 是點陣圖片，會因為尺寸變大而模糊。
SVG 篇：繪圖軟體匯出 svg 與 png 圖片流程
工具：Illustrator
- svg：用Illustrator 另存新檔，檔案格式選為 svg 格式。
- png：檔案，存儲為網頁用，檔案格式選為 png24 格式。
SVG 篇：將 LOGO 取代為 SVG 格式
<div class="logo">
<a href="#">公司名稱</a>
</div>.logo a{
display: block;
background-image: url(../img/logo.png);
background-image: url(../img/logo.svg);
width: 128px;
height: 128px;
background-size: contain;
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}SVG 篇：將 LOGO 取代為 SVG 格式-課程補充
「課程說明」
補充一下關於「text-indent: 101%; overflow: hidden; white-space: nowrap;」的程式碼意思
text-indent: 101%; 是 CSS 語法的縮排或凸排的語法，概念就跟 Word 的首字凸排或縮排一樣。
overflow: hidden; 當元素超出範圍時，元素就隱藏
white-space: nowrap; 因為文字到達元素最大範圍時，通常會自動換行，但是這邊設置強制不讓它換行。
也因此這三個屬性才能夠達到隱藏文字效果。
技巧篇：Banner 設計 – 縮放圖片原理
<div class="header" style="height: 70px; background: red;"></div>
<div class="banner">
<img src="img/big.png" alt="">
</div>
<!-- 1000*400 比例：10:4 -->
<!-- 500*200 比例：10:4 -->/* img reset */
img{
max-width: 100%:
height: auto;
}需注意的是，表頭加上 banner 上的設計會不會超過裝置的高度或是其他。
PC 和手機上因為裝置寬度不同，圖片大小和強調重點有所不同。
- PC 上因為是大張的圖片，可以呈現的物品比較多。
- 手機上因為是小張的圖片，表達想強調的重點。
以上所說，關於圖片的比例、呈現的東西、以及在各種手機系列的時候，會不會因為 Logo + banner 超過裝置的高度。
技巧篇：Banner 設計 – 背景擷取
範例程式碼
<div class="header"></div>
<div class="banner"></div>.header{
height: 50px;
background: red;
}
.banner{
height: 420px;
background-color: black;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/big.png);
}
@media screen and (max-width: 600px) {
.banner{
background-image: url(../img/small.png);
}程式碼範例：連結
工具篇：tinypng 壓縮圖片服務
tinypng，可以去壓縮圖片的大小。
圖片有去做優化，網站瀏覽品質會比較好一點。
在手機頻寬下，還是可以瀏覽很順暢。
開發響應式網站的時候，優化響應式網頁的載入速度。
常見響應式設計選單
響應式選單常見樣式
3*2
320/3 = 10x px
1字 = 16px
iPhone 320px = 20字
多欄多列式設計細節
- 320px 最小值 – iPhone 5、SE
- 16px * 20 字 = 320px
- 選單數字可能最多4個
- 選單數量盡量不要奇數
- 迷思：想要各種兼容、優化，實際上先抓大方向以滿足顧客要求為主
網頁排版所需時間
- PC web layout 1~2天
- RWD web layout 3~7天
範例程式碼
HTML
<div class="wrap">
<div class="header clearfix">
<div class="logo">
<a href="#">公司名稱</a>
</div>
<ul class="menu">
<li><a href="#">選單內容</a></li>
<li><a href="#">選單2</a></li>
<li><a href="#">選單3</a></li>
<li><a href="#">選單4</a></li>
<li><a href="#">選單5</a></li>
<li><a href="#">選單6</a></li>
</ul>
</div>
<div class="banner"></div>
<ul class="news">
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
</ul>
</div>CSS
/* css reset
============================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-family: 標楷體;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html body div.clear, html body span.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* img reset */
img{
max-width: 100%;
height: auto;
}
/* clearfix */
.clearfix:after{
content: "";
display: table;
clear: both;
}
/* CSS STYLES */
.wrap{
max-width: 1200px;
margin: 0 auto;
line-height: 1.5;
}
.header{
background: pink;
}
.logo{
float: left;
}
.logo a{
display: block;
background-image: url(../img/logo-01.png);
background-image: url(../img/logo-01.svg);
background-repeat: no-repeat;
width: 128px;
height: 56px;
background-size: contain;
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}
.menu{
float: right;
}
.menu li{
float: left;
}
.menu li a{
display: block;
background: slateblue;
color: #fff;
padding: 1em;
text-decoration: none;
}
.menu li a:hover{
background: #000;
}
@media (max-width: 767px){
.logo{
float: none;
}
.logo a{
margin: 0 auto;
}
.menu{
float: none;
}
.menu li{
width: 33.33333%;
text-align: center;
}
.menu li a{
padding: 1em .25em;
}
}
.banner{
height: 420px;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/burger-big.png);
}
@media screen and (max-width: 600px) {
.banner{
background-image: url(../img/burger-small.png)
}
}
.news h2{
color: #000000;
padding: .3em 0;
font-size: 20px;
}
.news li{
width: 31.33333%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1em;
float: left;
}
@media (max-width: 768px){
.news li{
width: 48%;
}
}
@media (max-width: 569px){
.news li{
width: 98%;
}
}漢堡選單設計
最重要的是以下這個語法
<a href="#" class="showmenu">menu</a>範例程式碼
HTML
<div class="wrap">
<div class="header">
<div class="logo">
<a href="#">公司名稱</a>
</div>
<ul class="menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
<li><a href="#">選單四</a></li>
<li><a href="#">選單五</a></li>
<li><a href="#">選單六</a></li>
<li><a href="#">選單七</a></li>
</ul>
<a href="#" class="showmenu">menu</a>
</div>
<div class="banner"></div>
<ul class="news">
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering standards minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the Application Rules)</p>
</li>
</ul>
</div>CSS
/* css reset
============================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-family: 標楷體;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html body div.clear, html body span.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* img reset */
img{
max-width: 100%;
height: auto;
}
/* CSS STYLES */
body{
background: #0f222b;
color: slateblue;
}
a{
color: slateblue;
text-decoration: none;
}
.wrap{
max-width: 1200px;
margin: 0 auto;
line-height: 1.5;
}
.header{
height: 80px;
border-bottom: 1px solid slateblue;
position: relative;
}
.logo{
float: left;
}
.logo a{
display: block;
background-image: url(../img/logo-01.png);
background-image: url(../img/logo-01.svg);
background-repeat: no-repeat;
width: 128px;
height: 50px;
background-size: contain;
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}
.menu{
float: right;
}
.menu li{
float: left;
}
.menu li a{
display: block;
color: slateblue;
padding: 1em;
text-decoration: none;
}
/* 在PC上隱藏漢堡選單 */
.showmenu{
display: none;
}
@media (max-width: 767px){
.menu{
/* 隱藏選單開始 */
max-height: 0px;
overflow: hidden;
/* 隱藏選單結束 */
transition: max-height 2.3s;
margin-top: 1px;
/* 絕對定位疊在網頁上 */
position: absolute;
z-index: 100;
/* header 80px+1px border 線條 */
top: 81px;
left: 0;
right: 0;
background: #0f222b;
}
.menu li{
float: none;
border-bottom: 1px solid slateblue;
}
.menu li a{
transition: all 0.3s;
}
.menu li a:hover{
background: slateblue;
color: #fff;
}
.showmenu{
display: block;
float: right;
margin: 1em;
}
/* jQuery 點擊後動態在 body 加上 class */
.menu-show .menu{
max-height: 500px;
}
}
.banner{
height: 420px;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/burger-big.png);
}
@media screen and (max-width: 600px) {
.banner{
background-image: url(../img/burger-small.png);
}
}
.news h2{
color: #000000;
padding: .3em 0;
font-size: 20px;
}
.news li{
width: 31.33333%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1em;
float: left;
}
@media (max-width: 768px){
.news li{
width: 48%;
}
}
@media (max-width: 569px){
.news li{
width: 98%;
}
}JS
$(document).ready(function () {
$('.showmenu').on('click', function(e){
e.preventDefault();
$('body').toggleClass('menu-show');
});
});固定式選單 (Fixed)
@media (max-width: 767px){
.header{
position: fixed;
width: 100%;
background: #0f222b;
}
.banner{
padding-top: 91px;
}
}Off Canvas 選單設計
範例程式碼
HTML
<div class="wrap">
<div class="container">
<div class="aside">
<a href="#" class="mobile-close">選單關閉</a>
<ul class="menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
<li><a href="#">選單四</a></li>
<li><a href="#">選單五</a></li>
<li><a href="#">選單六</a></li>
<li><a href="#">選單七</a></li>
</ul>
</div>
<div class="main">
<div class="header">
<a href="#" class="mobile-link">選單連結</a>
<div class="logo">
<a href="#">公司名稱</a>
</div>
<ul class="menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
<li><a href="#">選單四</a></li>
<li><a href="#">選單五</a></li>
<li><a href="#">選單六</a></li>
<li><a href="#">選單七</a></li>
</ul>
</div>
<div class="banner"></div>
<ul class="news">
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering
standards
minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the
Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering
standards
minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the
Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering
standards
minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the
Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering
standards
minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the
Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering
standards
minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the
Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering
standards
minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the
Application Rules)</p>
</li>
<li>
<h2>大標題</h2>
<img src="img/big.jpg" alt="">
<p>"It is often said that the pursuance of integrated collection of software engineering
standards
minimizes influnce of The Setting of Functional Event" (Heriberto Millard in The Book of the
Application Rules)</p>
</li>
</ul>
</div>
</div>
</div>CSS
/* css reset
============================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-family: 標楷體;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html body div.clear, html body span.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* img reset */
img{
max-width: 100%;
height: auto;
}
/* CSS STYLES */
body{
background: #0f222b;
color: slateblue;
}
a{
color: slateblue;
text-decoration: none;
}
.wrap{
max-width: 1200px;
margin: 0 auto;
line-height: 1.5;
}
.container{
position: relative;
overflow: hidden;
max-width: 960px;
margin: 0 auto;
}
.mobile-link,.mobile-close{
background: slateblue;
color: #fff;
padding: 5px;
display: inline-block;
margin: 8px;
text-decoration: none;
}
.mobile-link{
display: none;
}
@media (max-width: 768px){
.mobile-link{
display: inline-block;
}
}
.main{
transition: all 0.3s;
}
.header{
height: 50px;
background: red;
}
.header .menu{
float: right;
}
.open .header .menu{
display: none;
}
@media (max-width: 767px){
.header .menu{
display: none;
}
}
.header .menu li{
float: left;
}
.header .menu li a{
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 1em;
display: block;
transition: all .8s;
}
.header .menu li a:hover{
background: orange;
}
.aside{
position: absolute;
top: 0;
bottom: 0;
width: 270px;
height: 100%;
background: yellow;
overflow: hidden;
-webkit-transform: translateX(-270px);
transform: translateX(-270px);
transition: all .3s;
}
/* 增加 class open 觸發選單 */
.open .main{
-webkit-transform: translateX(270px);
transform: translateX(270px);
}
.open .aside{
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.aside .menu li{
margin: 1em;
background: #000;
color: #fff;
}
.aside .menu li a{
color: #fff;
padding: 1em;
display: block;
}
.aside .menu li a:hover{
background: blue;
}
.logo{
float: left;
}
.logo a{
display: block;
background-image: url(../img/logo-01.png);
background-image: url(../img/logo-01.svg);
background-repeat: no-repeat;
width: 128px;
height: 50px;
background-size: contain;
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}
.banner{
height: 420px;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/burger-big.png);
}
@media screen and (max-width: 600px) {
.banner{
background-image: url(../img/burger-small.png);
}
}
.news h2{
color: #000000;
padding: .3em 0;
font-size: 20px;
}
.news li{
width: 31.33333%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1em;
float: left;
}
@media (max-width: 768px){
.news li{
width: 48%;
}
}
@media (max-width: 569px){
.news li{
width: 98%;
}
}JS
$(document).ready(function () {
// 打開左側選單
$('.mobile-link').click(function(event){
$('body').addClass('open');
});
// 關閉左側選單
$('.mobile-close').click(function(event){
$('body').removeClass('open');
});
});選單設計總結
- 多欄多列式設計細節
- 漢堡選單設計
- 固定式選單 (Fixed)
- Off Canvas 選單設計
參考別人的程式碼
Codepen – 關鍵字：responsive menu、offcanvas menu
開始實作前的注意事項
確認你的 media query 設定
/* PC */
/* iPad */
@media (max-width: 768px){
}
/* 介於 iPad 到 Mobile 之間 */
@media (max-width: 767px) and (min-width: 569px){
}
/* iPhone 5 橫式 */
@media (max-width: 568px){
}比較常見的斷點解析度還有
- 480px
- 320px
media 到底要全部寫在一起還是隔離
以 div 的 class 名稱為一組來撰寫，以增加其可讀性。
小技巧：摺疊程式碼，閱讀、修改程式碼比較方便。
請不要習慣寫死高度
.header{
position: relative;
height: 350px;
background: #000;
}
@media (max-width: 768px){
.header{
height: auto;
padding-bottom: 1em;
}
}響應式設計內容高度自適應延伸，絕對不能寫死高度。
最後，讓你的響應式網頁設計更專業
最後一版作業練習
設計 3~4 頁的網頁，首頁、購物車頁、註冊頁、登錄頁。
最後一版作業細節 (多頁設計)
共用的元素，表頭、表尾。
最後一版作業評分標準
一、語意命名設計
- HTML 語意結構設計
- CSS class 命名設計
- head 資訊設計
<head>
<meta charset="UTF-8">
<title>HTML、CSS教學</title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="網站描述文字" />
<meta property="og:title" content="FB的標題" />
<meta property="og:description" content="FB的描述" />
<meta property="og:type" content="website" />
<meta property="og:url" content="FB上的網址" />
<meta property="og:image" content="FB的圖片" />
<link href="圖片路徑" rel="apple-touch-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="CSS檔案路徑">
<script type="text/javascript" src="JS檔案路徑"></script>
</head>二、網頁排版設計
- 圖片細節處理
- 網頁元素設計
- 網頁斷點規劃
三、使用者體驗
- 版型動線規劃
- 圖文排版細節
- 元素點擊便利性
- 載具特性設計 (hover、focus)
綜合建議
PM、Sales、Art、F2E、Backend 之間如何真心合作
業務篇：如何說服客戶導入響應式設計
- 客戶流量 – 數據為王
- 電子商務 – 手機、PC 下單率分庭抗禮
- 優化體驗 – 購物、登入流程
線上服務：StatCounter
iPhone – 單月提升 50% 的訂單量
業務篇：各部門投入人力時程比較
- PM：增加 60% 工作量
- 版型動線規劃
- 客戶討論資訊權重：可以透過 GA 來分析，客戶主要的流量來自於哪幾種裝置(解析度)，以及那些資訊被點擊率比較低，開發 RWD 時可以優先被省略
- 設計：增加 100% 工作量
- 前端(切版)：增加 100% 工作量
- 後端：增加 20% 工作量
企劃篇：為客戶量身打造客製化斷點設計
- 客戶沒有網站 – 以 IOS 系列優先設計
- 客戶擁有網站 – 導入 Google 分析
PM 開給設計師：mobile: 320px、375px、414px、iPad:768px、PC：1024px、1920px，為手機、平板、PC，選擇適合的斷點設計。
企劃篇：開發過程中，你需要與客戶溝通的建置與維護細節
再去做響應式設計的時候，有蠻多的細節會需要是你去跟客戶去討論。
舉例：
- 標籤頁(tabs)，與客戶討論文字大小和標籤頁數量對排版的影響。
- 滿版式的 banner，主視覺的內容、位置，例如：airbnb、uber。
- 漢堡選單(menu-burger)，經由點擊顯示和隱藏內容。
設計網站時，向客戶講解一個原理，並非所有的內容都需要放到手機網頁版型裡。
廣告或插件無法自適應延伸時，那就把他們隱藏起來。
總結，企劃需要溝通的東西非常多，會花相當多的時間在溝通這些細節。
前端篇：設計一套讓客戶能夠自行上稿的 template
在後台去上稿的時候，會用類似 CKEditor 的編輯器，讓客戶去操作。
前端篇：注意網頁載入速度與效能問題
- 先載入 CSS，再載入 JS
- 3秒內畫面至少要先顯示出來，使用 chrome network 內建測試
- 不要放太多自動會跑的動畫效果
全部門：以電子商務網頁版型為例進行探討
- 設計師
- 確認圖片比例、文字字元數
- 確認 desktop、768px、320px
- 向前端、後端討論可行性
- 前端
- 自適應延伸內容文案
- 後端
- 上稿圖片：如果放太大張就自動縮圖成設計師要的大小
- 上稿文字：在後台欄位限制字數
- 企劃
- 吸收設計師、前端、後端所整理出來的細節，並提供上稿細節給客戶
響應式設計要透過部門與部門之間的討論，才可以設計出一個讓客戶好上稿的一個響應式設計平台。
彩蛋課程：Sass、RWD 無痛整合，提升網頁開發效率
Sass+Sublime Text 3 插件安裝
歡迎你來到此章節，
若要開始進行 Sass 教學，為了讓 Sublime Text 3 支援 Sass、Scss 語法，
請安裝 Sass、Scss Plugin
環境篇 – 簡單編譯環境，輕鬆好上手
使用 Applications – prepros
Sass 原理
- CSS 都寫在 SCSS 檔案裡面
all.scss→編譯→all.css
寫法篇 – 減少重工負擔
Sass 提供兩種寫法
CSS
.menu{...}
.menu ul {...}
.menu li {...}
.menu a {...}SCSS
.menu{
ul {...}
li {...}
a {...}
}.header{
width: 50px;
height: 50px;
background: #000;
ul{
width: 500px;
}
li{
height: 30px;
a{
color: #000;
}
}
}SASS
縮排用一個 tab 或兩個空白
.menu
..
ul
..
li
..
a.header
width: 50px
height: 100px
li
width: 100px
ul
height: 100px
color: #000變數篇 – 整合相同設定好幫手
變數(variables)
- 將時常需要設定的 CSS 放在變數來管理
- 變數是用美元符號開頭
$text-color: #f00;
$font-size: 13px;
$width: 960px;
.shop li{
width: $width / 4 編譯出 240px
}實作練習
- 新增一個顏色變數，在scss處多個地方來使用該變數。
- 修改變數色馬，觀察編譯出來的CSS是否都已修改。
$text-color: #f00;
body{
color: $text-color;
}
h1{
color: $text-color;
}常使用在
- 文字顏色、大小
- 主色系
Sass 有支援加減乘除的語法。
Scss 程式碼範例
$linkcolor: #000;
$font-m: 16px;
$font-l: $font-m * 1.2;
$font-s: $font-m * 0.8;
.header a{
color: $linkcolor;
font-size: $font-l;
}
.content a{
color: $linkcolor;
}
.footer a{
color: $linkcolor;
}拆檔篇 – @import: 每隻 Sass 檔專心做一件事情
@import(匯入)
使用@import可將SCSS彙整成一隻檔案
_reset.scss、_base.scss→all.scss→編譯→all.css
加下底線的SCSS是要被合併用的，並沒有要去編譯成CSS
all.scss
@import "reset";
@import "index";_reset.scss
body{
margin: 0;
}_index.scss
.header{
width: 100px;
}工具篇 – @mixin: 將常用語法化簡為自己的知識庫
@Mixin
@Mixin能幫你記住CSS技巧讓你不用再因回想原理而中斷思緒
這些CSS技巧你背得出幾個？
- 圖片取代文字
- 兼容各瀏覽器的 Inline-block的寫法
- 各CSS3語法瀏覽器支援解決方案
- 清除浮動解決方案
- 用CSS畫各方向的三角形
SCSS
@mixin hide-text {
text-indent: 110%;
white-space:nowrap;
overflow: hidden;
}
@mixin clearfix() {
&:before,
&:after {
content: " "; //1
display: table; //2
}
&:after {
clear: both;
}
}
.header h1{
@include hide-text;
}
.bxo{
@include clearfix;
}CSS
.header h1{
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}Sass寫法則是 =hide-text{} .header h1{ +hide-text() }
@Mixin 也可以使用變數
SCSS
@mixin circle($size,$bgcolor) {
border-radius: 50%;
height: $size;
width: $size;
font-size: $size / 3;
background: $bgcolor;
}
.box {
@include circle(30px,#fff)
}載具篇 – @mixin + @content 設計響應式設計超方便
all.scss 程式碼範例
@mixin pad{
@media (max-width: 768px){
@content
}
}
@mixin iphone5{
@media (max-width: 320px){
@content
}
}
.header{
width: 100px;
height: 100px;
@include pad(){
height: auto;
}
@include iphone5(){
height: 30px;
}
a{
color: #000;
@include iphone5(){
display: none;
}
}
}結構篇 – 如何循序漸進優化網頁架構
Sass 結構
第一次寫SCSS建議結構(all.scss)
@import "mixin"; // 所有全域變數與Mixin
@import "reset"; // reset.css
@import "index"; // 首頁
@import "page/.."; // 內頁接著你可以這樣寫(all.scss)
@import "mixin"; // 所有全域變數與Mixin
@import "reset"; // reset.css
@import "layout"; // 共同框架，第一層
@import "module"; // button, form, table
@import "pages/index、pages1、pages2";如果編譯錯誤顯示Undefined mixin, 那就表示你尚未import compass/css 的檔案
其他寫法範例(default.scss)
@import "variable"
@import "reset"
@import "mix"
@import "extent"
@import "layout"
// module
@import "module/button"
@import "module/video"
@import "module/nivo"
// page
@import "page/index"
@import "page/member"
@import "page/product"
@import "page/qa"
@import "page/case"
@import "page/rate"
@import "page/forum"
@import "page/cart"
@import "page/sales"
@import "page/sitemap"
@import "page/other"
@import "page/information"
// @import "page/epaper
@import "inbox"在撰寫的時候，一定是先開始寫些比較初略的架構，到後面經由整合增加才會變得更好、完整。
作業篇 – 試著將作品改成 SASS 架構
- 設定常見變數(顏色、字體大小)
- import 設計
- 變數
- reset
- 斷點 – grid.scss
- layout.scss
- index
- cart
- 區隔出 layout.scss 檔案
- 斷點設計
- page sass 獨立
補充
- fontawesome放進input標籤 – 教學連結
彩蛋課程：視差滾動網頁設計
視差滾動簡介
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
視差滾動 (parallax scrolling) 是一種網站趨勢，滾動時背景內容 (即圖像) 的移動速度不同於前景內容。
視差滾動練習範例
原始範例：Codepen
HTML
viewport
<meta name="viewport" content="width=device-width, initial-scale=1"><div class="wrap">
<nav class="navbar navbar-default ">
<div class="container">
<a href="#" class="logo pull-left">
<span class="hidden-mobile">六角學院</span> 視差滾動範例
</a>
<ul class="nav-menu pull-right clearfix hidden-mobile">
<li><a href="#three-point" class="scrollTop" title="三大重點">
三大重點
</a>
</li>
<li><a href="#skills" class="scrollTop" title="技能熟練度">
技能熟練度
</a>
</li>
<li><a href="#profiles" class="scrollTop" title="個人簡介">
個人簡介
</a>
</li>
</ul>
</div>
</nav>
<section class="header-wrap">
<div class="container h100 relative" id="header-ele">
<div class="header-text text-white bg-gradient1">
<h1 class="">六角學院</h1>
<h2>視差滾動範例</h2>
</div>
<div class="header-img hidden-mobile"> </div>
</div>
</section>
<section id="three-point" class="section bg-white section-rotate box-shadow">
<div class="section-rotate-fixed">
<div class="container p-y-3">
<h2 class="text-center m-b-2">
三大重點
</h2>
<div class="row">
<div class="col-three-one">
<div class="text-center m-y-2">
<span class="fa fa-mobile fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
Fully Responsive
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
<div class="col-three-one">
<div class="text-center m-y-2">
<span class="fa fa-code fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
Easy to learn
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
<div class="col-three-one">
<div class="text-center m-y-2">
<span class="fa fa-html5 fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
HTML + CSS
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
</div>
</div>
</div>
</section>
<section id="skills" class="bg-gradient1 text-white section-rotate">
<div class="section-rotate-fixed">
<div class="container p-y-3">
<h2 class="text-center m-b-2">
技能熟練度
</h2>
<div class="row">
<div class="col-half">
<div class="text-center m-y-2">
<span class="fa fa-code fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
HTML + CSS
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
<div class="col-half">
<div class="m-b-1">
<span><span class="fa fa-html5"></span> HTML</span>
<div class="progress">
<div class="progress-bar" style="width: 85%">
85
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-css3"></span> CSS3</span>
<div class="progress">
<div class="progress-bar" style="width: 85%">
80
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-database"></span> Database</span>
<div class="progress">
<div class="progress-bar" style="width: 75%">
75
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-git"></span> Git</span>
<div class="progress">
<div class="progress-bar" style="width: 60%">
60
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-group"></span> Team work</span>
<div class="progress">
<div class="progress-bar" style="width: 90%">
90
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="profiles" class="p-y-3 section-rotate box-shadow" style="background: url('https://subtlepatterns.com/patterns/restaurant_icons.png');">
<div class="section-rotate-fixed">
<div class="container">
<h2 class="text-center m-b-1">自我簡介</h2>
<div class="row">
<div class="col-half m-b-2">
<h3>Casper</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestiae, perspiciatis deserunt provident tempora iusto quis rem accusantium, accusamus commodi iure aliquid animi cupiditate saepe autem corporis facilis ullam cumque!</p>
<div class="m-t-1 text-right">
<a href="#" class="text-link">
<span class="fa fa-facebook-official fa-2x"></span>
</a>
<a href="#" class="text-link">
<span class="fa fa-twitter-square fa-2x"></span>
</a>
<a href="#" class="text-link">
<span class="fa fa-google-plus-square fa-2x"></span>
</a>
</div>
<p class="text-right">accusamus commodi iure aliquid animi cupiditate saepe<br /> autem corporis facilis ullam cumque!</p>
</div>
<div class="col-half">
<img src="https://images.unsplash.com/photo-1456534231849-7d5fcd82d77b?dpr=2&auto=format&fit=crop&w=750&h=423&q=80&cs=tinysrgb&crop=" alt="" class="img-fluid box-shadow" />
</div>
</div>
</div>
</div>
</section>
<footer class="footer p-y-3 text-right">
<div class="container">
視差滾動範例
</div>
</footer>
</div>
CSS (SCSS)
CSS RESET
// font
$font-family: "Microsoft JhengHei",PMingLiU,MingLiu,"Segoe UI","Helvetica",Garuda,Arial,sans-serif;
$font-size: 16px;
// gutter
$gutter: 15px;
// color
$background-color: #fcfbf5;
$font-color: #333;
$font-color-gray: lighten($font-color, 55%);
$brand-primary: #039dff;
$brand-success: #00CC99;
$brand-accent: #e26789;
$brand-dark: $font-color;
$brand-facebook: #4080ff;
// navbar
$navbar-height: 42px;
// progress
$progress-height: 20px;
// section
$section-gutter: 45px;
// zindex
$navbar-zindex: 1000;
$fab-zindex: 1045;
// breakpoint
$mobile-size: 779px;
//** Base **//
* {
box-sizing: border-box;
}
body, html {
height: 100%;
line-height: 1.5;
font-family: $font-family;
}
h1 {
font-size: $font-size*3;
}
h2 {
font-size: $font-size*2.5;
}
h3 {
font-size: $font-size*2;
}
a {
color: $brand-primary
}
//** Grid **//
.wrap {
overflow: hidden;
background-image: url(https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?dpr=2&auto=format&fit=crop&w=450&h=750&q=50&cs=tinysrgb&crop=);
background-position: center center;
background-size: cover;
}
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px;
}
.row {
margin-left: -15px;
margin-right: -15px;
&:after {
content: "";
display: table;
clear: both;
}
}
.col-half,
.col-three-one,
.col-quarter {
float: left;
padding-left: 15px;
padding-right: 15px;
}
.col-half {
width: 50%;
}
.col-half-center {
margin-left: 25%;
}
.col-three-one {
width: 33.33333%;
}
.col-three-one-center {
margin-left: 33.33333%;
}
.col-quarter {
width: 25%;
}
@media (max-width: $mobile-size) {
.col-half,
.col-three-one,
.col-quarter {
float: none;
width: 100%;
}
.col-half-center, .col-three-one-center {
margin-left: 0;
}
}
//** Navbar **//
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: $navbar-zindex;
&.navbar-bottom {
top: auto;
bottom: 0;
}
}
.navbar-default {
background-color: rgba(black, .75);
box-shadow: 0 0 5px rgba(black, .15)
}
.logo {
display: block;
padding: 12px 16px;
text-decoration: none;
color: white;
font-size: $font-size + 2;
}
.nav-menu {
margin: 0;
list-style: none;
li {
float: left;
}
a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: white;
font-size: $font-size + 2;
&:hover, &:active, &:focus {
background-color: rgba(black, .05);
}
&.active {
box-shadow: 0 -2px 0 $brand-accent inset;
}
}
// style
.nav-accent {
color: white;
background-color: $brand-accent;
&:hover, &:active, &:focus {
color: white;
background-color: darken($brand-accent, 15%);
}
&.active {
box-shadow: 0 -2px 0 darken($brand-accent, 15%) inset;
}
}
}
//** Section **//
.section {
padding: 35px 0;
}
.section-rotate {
transform: rotate(-7deg);
margin-left: -80px;
margin-right: -80px;
padding: 35px 80px 35px 80px;
.section-rotate-fixed {
transform: rotate(7deg);
}
}
//** Progress bar **//
.progress {
height: $progress-height;
overflow: hidden;
background-color: rgba(#fafafa, .45);
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
position: relative;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
font-size: 12px;
line-height: $progress-height;
color: #fff;
text-align: center;
background-color: $brand-accent;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
transition: width 1s ease;
}
//** Partials Header **//
.header-wrap {
height: 600px;
width: 130%;
margin: -10% -15% 0 -15%;
padding-left: 15%;
padding-right: 15%;
padding-top: 10%;
overflow: hidden;
transform: rotate(-7deg);
}
.header-img {
background-image: url(https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2FRWD%2Fman-for-scroll-demo-light.png?alt=media&token=625670d9-4180-434b-a4bd-c1b1db0d0604);
background-position: right 0;
background-size: cover;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.header-text {
padding: 25px 35px;
background-color: #555;
background-image: linear-gradient(45deg, #333, #555);
display: inline-block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
box-shadow: 2px 5px 15px rgba(black, .25);
& > * {
transform: rotate(7deg);
}
}
//** Utilities **//
.clearfix:after {
content: "";
display: table;
clear: both;
}
.h100 {
height: 100%;
}
.v-center {
top: 50%;
transform: translateY(-50%);
position: relative;
}
.relative {
position: relative;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.circle-border {
border: transparent 2px solid;
border-radius: 100%;
}
.border-white {
border-color: white;
}
.bg-darker {
background-color: darken($background-color, 5%);
}
.bg-dark {
background-color: $brand-dark;
}
.bg-white {
background-color: #fff;
}
.text-primary {
color: $brand-primary;
}
.text-success {
color: $brand-success;
}
.text-accent {
color: $brand-accent;
}
.text-white {
color: white;
text-decoration: none;
}
.text-gray {
color: $font-color-gray
}
.text-right {
text-align: right;
}
.block {
display: block;
}
.box-shadow {
position: relative;
&:before {
content: " ";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
box-shadow: 0 0 15px rgba(black, .15);
}
}
// margin
.m-b-0 {
margin-bottom: 0;
}
.m-t-1 {
margin-top: $gutter;
}
.m-t-3 {
margin-top: $gutter*3;
}
.m-b-2 {
margin-bottom: $gutter*2;
}
.m-b-1 {
margin-bottom: $gutter*1;
}
.m-y-1 {
margin-top: $gutter;
margin-bottom: $gutter;
}
.m-y-2 {
margin-top: $gutter*2;
margin-bottom: $gutter*2;
}
.m-y-3 {
margin-top: $gutter*3;
margin-bottom: $gutter*3;
}
.m-x-1 {
margin-left: $gutter;
margin-right: $gutter;
}
.m-x-2 {
margin-left: $gutter*2;
margin-right: $gutter*2;
}
.p-y-1 {
padding-top: $gutter;
padding-bottom: $gutter;
}
.p-y-2 {
padding-top: $gutter * 2;
padding-bottom: $gutter * 2;
}
.p-y-3 {
padding-top: $gutter * 3;
padding-bottom: $gutter * 3;
}
.p-x-3 {
padding-left: $gutter * 3;
padding-right: $gutter * 3;
}
.p-a-3 {
padding: $gutter * 3;
}
// align
.text-center {
text-align: center;
}
// rwd
.img-fluid {
display: block;
max-width: 100%;
height: auto;
}
// hidden
@media (max-width: $mobile-size){
.hidden-mobile {
display: none !important;
}
}
@media (min-width: $mobile-size){
.hidden-desktop {
display: none !important;
}
}
// Gradients
.bg-gradient1 {
background-image: linear-gradient(45deg, #59f0ff, $brand-primary);
}
JS
載入 jQuery cdn
$(document).ready(function(){
});完成範例：Codepen
HTML
viewport
<meta name="viewport" content="width=device-width, initial-scale=1"><div class="wrap">
<nav class="navbar navbar-default ">
<div class="container">
<a href="#" class="logo pull-left">
<span class="hidden-mobile">六角學院</span> 視差滾動範例
</a>
<ul class="nav-menu pull-right clearfix hidden-mobile">
<li><a href="#three-point" class="scrollTop" title="三大重點">
三大重點
</a>
</li>
<li><a href="#skills" class="scrollTop" title="技能熟練度">
技能熟練度
</a>
</li>
<li><a href="#profiles" class="scrollTop" title="個人簡介">
個人簡介
</a>
</li>
</ul>
</div>
</nav>
<section class="header-wrap">
<div class="container h100 relative" id="header-ele">
<div class="header-text text-white bg-gradient1">
<h1 class="">六角學院</h1>
<h2>視差滾動範例</h2>
</div>
<div class="header-img hidden-mobile"> </div>
</div>
</section>
<section id="three-point" class="section bg-white section-rotate box-shadow">
<div class="section-rotate-fixed">
<div class="container p-y-3">
<h2 class="text-center m-b-2">
三大重點
</h2>
<div class="row">
<div class="col-three-one animated">
<div class="text-center m-y-2">
<span class="fa fa-mobile fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
Fully Responsive
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
<div class="col-three-one animated">
<div class="text-center m-y-2">
<span class="fa fa-code fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
Easy to learn
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
<div class="col-three-one animated">
<div class="text-center m-y-2">
<span class="fa fa-html5 fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
HTML + CSS
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
</div>
</div>
</div>
</section>
<section id="skills" class="bg-gradient1 text-white section-rotate">
<div class="section-rotate-fixed">
<div class="container p-y-3">
<h2 class="text-center m-b-2">
技能熟練度
</h2>
<div class="row">
<div class="col-half animated">
<div class="text-center m-y-2">
<span class="fa fa-code fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
HTML + CSS
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut dolorem in autem veniam, nisi repellendus amet a eum laboriosam veritatis doloremque consectetur.</p>
</div>
<div class="col-half">
<div class="m-b-1">
<span><span class="fa fa-html5"></span> HTML</span>
<div class="progress">
<div class="progress-bar" data-progress="85">
85
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-css3"></span> CSS3</span>
<div class="progress">
<div class="progress-bar" data-progress="85">
80
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-database"></span> Database</span>
<div class="progress">
<div class="progress-bar" data-progress="75">
75
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-git"></span> Git</span>
<div class="progress">
<div class="progress-bar" data-progress="60">
60
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-group"></span> Team work</span>
<div class="progress">
<div class="progress-bar" data-progress="90">
90
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="profiles" class="p-y-3 section-rotate box-shadow" style="background: url('https://subtlepatterns.com/patterns/restaurant_icons.png');">
<div class="section-rotate-fixed">
<div class="container">
<h2 class="text-center m-b-1">自我簡介</h2>
<div class="row">
<div class="col-half m-b-2 animated">
<h3>Casper</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestiae, perspiciatis deserunt provident tempora iusto quis rem accusantium, accusamus commodi iure aliquid animi cupiditate saepe autem corporis facilis ullam cumque!</p>
<div class="m-t-1 text-right">
<a href="#" class="text-link">
<span class="fa fa-facebook-official fa-2x"></span>
</a>
<a href="#" class="text-link">
<span class="fa fa-twitter-square fa-2x"></span>
</a>
<a href="#" class="text-link">
<span class="fa fa-google-plus-square fa-2x"></span>
</a>
</div>
<p class="text-right">accusamus commodi iure aliquid animi cupiditate saepe<br /> autem corporis facilis ullam cumque!</p>
</div>
<div class="col-half animated">
<img src="https://images.unsplash.com/photo-1456534231849-7d5fcd82d77b?dpr=2&auto=format&fit=crop&w=750&h=423&q=80&cs=tinysrgb&crop=" alt="" class="img-fluid box-shadow" />
</div>
</div>
</div>
</div>
</section>
<footer class="footer p-y-3 text-right">
<div class="container">
視差滾動範例
</div>
</footer>
</div>
CSS
CSS RESET
// font
$font-family: "Microsoft JhengHei",PMingLiU,MingLiu,"Segoe UI","Helvetica",Garuda,Arial,sans-serif;
$font-size: 16px;
// gutter
$gutter: 15px;
// color
$background-color: #fcfbf5;
$font-color: #333;
$font-color-gray: lighten($font-color, 55%);
$brand-primary: #039dff;
$brand-success: #00CC99;
$brand-accent: #e26789;
$brand-dark: $font-color;
$brand-facebook: #4080ff;
// navbar
$navbar-height: 42px;
// progress
$progress-height: 20px;
// section
$section-gutter: 45px;
// zindex
$navbar-zindex: 1000;
$fab-zindex: 1045;
// breakpoint
$mobile-size: 779px;
//** Base **//
* {
box-sizing: border-box;
}
body, html {
height: 100%;
line-height: 1.5;
font-family: $font-family;
}
h1 {
font-size: $font-size*3;
}
h2 {
font-size: $font-size*2.5;
}
h3 {
font-size: $font-size*2;
}
a {
color: $brand-primary
}
//** Grid **//
.wrap {
overflow: hidden;
background-image: url(https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?dpr=2&auto=format&fit=crop&w=450&h=750&q=50&cs=tinysrgb&crop=);
background-position: bottom center;
background-size: cover;
background-attachment: fixed;
}
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px;
}
.row {
margin-left: -15px;
margin-right: -15px;
&:after {
content: "";
display: table;
clear: both;
}
}
.col-half,
.col-three-one,
.col-quarter {
float: left;
padding-left: 15px;
padding-right: 15px;
}
.col-half {
width: 50%;
}
.col-half-center {
margin-left: 25%;
}
.col-three-one {
width: 33.33333%;
}
.col-three-one-center {
margin-left: 33.33333%;
}
.col-quarter {
width: 25%;
}
@media (max-width: $mobile-size) {
.col-half,
.col-three-one,
.col-quarter {
float: none;
width: 100%;
}
.col-half-center, .col-three-one-center {
margin-left: 0;
}
}
//** Navbar **//
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: $navbar-zindex;
&.navbar-bottom {
top: auto;
bottom: 0;
}
}
.navbar-default {
background-color: rgba(black, .75);
box-shadow: 0 0 5px rgba(black, .15)
}
.logo {
display: block;
padding: 12px 16px;
text-decoration: none;
color: white;
font-size: $font-size + 2;
}
.nav-menu {
margin: 0;
list-style: none;
li {
float: left;
}
a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: white;
font-size: $font-size + 2;
&:hover, &:active, &:focus {
background-color: rgba(black, .05);
}
&.active {
box-shadow: 0 -2px 0 $brand-accent inset;
}
}
// style
.nav-accent {
color: white;
background-color: $brand-accent;
&:hover, &:active, &:focus {
color: white;
background-color: darken($brand-accent, 15%);
}
&.active {
box-shadow: 0 -2px 0 darken($brand-accent, 15%) inset;
}
}
}
//** Section **//
.section {
padding: 35px 0;
}
.section-rotate {
transform: rotate(-7deg);
margin-left: -80px;
margin-right: -80px;
padding: 35px 80px 35px 80px;
.section-rotate-fixed {
transform: rotate(7deg);
}
}
//** Progress bar **//
.progress {
height: $progress-height;
overflow: hidden;
background-color: rgba(#fafafa, .45);
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
position: relative;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
font-size: 12px;
line-height: $progress-height;
color: #fff;
text-align: center;
background-color: $brand-accent;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
transition: width 3s ease;
}
//** Partials Header **//
.header-wrap {
height: 600px;
width: 130%;
margin: -10% -15% 0 -15%;
padding-left: 15%;
padding-right: 15%;
padding-top: 10%;
overflow: hidden;
transform: rotate(-7deg);
}
.header-img {
background-image: url(https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2FRWD%2Fman-for-scroll-demo-light.png?alt=media&token=625670d9-4180-434b-a4bd-c1b1db0d0604);
background-position: right 0;
background-size: cover;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.header-text {
padding: 25px 35px;
background-color: #555;
background-image: linear-gradient(45deg, #333, #555);
display: inline-block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
box-shadow: 2px 5px 15px rgba(black, .25);
& > * {
transform: rotate(7deg);
}
}
//** Utilities **//
.clearfix:after {
content: "";
display: table;
clear: both;
}
.h100 {
height: 100%;
}
.v-center {
top: 50%;
transform: translateY(-50%);
position: relative;
}
.relative {
position: relative;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.circle-border {
border: transparent 2px solid;
border-radius: 100%;
}
.border-white {
border-color: white;
}
.bg-darker {
background-color: darken($background-color, 5%);
}
.bg-dark {
background-color: $brand-dark;
}
.bg-white {
background-color: #fff;
}
.text-primary {
color: $brand-primary;
}
.text-success {
color: $brand-success;
}
.text-accent {
color: $brand-accent;
}
.text-white {
color: white;
text-decoration: none;
}
.text-gray {
color: $font-color-gray
}
.text-right {
text-align: right;
}
.block {
display: block;
}
.box-shadow {
position: relative;
&:before {
content: " ";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
box-shadow: 0 0 15px rgba(black, .15);
}
}
// margin
.m-b-0 {
margin-bottom: 0;
}
.m-t-1 {
margin-top: $gutter;
}
.m-t-3 {
margin-top: $gutter*3;
}
.m-b-2 {
margin-bottom: $gutter*2;
}
.m-b-1 {
margin-bottom: $gutter*1;
}
.m-y-1 {
margin-top: $gutter;
margin-bottom: $gutter;
}
.m-y-2 {
margin-top: $gutter*2;
margin-bottom: $gutter*2;
}
.m-y-3 {
margin-top: $gutter*3;
margin-bottom: $gutter*3;
}
.m-x-1 {
margin-left: $gutter;
margin-right: $gutter;
}
.m-x-2 {
margin-left: $gutter*2;
margin-right: $gutter*2;
}
.p-y-1 {
padding-top: $gutter;
padding-bottom: $gutter;
}
.p-y-2 {
padding-top: $gutter * 2;
padding-bottom: $gutter * 2;
}
.p-y-3 {
padding-top: $gutter * 3;
padding-bottom: $gutter * 3;
}
.p-x-3 {
padding-left: $gutter * 3;
padding-right: $gutter * 3;
}
.p-a-3 {
padding: $gutter * 3;
}
// align
.text-center {
text-align: center;
}
// rwd
.img-fluid {
display: block;
max-width: 100%;
height: auto;
}
// hidden
@media (max-width: $mobile-size){
.hidden-mobile {
display: none !important;
}
}
@media (min-width: $mobile-size){
.hidden-desktop {
display: none !important;
}
}
// Gradients
.bg-gradient1 {
background-image: linear-gradient(45deg, #59f0ff, $brand-primary);
}
// animated
.animated {
opacity: 0;
transition: all 1.5s;
transform: translateY(50px);
}
.fadeIn {
opacity: 1;
transform: translateY(0);
}JS
載入 jQuery cdn
$(document).ready(function(){
var showSkill = false;
$('.scrollTop').click(function(e){
e.preventDefault();
var target = $(this).attr('href');
var targetPos = $(target).offset().top;
$('html, body').animate({scrollTop: targetPos}, 1000);
});
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
var windowHeight = $(window).height();
console.log(scrollPos, windowHeight);
$('.scrollTop').each(function(){
var target = $(this).attr('href');
var targetPos = $(target).offset().top;
var targetHeight = $(target).outerHeight();
if (targetPos - 1 <= scrollPos && (targetPos + targetHeight) > scrollPos){
$('.scrollTop').removeClass('active')
$(this).addClass('active');
} else {
$(this).removeClass('active')
}
});
// progress bar
var skillTop = $('#skills').position().top;
// console.log('skillTop', skillTop);
if (skillTop <= (scrollPos + windowHeight / 2) && !showSkill) {
showSkill = true;
$('#skills .progress-bar').each(function(){
var thisValue = $(this).data('progress');
console.log('thisValue', thisValue);
$(this).css('width', thisValue + '%');
});
}
// animated
$('.animated').each(function(){
var thisPos = $(this).offset().top;
if((windowHeight + scrollPos) >= thisPos) {
$(this).addClass('fadeIn');
}
});
// bg scroll
$('#profiles').css('background-position-y', -(scrollPos / 2) + 'px')
$('#header-ele').css('transform', 'translateY( ' + (scrollPos / 2) + 'px )')
});
});視差滾動基本環境介紹
CSS 是用 SCSS 所撰寫，用到 CSS 變數、CSS 巢狀。
HTML 分為幾個部分，
navbar，注意的地方是三個連結有對應的區塊，a連結 href 對應到 id 的地方，header，可以參考 SCSS 如何寫的，三大重點的地方有一些 icon 是用 fontawesome 去做的，排版的方式是用 CSS Grid 的概念去排版，技能熟練度的 progress-bar 進度條會在滾動到這個區塊的時候才把進度調顯示出來，顯示的方式是用 style 的寬度經由 JavaScript 的方式載入進來，自我簡介的部分，一張圖片和較淡的背景圖，在滾動的時候背景圖會往另外一個方向移動，另外這整個背景是一張大的背景圖，到時候會把它固定在頁面上。
Codepen 的設定，
HTML 的地方加入 RWD 的 viewport，CSS 的部分，CSS Preprocessor 使用 SCSS、CSS Base 使用 RESET、載入 fontawesome cdn，JavaScript 載入 jQuery cdn，codepen changeview 有不同頁面的顯示方式、Chrome 檢查，可查看不同裝置下的畫面顯示，行動版把選單、人物隱藏，其他部分改成一欄的樣式。
想要有一個自己版本的練習檔案，使用 Codepen fork 產生一個新的連結給你。
CSS 固定背景的手法
SCSS
//** Grid **//
.wrap{
overflow: hidden;
background-image: url(圖片位置);
background-position: bottom center;
/* 背景大小使用 cover 剛好充滿全畫面 */
background-size: cover;
/* CSS 固定背景 */
background-attachment: fixed;
}一頁式宣傳頁常用的選單滑動效果
程式碼範例
JS
$(document).ready(function () {
// 一頁式宣傳常用的選單滑動效果
$('.scrollTop').click(function(e){
// 取消事件的預設行為
e.preventDefault();
// 用 alert 確定選單是否有效果
// alert('a');
// 讀取 href 的值
var target = $(this).attr('href');
// alert(target);
// console.log(target);
// 取出這些 ID 的位置
var targetPos = $(target).offset().top;
// console.log(target, targetPos);
$('html, body').animate({scrollTop: targetPos}, 1000);
});
// 滾動視差核心內容，滾動的時候讀取出目前滾動的位置
$(window).scroll(function(){
// console.log('scroll');
// 把滾動的值存在 scrollPos 裡面
var scrollPos = $(window).scrollTop();
// console.log(scrollPos);
// 滾動到指定的區域的時候，把 active 效果加到選單上面
// each 就是說每次滾動都把三個值都讀出來
$('.scrollTop').each(function(){
// 目標的 href
var target = $(this).attr('href');
// 目標的位置
var targetPos = $(target).offset().top;
// 目標的高度
// outerHeight 的意思是連 padding 的外框範圍都讀進來
var targetHeight = $(target).outerHeight();
// console.log(target, targetPos, targetHeight);
// 定義一個範圍，在範圍內的時候經由判斷，加入指定的 class
// 誤差補上 -1
if (targetPos - 1 <= scrollPos && (targetPos + targetHeight) > scrollPos){
// console.log(target);
// 先移除 active，再加上 active，在範圍外 else 移除 active
$('.scrollTop').removeClass('active');
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
});動態顯示的進度條
HTML 使用 data-progress=” “
HTML
<div class="col-half">
<div class="m-b-1">
<span><span class="fa fa-html5"></span> HTML</span>
<div class="progress">
<div class="progress-bar" data-progress="85">
85
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-css3"></span> CSS3</span>
<div class="progress">
<div class="progress-bar" data-progress="80">
80
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-database"></span> Database</span>
<div class="progress">
<div class="progress-bar" data-progress="75">
75
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-git"></span> Git</span>
<div class="progress">
<div class="progress-bar" data-progress="60">
60
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-group"></span> Team work</span>
<div class="progress">
<div class="progress-bar" data-progress="90">
90
</div>
</div>
</div>
</div>CSS (SCSS)
.progress-bar{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
font-size: 12px;
line-height: $progress-height;
color: #fff;
text-align: center;
background-color: $brand-accent;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
/* 需加入 transition 才會有動態效果 */
/* 秒數數值修改動畫速率 */
transition: width 3s ease;
}JS
$(document).ready(function () {
// 為了避免事件的重複觸發
var showSkill = false;
// 一頁式宣傳常用的選單滑動效果
$('.scrollTop').click(function(e){
// 取消事件的預設行為
e.preventDefault();
// 用 alert 確定選單是否有效果
// alert('a');
// 讀取 href 的值
var target = $(this).attr('href');
// alert(target);
// console.log(target);
// 取出這些 ID 的位置
var targetPos = $(target).offset().top;
// console.log(target, targetPos);
$('html, body').animate({scrollTop: targetPos}, 1000);
});
// 滾動視差核心內容，滾動的時候讀取出目前滾動的位置
$(window).scroll(function(){
// console.log('scroll');
// 把滾動的值存在 scrollPos 裡面
var scrollPos = $(window).scrollTop();
// 新增一個變數，把整個視窗的高度讀出來
var windowHeight = $(window).height();
// console.log(scrollPos, windowHeight);
// console.log(scrollPos);
// 滾動到指定的區域的時候，把 active 效果加到選單上面
// each 就是說每次滾動都把三個值都讀出來
$('.scrollTop').each(function(){
// 目標的 href
var target = $(this).attr('href');
// 目標的位置
var targetPos = $(target).offset().top;
// 目標的高度
// outerHeight 的意思是連 padding 的外框範圍都讀進來
var targetHeight = $(target).outerHeight();
// console.log(target, targetPos, targetHeight);
// 定義一個範圍，在範圍內的時候經由判斷，加入指定的 class
// 誤差補上 -1
if (targetPos - 1 <= scrollPos && (targetPos + targetHeight) > scrollPos){
// console.log(target);
//先移除 active，再加上 active，在範圍外 else 移除 active
$('.scrollTop').removeClass('active');
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// progress bar
// 把技能熟練度這個區域定義起來，讀出這個區塊的高度在哪裡
var skillTop = $('#skills').position().top;
console.log('skillTop', skillTop);
// 用 if 來判斷，它的 scroll 的位置有沒有到我們指定的地方就觸發
// 使用 windowHeight / 2 讓技能熟練度在畫面的一半就會顯示出來
if (skillTop <= (scrollPos + windowHeight / 2) && !showSkill){
// 當變成 true 的時候就不會跑第二次
showSkill = true;
// console.log('Skill');
// each 把裡面的 progress bar 都執行一次
$('#skills .progress-bar').each(function(){
// 把 data-progress 裡面的數值讀出來
var thisValue = $(this).data('progress');
// console.log('thisValue', thisValue);
$(this).css('width', thisValue + '%');
});
}
});
});滾動套用 CSS 效果
HTML 需要動畫效果的區域，加上 class 名稱 animated
CSS (SCSS)
// animated
.animated{
// 透明度的隱藏方式
opacity: 0;
transition: all 1.5s;
transform: translateY(50px);
}
.fadeIn{
opacity: 1;
transform: translateY(0);
}JS
$(document).ready(function () {
// 為了避免事件的重複觸發
var showSkill = false;
// 一頁式宣傳常用的選單滑動效果
$('.scrollTop').click(function(e){
// 取消事件的預設行為
e.preventDefault();
// 用 alert 確定選單是否有效果
// alert('a');
// 讀取 href 的值
var target = $(this).attr('href');
// alert(target);
// console.log(target);
// 取出這些 ID 的位置
var targetPos = $(target).offset().top;
// console.log(target, targetPos);
$('html, body').animate({scrollTop: targetPos}, 1000);
});
// fadeIn 測試使用
// $('.animated').click(function(){
// $(this).addClass('fadeIn');
// });
// 滾動視差核心內容，滾動的時候讀取出目前滾動的位置
$(window).scroll(function(){
// console.log('scroll');
// 把滾動的值存在 scrollPos 裡面
var scrollPos = $(window).scrollTop();
// 新增一個變數，把整個視窗的高度讀出來
var windowHeight = $(window).height();
// console.log(scrollPos, windowHeight);
// console.log(scrollPos);
// 滾動到指定的區域的時候，把 active 效果加到選單上面
// each 就是說每次滾動都把三個值都讀出來
$('.scrollTop').each(function(){
// 目標的 href
var target = $(this).attr('href');
// 目標的位置
var targetPos = $(target).offset().top;
// 目標的高度
// outerHeight 的意思是連 padding 的外框範圍都讀進來
var targetHeight = $(target).outerHeight();
// console.log(target, targetPos, targetHeight);
// 定義一個範圍，在範圍內的時候經由判斷，加入指定的 class
// 誤差補上 -1
if (targetPos - 1 <= scrollPos && (targetPos + targetHeight) > scrollPos){
// console.log(target);
//先移除 active，再加上 active，在範圍外 else 移除 active
$('.scrollTop').removeClass('active');
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// progress bar
// 把技能熟練度這個區域定義起來，讀出這個區塊的高度在哪裡
var skillTop = $('#skills').position().top;
console.log('skillTop', skillTop);
// 用 if 來判斷，它的 scroll 的位置有沒有到我們指定的地方就觸發
// 使用 windowHeight / 2 讓技能熟練度在畫面的一半就會顯示出來
if (skillTop <= (scrollPos + windowHeight / 2) && !showSkill){
// 當變成 true 的時候就不會跑第二次
showSkill = true;
// console.log('Skill');
// each 把裡面的 progress bar 都執行一次
$('#skills .progress-bar').each(function(){
// 把 data-progress 裡面的數值讀出來
var thisValue = $(this).data('progress');
// console.log('thisValue', thisValue);
$(this).css('width', thisValue + '%');
});
}
// animated 滾動套用 CSS 效果
$('.animated').each(function(){
var thisPos = $(this).offset().top;
// console.log('animated', thisPos);
if((windowHeight + scrollPos) >= thisPos){
// console.log('animated')
$(this).addClass('fadeIn');
}
});
});
});滾動中持續改變物件位置 (CSS transform)
bg scroll 消耗效能
JS
$(document).ready(function () {
// 為了避免事件的重複觸發
var showSkill = false;
// 一頁式宣傳常用的選單滑動效果
$('.scrollTop').click(function(e){
// 取消事件的預設行為
e.preventDefault();
// 用 alert 確定選單是否有效果
// alert('a');
// 讀取 href 的值
var target = $(this).attr('href');
// alert(target);
// console.log(target);
// 取出這些 ID 的位置
var targetPos = $(target).offset().top;
// console.log(target, targetPos);
$('html, body').animate({scrollTop: targetPos}, 1000);
});
// fadeIn 測試使用
// $('.animated').click(function(){
// $(this).addClass('fadeIn');
// });
// 滾動視差核心內容，滾動的時候讀取出目前滾動的位置
$(window).scroll(function(){
// console.log('scroll');
// 把滾動的值存在 scrollPos 裡面
var scrollPos = $(window).scrollTop();
// 新增一個變數，把整個視窗的高度讀出來
var windowHeight = $(window).height();
// console.log(scrollPos, windowHeight);
// console.log(scrollPos);
// 滾動到指定的區域的時候，把 active 效果加到選單上面
// each 就是說每次滾動都把三個值都讀出來
$('.scrollTop').each(function(){
// 目標的 href
var target = $(this).attr('href');
// 目標的位置
var targetPos = $(target).offset().top;
// 目標的高度
// outerHeight 的意思是連 padding 的外框範圍都讀進來
var targetHeight = $(target).outerHeight();
// console.log(target, targetPos, targetHeight);
// 定義一個範圍，在範圍內的時候經由判斷，加入指定的 class
// 誤差補上 -1
if (targetPos - 1 <= scrollPos && (targetPos + targetHeight) > scrollPos){
// console.log(target);
//先移除 active，再加上 active，在範圍外 else 移除 active
$('.scrollTop').removeClass('active');
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// progress bar
// 把技能熟練度這個區域定義起來，讀出這個區塊的高度在哪裡
var skillTop = $('#skills').position().top;
console.log('skillTop', skillTop);
// 用 if 來判斷，它的 scroll 的位置有沒有到我們指定的地方就觸發
// 使用 windowHeight / 2 讓技能熟練度在畫面的一半就會顯示出來
if (skillTop <= (scrollPos + windowHeight / 2) && !showSkill){
// 當變成 true 的時候就不會跑第二次
showSkill = true;
// console.log('Skill');
// each 把裡面的 progress bar 都執行一次
$('#skills .progress-bar').each(function(){
// 把 data-progress 裡面的數值讀出來
var thisValue = $(this).data('progress');
// console.log('thisValue', thisValue);
$(this).css('width', thisValue + '%');
});
}
// animated 滾動套用 CSS 效果
$('.animated').each(function(){
var thisPos = $(this).offset().top;
// console.log('animated', thisPos);
if((windowHeight + scrollPos) >= thisPos){
// console.log('animated')
$(this).addClass('fadeIn');
}
});
// bg scroll 滾動中持續改變物件位置 (CSS transform)
$('#profiles').css('background-position-y', -(scrollPos / 2) + 'px');
$('#header-ele').css('transform', 'translateY( ' + (scrollPos / 2) + 'px )');
});
});程式碼範例
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滾動視差(parallax scrolling)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<nav class="navbar navbar-default">
<div class="container">
<a href="#" class="logo pull-left">
<span class="hidden-mobile">六角學院</span> 視差滾動範例
</a>
<ul class="nav-menu pull-right clearfix hidden-mobile">
<li>
<a href="#three-point" class="scrollTop" title="三大重點">
三大重點
</a>
</li>
<li>
<a href="#skills" class="scrollTop" title="技能熟練度">
技能熟練度
</a>
</li>
<li>
<a href="#profiles" class="scrollTop" title="個人簡介">
個人簡介
</a>
</li>
</ul>
</div>
</nav>
<section class="header-wrap">
<div class="container h100 relative" id="header-ele">
<div class="header-text text-white bg-gradient1">
<h1 class="">六角學院</h1>
<h2>視差滾動範例</h2>
</div>
<div class="header-img hidden-mobile"></div>
</div>
</section>
<section id="three-point" class="section bg-white section-rotate box-shadow">
<div class="section-rotate-fixed">
<div class="container p-y-3">
<h2 class="text-center m-b-2">
三大重點
</h2>
<div class="row">
<div class="col-three-one animated">
<div class="text-center m-y-2">
<span class="fa fa-mobile fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
Fully Responsive
</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis, adipisci neque nostrum facere officiis laborum quas voluptatibus a et, nihil dolore? Iusto eos fugit culpa officiis. Soluta doloremque odit dicta?</p>
</div>
<div class="col-three-one animated">
<div class="text-center m-y-2">
<span class="fa fa-code fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
Easy to learn
</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore perspiciatis esse unde iste quidem tempore similique rerum corporis explicabo dicta incidunt, nostrum quaerat dolorum quisquam numquam aperiam, architecto velit sapiente.</p>
</div>
<div class="col-three-one animated">
<div class="text-center m-y-2">
<span class="fa fa-html5 fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
HTML + CSS
</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut dicta neque nesciunt quos, libero nostrum rem temporibus culpa veritatis aperiam odio quae natus amet architecto, illum quasi dolorem obcaecati quam.</p>
</div>
</div>
</div>
</div>
</section>
<section id="skills" class="bg-gradient1 text-white section-rotate">
<div class="section-rotate-fixed">
<div class="container p-y-3">
<h2 class="text-center m-b-2">
技巧熟練度
</h2>
<div class="row">
<div class="col-half animated">
<div class="text-center m-y-2">
<span class="fa fa-code fa-5x"></span>
</div>
<h3 class="text-center m-y-1">
HTML + CSS
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam maxime exercitationem veritatis aliquam, asperiores dignissimos ducimus vel soluta qui nihil illum pariatur? Dolor quos alias tenetur, modi sapiente earum ullam.</p>
</div>
<div class="col-half">
<div class="m-b-1">
<span><span class="fa fa-html5"></span> HTML</span>
<div class="progress">
<div class="progress-bar" data-progress="85">
85
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-css3"></span> CSS3</span>
<div class="progress">
<div class="progress-bar" data-progress="80">
80
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-database"></span> Database</span>
<div class="progress">
<div class="progress-bar" data-progress="75">
75
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-git"></span> Git</span>
<div class="progress">
<div class="progress-bar" data-progress="60">
60
</div>
</div>
</div>
<div class="m-b-1">
<span><span class="fa fa-group"></span> Team work</span>
<div class="progress">
<div class="progress-bar" data-progress="90">
90
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="profiles" class="p-y-3 section-rotate box-shadow" style="background:url('https://subtlepatterns.com/patterns/restaurant_icons.png')";>
<div class="section-rotate-fixed">
<div class="container">
<h2 class="text-center m-b-1">自我簡介</h2>
<div class="row">
<div class="col-half m-b-2 animated">
<h3>Casper</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio ut perspiciatis laudantium natus debitis? Quos perferendis voluptatem ratione architecto officiis laboriosam, expedita saepe libero aspernatur quibusdam quod dignissimos tenetur! Officiis!</p>
<div class="m-t-1 text-right">
<a href="#" class="text-link">
<span class="fa fa-facebook-official fa-2x"></span>
</a>
<a href="#" class="text-link">
<span class="fa fa-twitter-square fa-2x"></span>
</a>
<a href="#" class="text-link">
<span class="fa fa-google-plus-square fa-2x"></span>
</a>
</div>
<p class="text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora reprehenderit similique sequi<br> recusandae impedit possimus? Ipsum quidem nobis, ex, ea corporis consequatur pariatur nostrum eos nihil aspernatur minima sequi? Rerum.</p>
</div>
<div class="col-half animated">
<img src="https://images.unsplash.com/photo-1456534231849-7d5fcd82d77b?dpr=2&auto=format&fit=crop&w=750&h=423&q=80&cs=tinysrgb&crop=" alt="" class="img-fluid box-shadow">
</div>
</div>
</div>
</div>
</section>
<footer class="footer p-y-3 text-right">
<div class="container">
視差滾動範例
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/all.js"></script>
</body>
</html>CSS (SCSS)
/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS STYLES */
// font
$font-family: "Microsoft JhengHei",PMingLiU,MingLiu,"Segoe UI","Helvetica",Garuda,Arial,sans-serif;
$font-size: 16px;
// gutter
$gutter: 15px;
// color
$background-color: #fcfbf5;
$font-color: #333;
$font-color-gray: lighten($font-color, 55%);
$brand-primary: #039dff;
$brand-success: #00cc99;
$brand-accent: #e26789;
$brand-dark: $font-color;
$brand-facebook: #4080ff;
// navbar
$navbar-height: 42px;
// progress
$progress-height: 20px;
// section
$section-gutter: 45px;
// zindex
$navbar-zindex: 1000;
$fab-zindex: 1045;
// breakpoint
$mobile-size: 779px;
//** Base **//
*{
box-sizing: border-box;
}
body, html{
height: 100%;
line-height: 1.5;
font-family: $font-family;
}
h1{
font-size: $font-size*3;
}
h2{
font-size: $font-size*2.5;
}
h3{
font-size: $font-size*2;
}
a{
color: $brand-primary;
}
//** Grid **//
.wrap{
overflow: hidden;
background-image: url(https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?dpr=2&auto=format&fit=crop&w=450&h=750&q=50&cs=tinysrgb&crop=);
background-position: bottom center;
background-size: cover;
/* CSS 固定背景 */
background-attachment: fixed;
}
.container{
max-width: 1140px;
margin: 0 auto;
padding: 0 15px;
}
.row{
margin-left: -15px;
margin-right: -15px;
&:after{
content: "";
display: table;
clear: both;
}
}
.col-half,
.col-three-one,
.col-quarter{
float: left;
padding-left: 15px;
padding-right: 15px;
}
.col-half{
width: 50%;
}
.col-half-center{
margin-left: 25%;
}
.col-three-one{
width: 33.33333%;
}
.col-three-one-center{
margin-left: 33.33333%;
}
.col-quarter{
width: 25%;
}
@media (max-width: $mobile-size){
.col-half,
.col-three-one,
.col-quarter{
float: none;
width: 100%;
}
.col-half-center, .col-three-one-center{
margin-left: 0;
}
}
//** Navbar **//
.navbar{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: $navbar-zindex;
&.navbar-bottom{
top: auto;
bottom: 0;
}
}
.navbar-default{
background-color: rgba(black, .75);
box-shadow: 0 0 5px rgba(black,.15);
}
.logo{
display: block;
padding: 12px 16px;
text-decoration: none;
color: white;
font-size: $font-size + 2;
}
.nav-menu{
margin: 0;
list-style: none;
li{
float: left;
}
a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: white;
font-size: $font-size + 2;
&:hover, &:active, &:focus{
background-color: rgba(black, .05);
}
&.active{
box-shadow: 0 -2px 0 $brand-accent inset;
}
}
}
// style
.nav-accent{
color: white;
background-color: $brand-accent;
&:hover, &:active, &:focus{
color: white;
background-color: darken($brand-accent, 15%);
}
&.active{
box-shadow: 0 -2px 0 darken($brand-accent, 15%) inset;
}
}
//** Section **//
.section{
padding: 35px 0;
}
.section-rotate{
transform: rotate(-7deg);
margin-left: -80px;
margin-right: -80px;
padding: 35px 80px 35px 80px;
.section-rotate-fixed{
transform: rotate(7deg);
}
}
//** Progress bar **//
.progress{
height: $progress-height;
overflow: hidden;
background-color: rgba(#fafafa, .45);
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
position: relative;
}
.progress-bar{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
font-size: 12px;
line-height: $progress-height;
color: #fff;
text-align: center;
background-color: $brand-accent;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
/* 需要加入 transition 才會有動態效果 */
/* 秒數數值修改動畫速率 */
transition: width 3s ease;
}
//** Partials Header **//
.header-wrap{
height: 600px;
width: 130%;
margin: -10% -15% 0 -15%;
padding-left: 15%;
padding-right: 15%;
padding-top: 10%;
overflow: hidden;
transform: rotate(-7deg);
}
.header-img{
background-image: url(https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2FRWD%2Fman-for-scroll-demo-light.png?alt=media&token=625670d9-4180-434b-a4bd-c1b1db0d0604);
background-position: right 0;
background-size: cover;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.header-text{
padding: 25px 35px;
background-color: #555;
background-image: linear-gradient(45deg, #333, #555);
display: inline-block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
box-shadow: 2px 5px 15px rgba(black, .25);
& > *{
transform: rotate(7deg);
}
}
//** Utilities - 通用類別 **//
.clearfix:after{
content: "";
display: table;
clear: both;
}
.h100{
height: 100%;
}
.v-center{
top: 50%;
transform: translateY(-50%);
position: relative;
}
.relative{
position: relative;
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.circle-border{
border: transparent 2px solid;
border-radius: 100%;
}
.border-white{
border-color: white;
}
.bg-darker{
background-color: darken($background-color, 5%);
}
.bg-dark{
background-color: $brand-dark;
}
.bg-white{
background-color: #fff;
}
.text-primary{
color: $brand-primary;
}
.text-success{
color: $brand-success;
}
.text-accent{
color: $brand-accent;
}
.text-white{
color: white;
text-decoration: none;
}
.text-gray{
color: $font-color-gray;
}
.text-right{
text-align: right;
}
.block{
display: block;
}
.box-shadow{
position: relative;
&:before{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
box-shadow: 0 0 15px rgba(black, .15);
}
}
// margin
.m-b-0{
margin-bottom: 0;
}
.m-t-1{
margin-top: $gutter;
}
.m-t-3{
margin-top: $gutter*3;
}
.m-b-2{
margin-bottom: $gutter*2;
}
.m-b-1{
margin-bottom: $gutter;
}
.m-y-1{
margin-top: $gutter;
margin-bottom: $gutter;
}
.m-y-2{
margin-top: $gutter*2;
margin-bottom: $gutter*2;
}
.m-y-3{
margin-top: $gutter*3;
margin-bottom: $gutter*3;
}
.m-x-1{
margin-left: $gutter;
margin-right: $gutter;
}
.m-x-2{
margin-left: $gutter*2;
margin-right: $gutter*2;
}
.p-y-1{
padding-top: $gutter;
padding-bottom: $gutter;
}
.p-y-2{
padding-top: $gutter * 2;
padding-bottom: $gutter * 2;
}
.p-y-3{
padding-top: $gutter * 3;
padding-bottom: $gutter * 3;
}
.p-x-3{
padding-left: $gutter * 3;
padding-right: $gutter * 3;
}
.p-a-3{
padding: $gutter * 3;
}
// align
.text-center{
text-align: center;
}
// rwd
.img-fluid{
display: block;
max-width: 100%;
height: auto;
}
// hidden
@media (max-width: $mobile-size){
.hidden-mobile{
display: none !important;
}
}
@media (min-width: $mobile-size){
.hidden-desktop{
display: none !important;
}
}
// Gradients
.bg-gradient1{
background-image: linear-gradient(45deg, #59f0ff, $brand-primary);
}
// animated
.animated{
// 透明度的隱藏方式
opacity: 0;
transition: all 1.5s;
transform: translateY(50px);
}
.fadeIn{
opacity: 1;
transform: translateY(0);
}JS
$(document).ready(function () {
// 為了避免事件的重複觸發
var showSkill = false;
// 一頁式宣傳常用的選單滑動效果
$('.scrollTop').click(function(e){
// 取消事件的預設行為
e.preventDefault();
// 用 alert 確定選單是否有效果
// alert('a');
// 讀取 href 的值
var target = $(this).attr('href');
// alert(target);
// console.log(target);
// 取出這些 ID 的位置
var targetPos = $(target).offset().top;
// console.log(target, targetPos);
$('html, body').animate({scrollTop: targetPos}, 1000);
});
// fadeIn 測試使用
// $('.animated').click(function(){
// $(this).addClass('fadeIn');
// });
// 滾動視差核心內容，滾動的時候讀取出目前滾動的位置
$(window).scroll(function(){
// console.log('scroll');
// 把滾動的值存在 scrollPos 裡面
var scrollPos = $(window).scrollTop();
// 新增一個變數，把整個視窗的高度讀出來
var windowHeight = $(window).height();
// console.log(scrollPos, windowHeight);
// console.log(scrollPos);
// 滾動到指定的區域的時候，把 active 效果加到選單上面
// each 就是說每次滾動都把三個值都讀出來
$('.scrollTop').each(function(){
// 目標的 href
var target = $(this).attr('href');
// 目標的位置
var targetPos = $(target).offset().top;
// 目標的高度
// outerHeight 的意思是連 padding 的外框範圍都讀進來
var targetHeight = $(target).outerHeight();
// console.log(target, targetPos, targetHeight);
// 定義一個範圍，在範圍內的時候經由判斷，加入指定的 class
// 誤差補上 -1
if (targetPos - 1 <= scrollPos && (targetPos + targetHeight) > scrollPos){
// console.log(target);
//先移除 active，再加上 active，在範圍外 else 移除 active
$('.scrollTop').removeClass('active');
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// progress bar
// 把技能熟練度這個區域定義起來，讀出這個區塊的高度在哪裡
var skillTop = $('#skills').position().top;
console.log('skillTop', skillTop);
// 用 if 來判斷，它的 scroll 的位置有沒有到我們指定的地方就觸發
// 使用 windowHeight / 2 讓技能熟練度在畫面的一半就會顯示出來
if (skillTop <= (scrollPos + windowHeight / 2) && !showSkill){
// 當變成 true 的時候就不會跑第二次
showSkill = true;
// console.log('Skill');
// each 把裡面的 progress bar 都執行一次
$('#skills .progress-bar').each(function(){
// 把 data-progress 裡面的數值讀出來
var thisValue = $(this).data('progress');
// console.log('thisValue', thisValue);
$(this).css('width', thisValue + '%');
});
}
// animated 滾動套用 CSS 效果
$('.animated').each(function(){
var thisPos = $(this).offset().top;
// console.log('animated', thisPos);
if((windowHeight + scrollPos) >= thisPos){
// console.log('animated')
$(this).addClass('fadeIn');
}
});
// bg scroll 滾動中持續改變物件位置 (CSS transform)
$('#profiles').css('background-position-y', -(scrollPos / 2) + 'px');
$('#header-ele').css('transform', 'translateY( ' + (scrollPos / 2) + 'px )');
});
});