Currently displaying Chinese version content. This article doesn't have a English version yet. Please stay tuned!

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

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

點我玩玩 Showcase 線上 Demo

點我查看 Showcase 的 Github 程式碼

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

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

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

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

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

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

Copied!
-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 來達成效果：

Copied!
.cover {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0px;
  background-color: #333;
  opacity: 0.6;
  z-index: 1;
}

下面附上完整程式碼：

Copied!
<!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>

Copied!
* {
  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;
}

Copied!
$(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)
  }
})

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

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