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

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

Published Mar 20, 2016