【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); } });