【100sites #008】Showcase,單頁式網站設計展示我的作品集

Posted by Eason Chang on 2016-03-20

Showcase,單頁式網站設計,展示我的網站練習作品集

一句話摘要:我的第一份單頁式網站

點我玩玩Showcase線上Demo

點我查看Showcase的Github程式碼

螢幕快照 2016-03-21 上午2.07.29.png

我一直很想要學習如何設計單頁式網站,於是今天的100sites的題目就是單頁式網站設計啦!

我找到了一份不錯的教學,PJCHENder愛分享 - jQuery學習筆記 第八堂-1第八堂-2,手把手教你如何做出一個簡單的單頁式網站。

於是我照著他的教學一步一腳印地學習,完成以後改改圖、加些文字、連結、與遮罩,就成為了今天的成品Showcase啦!

Showcase比較特別的地方除了單頁式網站設計以外,就是毛玻璃和黑色遮色片的效果了,這兩個效果都是用CSS做的。

毛玻璃效果(px數值大小可以隨你想要的模糊程度做調整):

1
2
3
4
5
-moz-filter: blur(4px);
-webkit-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);

黑色遮色片效果則是加了一個class為cover的div,設定background-color以及opacity來達成效果:

1
2
3
4
5
6
7
8
9
.cover {
height: 100vh;
width: 100vw;
position: fixed;
top: 0px;
background-color: #333;
opacity: 0.6;
z-index: 1;
}

下面附上完整程式碼:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Showcase</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="showcase.js"></script>
<link rel="stylesheet" type="text/css" href="showcase.css">
</head>

<body>
<div class="container">
<div class="nav">
<ul>
<li style="background-color:#46dd46"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="info">
<h2>#001</h2>
<h1>Timer</h1>
<a href="http://kamigami55.github.io/100sites/001_Timer/timer.html">Demo</a>
</div>
<div class="p1 picture"></div>
<div class="info">
<h2>#002</h2>
<h1>Pomodoro</h1>
<a href="http://kamigami55.github.io/100sites/002_Pomodoro/pomodoro.html">Demo</a>
</div>
<div class="p2 picture"></div>
<div class="info">
<h2>#003</h2>
<h1>Todolist</h1>
<a>/* Demo Preparing */</a>
</div>
<div class="p3 picture"></div>
<div class="info">
<h2>#004</h2>
<h1>Fireworks</h1>
<a href="http://kamigami55.github.io/100sites/004_Firework/">Demo</a>
</div>
<div class="p4 picture"></div>
<div class="info">
<h2>#005</h2>
<h1>Drawer</h1>
<a href="http://kamigami55.github.io/100sites/005_Drawer/">Demo</a>
</div>
<div class="p5 picture"></div>
<div class="info">
<h2>#006</h2>
<h1>Snack</h1>
<a href="http://kamigami55.github.io/100sites/006_Snack/">Demo</a>
</div>
<div class="p6 picture"></div>
<div class="info">
<h2>#007</h2>
<h1>Pong</h1>
<a href="http://kamigami55.github.io/100sites/007_Pong/">Demo</a>
</div>
<div class="p7 picture"></div>
<div class="cover"></div>
</div>
</body>
</html>
showcase.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
.cover {
height: 100vh;
width: 100vw;
position: fixed;
top: 0px;
background-color: #333;
opacity: 0.6;
z-index: 1;
}
.picture {
background-size: cover;
height: 100vh;
-moz-filter: blur(4px);
-webkit-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
h1 {
font-size: 20vh;
color: #fff;
font-family: Sans-serif;
text-shadow: 4px 4px 30px #222;
position: relative;
top: 50vh;
z-index: 3;
}
h2 {
font-size: 8vh;
color: #fff;
font-family: Sans-serif;
text-shadow: 3px 3px 20px #222;
position: relative;
top: 50vh;
z-index: 3;
}
.info {
text-align: center;
}
a {
font-size: 10vh;
color: #fff;
font-family: Sans-serif;
text-shadow: 3px 3px 20px #222;
position: relative;
top: 60vh;
margin: 0px auto;
z-index: 3;
text-decoration: none;
}
a:hover {
color: #4f4;
}
.p1 {
background-image: url(images/p1.png);
}
.p2 {
background-image: url(images/p2.png);
}
.p3 {
background-image: url(images/p3.png);
}
.p4 {
background-image: url(images/p4.png);
}
.p5 {
background-image: url(images/p5.png);
}
.p6 {
background-image: url(images/p6.png);
}
.p7 {
background-image: url(images/p7.png);
}


/* 插入導覽列 */
.nav {
position: fixed;
top: 50%;
right: 0px;
z-index: 2;
}
li {
width: 10px;
height: 10px;
margin: 10px;
background-color: white;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0,0,0,0,5) inset, -1px -1px 1px rgba(0,0,0,0,5) inset;
list-style-type: none;
}
showcase.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
$(document).ready(function() {

var num_li = $("li").length
n = 1
moving = 0
for(i = 0; i <= num_li; ++i){
$("html,body").stop()
$(".nav li:eq("+i+")").click({id:i}, function(e){
$(".nav li").css("background-color", "white")
page=e.data.id+1
$("html,body").animate({"scrollTop":$(".p"+page).offset().top})
$(this).css("background-color", "#46dd46")
n = e.data.id+1
})
}

$(window).scroll(function() {
if($(window).scrollTop() >= $(".p1").offset().top
&& $(window).scrollTop() < $(".p2").offset().top) {
$(".nav li").css("background-color", "white")
$(".nav li:eq(0)").css("background-color", "#46dd46")
} else if($(window).scrollTop() >= $(".p2").offset().top
&& $(window).scrollTop() < $(".p3").offset().top) {
$(".nav li").css("background-color", "white")
$(".nav li:eq(1)").css("background-color", "#46dd46")
} else if($(window).scrollTop() >= $(".p3").offset().top
&& $(window).scrollTop() < $(".p4").offset().top) {
$(".nav li").css("background-color", "white")
$(".nav li:eq(2)").css("background-color", "#46dd46")
} else if($(window).scrollTop() >= $(".p4").offset().top
&& $(window).scrollTop() < $(".p5").offset().top) {
$(".nav li").css("background-color", "white")
$(".nav li:eq(3)").css("background-color", "#46dd46")
} else if($(window).scrollTop() >= $(".p5").offset().top
&& $(window).scrollTop() < $(".p6").offset().top) {
$(".nav li").css("background-color", "white")
$(".nav li:eq(4)").css("background-color", "#46dd46")
} else if($(window).scrollTop() >= $(".p6").offset().top
&& $(window).scrollTop() < $(".p7").offset().top) {
$(".nav li").css("background-color", "white")
$(".nav li:eq(5)").css("background-color", "#46dd46")
} else if($(window).scrollTop() >= $(".p7").offset().top) {
$(".nav li").css("background-color", "white")
$(".nav li:eq(6)").css("background-color", "#46dd46")
}
})

$(window).mousewheel(function(e) {
// $("html,body").stop()
if(moving == 0) {
moving = 1
if(e.deltaY < 0) {
if(n < num_li) {
++n
}
} else {
if(n > 1) {
--n
}
}
$("html,body").animate({"scrollTop":$(".p"+n).offset().top},800 , function(){moving = 0})
}
console.log(moving + " " + e.deltaY + " " + n)

})

// 一進入網頁時,將導覽列垂直置中
center()

// 縮放網頁時,將導覽列垂直置中
$(window).resize(function() {
center()
})

// 計算導覽列置中的位置
function center() {
pos=$(window).height()/2-$(".nav").height()/2
$(".nav").css("top", pos)
}
})