從 0 開始的一頁式網站

更新於 2024/06/09發佈於 2024/06/09閱讀時間約 10 分鐘

一切都從思考作品集要怎麼準備開始，所謂的 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))