【100sites #008】Showcase,單頁式網站設計展示我的作品集
- Published on
Showcase,單頁式網站設計,展示我的網站練習作品集
一句話摘要:我的第一份單頁式網站
我一直很想要學習如何設計單頁式網站,於是今天的 100sites 的題目就是單頁式網站設計啦!
我找到了一份不錯的教學,PJCHENder 愛分享 - jQuery 學習筆記 第八堂-1及第八堂-2,手把手教你如何做出一個簡單的單頁式網站。
於是我照著他的教學一步一腳印地學習,完成以後改改圖、加些文字、連結、與遮罩,就成為了今天的成品 Showcase 啦!
Showcase 比較特別的地方除了單頁式網站設計以外,就是毛玻璃和黑色遮色片的效果了,這兩個效果都是用 CSS 做的。
毛玻璃效果(px 數值大小可以隨你想要的模糊程度做調整):
-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 來達成效果:
.cover {
height: 100vh;
width: 100vw;
position: fixed;
top: 0px;
background-color: #333;
opacity: 0.6;
z-index: 1;
}
下面附上完整程式碼:
<!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>
* {
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;
}
$(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)
}
})