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

Published on

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

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

點我玩玩 Showcase 線上 Demo

點我查看 Showcase 的 Github 程式碼

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

我一直很想要學習如何設計單頁式網站,於是今天的 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) } })