從 0 開始的一頁式網站

更新 發佈閱讀 10 分鐘
raw-image



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

導覽列表淡入淡出動畫

raw-image

使用 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 掛載事件監聽器,只要使用者點擊漢堡圖標,就會觸發這個動畫。



模糊濾鏡

raw-image

首先加入 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' }) // 滑動到連結路徑



當畫面滾動到訓練列表和課程卡片時 項目會由下往上淡入(手機裝置才有)

raw-image
  • 運用 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
程式碼如果想用可以問我,不要直接拿走喔,畢竟我也是做了好幾天。


網頁在此:喵喵健身教練

留言
avatar-img
留言分享你的想法!
avatar-img
碎碎念
5會員
14內容數
本來是理科生,在被物理放棄之後成為了文科生,有時理性思考,偶爾卻會脫口出感性的字句;喜歡打字的聲音,以生活為靈感寫下過去、現在與未來。
你可能也想看
Thumbnail
如果你也想發展個人自媒體,推薦不妨也先從擁有一個自己的網站開始吧!你是不是想架設一個自己的網站,卻不知道該如何開始呢?很多人也好奇自己架設網站要錢嗎?這裡就也來分享常見的幾種自媒體架站方式,讓你可以更清楚瞭解喔!
Thumbnail
如果你也想發展個人自媒體,推薦不妨也先從擁有一個自己的網站開始吧!你是不是想架設一個自己的網站,卻不知道該如何開始呢?很多人也好奇自己架設網站要錢嗎?這裡就也來分享常見的幾種自媒體架站方式,讓你可以更清楚瞭解喔!
Thumbnail
前幾天,同樣身為職涯諮詢師的同學,邀請大家一起學習Wordpress,同學表示自己很喜歡寫網站,也希望大家能和他一樣感受架網站的樂趣,因此自告奮勇成為Wordpress新手村長。 我過去也想過要自己蓋網頁,只是不知道從何開始,遲遲沒有踏出第一步,看到同學的號召,再次燃起夢想(?),沒有任何網站經驗
Thumbnail
前幾天,同樣身為職涯諮詢師的同學,邀請大家一起學習Wordpress,同學表示自己很喜歡寫網站,也希望大家能和他一樣感受架網站的樂趣,因此自告奮勇成為Wordpress新手村長。 我過去也想過要自己蓋網頁,只是不知道從何開始,遲遲沒有踏出第一步,看到同學的號召,再次燃起夢想(?),沒有任何網站經驗
Thumbnail
從上次作完喵喵健身教練網頁後,覺得自己以前作的個人簡歷網站實在是太醜了,而且當初為了搶快,直接套用 Bootstrap 版型,根本不用寫 JavaScript(燦笑) 所以這次決定把網站重寫,就算是從 1 開始吧,1-10 分作到 8 分就好,不然完美主義真的會搞死自己,那道光很快就來了(?)
Thumbnail
從上次作完喵喵健身教練網頁後,覺得自己以前作的個人簡歷網站實在是太醜了,而且當初為了搶快,直接套用 Bootstrap 版型,根本不用寫 JavaScript(燦笑) 所以這次決定把網站重寫,就算是從 1 開始吧,1-10 分作到 8 分就好,不然完美主義真的會搞死自己,那道光很快就來了(?)
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
其實想了蠻久要不要創帳號的。 一開始只是單純會在心情不好時寫寫東西,現在也是。但我漸漸的覺得,好像需要一個地方來將這些「努力過的痕跡」統整起來,存放於一個特別的地方。我開過其他平台的帳號,或許之後會跟IG做連結吧,可能再一陣子。 我喜歡寫字,漫無目的的。不是像那種「我今天就是要寫故事」的熱忱,而
Thumbnail
其實想了蠻久要不要創帳號的。 一開始只是單純會在心情不好時寫寫東西,現在也是。但我漸漸的覺得,好像需要一個地方來將這些「努力過的痕跡」統整起來,存放於一個特別的地方。我開過其他平台的帳號,或許之後會跟IG做連結吧,可能再一陣子。 我喜歡寫字,漫無目的的。不是像那種「我今天就是要寫故事」的熱忱,而
Thumbnail
創Podcast的初衷與挑戰,充滿熱情卻受制於自身環境,面對種種限制與挑戰,想要堅持卻困難重重。
Thumbnail
創Podcast的初衷與挑戰,充滿熱情卻受制於自身環境,面對種種限制與挑戰,想要堅持卻困難重重。
Thumbnail
我其實去年就有想弄好個人網站的想法,所以前後找了很多網站希望能夠作為一個發表作品跟心情的場所。可惜很多找到的網站不是只能發圖就是只能發文,或是操作不易,對我來說都不是很好用。現在才來到方格子這裡,這裡的發文主頁清新簡潔也能顯示圖片,操作也簡單,也能夠只更新圖片或是文字,對我來說是比較好用的網站。
Thumbnail
我其實去年就有想弄好個人網站的想法,所以前後找了很多網站希望能夠作為一個發表作品跟心情的場所。可惜很多找到的網站不是只能發圖就是只能發文,或是操作不易,對我來說都不是很好用。現在才來到方格子這裡,這裡的發文主頁清新簡潔也能顯示圖片,操作也簡單,也能夠只更新圖片或是文字,對我來說是比較好用的網站。
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News