一切都從思考作品集要怎麼準備開始，所謂的 one 是起頭難（？），在動手寫 code 之前，總覺得自己做不到，一直在自己煩惱，直到前輩們說：開始做看看吧，一頁式網站也好，不開始做永遠不知道自己哪些知識需要補強。
於是決定先幫我的繆思女神做一個網站，讓她可以介紹自己的工作，再放社群連結、預約表單就好。
思考 HTML 架構
用語意標籤 header 以及 nav，裡面是 logo 連結、導覽列的觸發按鈕、導覽列表
<header class="header">
<nav class="nav">
<div class="navbar">
<a class="logo"></a>
<button class="toggle"></button>
</div>
<div class="collapse">
<ul class="list"></ul>
</div>
</nav>
</header>
接著是 main 標籤裡面放入四個 section，
分別是關於我、訓練列表、課程介紹、聯繫資料，
- id - 因為最後導覽列會需要導向指定 section 所以要在標籤中設定
- overlay - 待會會在 css 設定背景圖片，並且要加上模糊樣式。
<main>
<section class="section" id="">
<div class="container">
<div class="overlay">
<h2 class="title"></h2>
<p class="subtitle"></p>
</div>
</div>
</section>
</main>
很容易被遺忘的 footer 用來放版權文字
<footer class="footer"></footer>
再來就是把假字帶入，就完成 HTML 的部分了。
加入 CSS 樣式
以前為了搶快，所以很常使用 bootstrap 來套樣式，但這次想要靠自己的雙手刻樣式，意外的堅持:D
我在習慣上會把版面顏色先定義好，還有很常用到的 display 樣式也定義好，這樣 css 檔案就不會太亂，只是我也不希望 class 多到爆炸，所以盡量讓 HTML tag 維持在 3 個 class 就好。
導覽列表淡入淡出動畫
使用 animation 搭配 keyframes 作出動畫：
@keyframes fadein {
0% {
display: none;
opacity: 0;
transform: translateY(-100%);
}
100% {
display: block;
opacity: 1;
transform: translateY(0);
}
}
元素初始位置設定在 Y 軸 -100% 終點位置設定在 0%，也要設定透明度 opacity 才會有淡入的感覺；淡出的寫法就是相反數值。
.fade-in {animation: fadein 0.6s;}
設定動畫的秒數後，再去 JavaScript 掛載事件監聽器，只要使用者點擊漢堡圖標，就會觸發這個動畫。
模糊濾鏡
首先加入 background-image 再加透明度很低的 background-color，最後加上模糊。
.overlay {
padding: 1rem;
width: 100%;
height: 100%;
overflow: hidden;
text-align: end;
line-height: 1.5;
background-color: rgba(236, 236, 236, 0.09);
backdrop-filter: blur(4px);
}
JavaScript 互動功能
點擊導覽列表的項目後 滑動到指定區域
const navCollapse = document.querySelector('.nav_collapse')
// 在父元素 navCollapse 掛載監聽器（事件委派）
navCollapse.addEventListener('click', function (e) {
e.preventDefault()
const link = e.target.closest('.nav_item')
if (!link) return
const id = e.target.getAttribute('href')
document.querySelector(id).scrollIntoView({ behavior: 'smooth' })
toggleNavigation() // 另外寫一個開關導覽列表的函式
})
- 在 HTML 中項目是用
<a> tag建立的，
在點擊時，瀏覽器會有預設的動作：直接跳到指定區域，
這樣就不會有滑動的感覺，因此要先停止預設動作。
e.preventDefault() // 停止預設動作
- 這裡將事件委派給 navCollapse 也就是項目的父元素，
如果要把每個項目都掛上監聽器，會很沒效率，程式碼也會很難維護。
但是事件委派時就必須確認：
使用者點擊到的目標是否包含 nav_item 這個 class，
如果點到空白處，就不會動作。
const link = e.target.closest('.nav_item') // 確認目標是否是 nav_item
if (!link) return // 如果不是 就退出函式
- 取得項目的 href 連結路徑，使用 web API 的 scrollIntoView，
設定 behavior: 'smooth' 就能滑動到項目的 href 連結路徑。
const id = e.target.getAttribute('href') // 取得項目的 href 連結路徑
document.querySelector(id).scrollIntoView({ behavior: 'smooth' }) // 滑動到連結路徑
當畫面滾動到訓練列表和課程卡片時 項目會由下往上淡入（手機裝置才有）
- 運用 Intersection Observer API 觀察畫面滾動到某個位置時，調用 callback 函式。
- 在 css 編寫 reveal-hidden class：將項目先移到原始位置的下方，並設定透明。
.reveal-hidden {
opacity: 0;
transform: translateY(6rem);
}
- 建立 callback 函式，當畫面位置與指定位置交集，就移除 reveal-hidden class，產生項目上移以及淡入的動態。
const revealBox = function (entries, observer) {
const [entry] = entries // 解構 entries
// 當位置還沒交集 或 瀏覽器寬度在 768px 以上時 退出函式
if (!entry.isIntersecting || window.innerWidth >= 768) return
entry.target.classList.remove('reveal-hidden') // 移除 reveal-hidden class
observer.unobserve(entry.target) // 完成後 就移除觀測器
}
- 建立觀測器的實例，參數為剛剛編寫的 callback 以及閥值
const revealObserver = new IntersectionObserver(revealBox, {
root: null, // root 是要觀察交集的元素 設定 null 表示整個視窗
threshold: 0.1, // 交集的百分比(intersectionRatio) 當達到此閥值 cb 會被調用
})
- 設定要被觀測的目標元素
const bindRevealObserver = function (element) {
revealObserver.observe(element) // 被觀測的元素
// 瀏覽器寬度在 768 以下 讓元素加入 reveal-hidden class
if (window.innerWidth < 768) element.classList.add('reveal-hidden')
// 反之 移除 reveal-hidden class
if (window.innerWidth >= 768) element.classList.remove('reveal-hidden')
}
// 用 forEach 來設定每張卡片都能被觀測
const allCourseCard = document.querySelectorAll('.course_card')
allCourseCard.forEach((card) => bindRevealObserver(card))
以上就完成啦，我的第一個模板，
好想大吃一盤烘烤腰果跟一杯大冰美 :DDD
圖片連結來自 Unsplash
程式碼如果想用可以問我，不要直接拿走喔，畢竟我也是做了好幾天。
網頁在此：喵喵健身教練
