Rewizja 增強版頁面內導航與動畫效果

timmy zrewidował ten Gist 10 months ago. Przejdź do rewizji

Brak zmian

timmy zrewidował ten Gist 11 months ago. Przejdź do rewizji

Brak zmian

timmy zrewidował ten Gist 11 months ago. Przejdź do rewizji

1 file changed, 38 insertions, 4 deletions

html_page_with_navigation.html

			@@ -6,7 +6,7 @@
6	6		<style>
7	7		body {
8	8		font-family: Arial, sans-serif;
9		-	scroll-behavior: smooth; /* 平滑滾動 */
	9	+	/* 移除 CSS 平滑滾動，使用 JavaScript 控制 */
10	10		margin: 0;
11	11		padding: 0;
12	12		}
			@@ -35,6 +35,7 @@
35	35		padding: 8px 16px;
36	36		border-radius: 4px;
37	37		transition: background-color 0.3s, color 0.3s;
	38	+	cursor: pointer; /* 更改鼠標樣式以指示可點擊 */
38	39		}
39	40
40	41		.navbar a.active, .navbar a:hover {
			@@ -177,9 +178,42 @@
177	178
178	179		// 返回頂部按鈕功能
179	180		backToTop.addEventListener('click', () => {
180		-	window.scrollTo({
181		-	top: 0,
182		-	behavior: 'smooth'
	181	+	smoothScrollTo(0, 800); // 800 毫秒滾動到頂部
	182	+	});
	183	+
	184	+	// 自訂平滑滾動函數
	185	+	function smoothScrollTo(targetPosition, duration) {
	186	+	const startPosition = window.pageYOffset;
	187	+	const distance = targetPosition - startPosition;
	188	+	let startTime = null;
	189	+
	190	+	function animation(currentTime) {
	191	+	if (startTime === null) startTime = currentTime;
	192	+	const timeElapsed = currentTime - startTime;
	193	+	const run = ease(timeElapsed, startPosition, distance, duration);
	194	+	window.scrollTo(0, run);
	195	+	if (timeElapsed < duration) requestAnimationFrame(animation);
	196	+	}
	197	+
	198	+	// 二次緩和函數
	199	+	function ease(t, b, c, d) {
	200	+	t /= d / 2;
	201	+	if (t < 1) return c / 2 * t * t + b;
	202	+	t--;
	203	+	return -c / 2 * (t * (t - 2) - 1) + b;
	204	+	}
	205	+
	206	+	requestAnimationFrame(animation);
	207	+	}
	208	+
	209	+	// 為導航鏈接添加點擊事件，使用自訂平滑滾動
	210	+	navLinks.forEach(link => {
	211	+	link.addEventListener('click', function(e) {
	212	+	e.preventDefault();
	213	+	const targetId = this.getAttribute('href').substring(1);
	214	+	const targetSection = document.getElementById(targetId);
	215	+	const targetPosition = targetSection.offsetTop - 50; // 調整偏移量以適應導航欄高度
	216	+	smoothScrollTo(targetPosition, 800); // 800 毫秒滾動到目標
183	217		});
184	218		});
185	219		</script>

timmy zrewidował ten Gist 11 months ago. Przejdź do rewizji

1 file changed, 132 insertions, 10 deletions

html_page_with_navigation.html

			@@ -2,47 +2,96 @@
2	2		<html lang="zh-Hant">
3	3		<head>
4	4		<meta charset="UTF-8">
5		-	<title>頁面內導航範例</title>
	5	+	<title>增強版頁面內導航範例</title>
6	6		<style>
7	7		body {
8	8		font-family: Arial, sans-serif;
	9	+	scroll-behavior: smooth; /* 平滑滾動 */
	10	+	margin: 0;
	11	+	padding: 0;
9	12		}
	13	+
10	14		/* 固定導航欄 */
11	15		.navbar {
12	16		position: fixed;
13	17		top: 0;
14	18		width: 100%;
15		-	background-color: #333;
	19	+	background-color: rgba(51, 51, 51, 0.9);
16	20		padding: 10px 0;
17	21		text-align: center;
18	22		z-index: 1000;
	23	+	transition: background-color 0.3s;
	24	+	}
	25	+
	26	+	.navbar.scrolled {
	27	+	background-color: rgba(51, 51, 51, 1);
19	28		}
	29	+
20	30		.navbar a {
21	31		color: white;
22	32		margin: 0 15px;
23	33		text-decoration: none;
24	34		font-weight: bold;
	35	+	padding: 8px 16px;
	36	+	border-radius: 4px;
	37	+	transition: background-color 0.3s, color 0.3s;
25	38		}
26		-	.navbar a:hover {
27		-	text-decoration: underline;
	39	+
	40	+	.navbar a.active, .navbar a:hover {
	41	+	background-color: #fff;
	42	+	color: #333;
28	43		}
	44	+
29	45		/* 內容區塊 */
30	46		.section {
31	47		padding: 100px 20px;
32		-	margin-top: 60px; /* 為了避免被固定導航欄遮蓋 */
	48	+	margin-top: 60px; /* 避免被固定導航欄遮蓋 */
	49	+	min-height: 100vh;
	50	+	opacity: 0;
	51	+	transform: translateY(50px);
	52	+	transition: opacity 1s ease-out, transform 1s ease-out;
33	53		}
	54	+
	55	+	.section.visible {
	56	+	opacity: 1;
	57	+	transform: translateY(0);
	58	+	}
	59	+
34	60		#section1 { background-color: #f4f4f4; }
35	61		#section2 { background-color: #e4e4e4; }
36	62		#section3 { background-color: #d4d4d4; }
	63	+	#section4 { background-color: #c4c4c4; }
	64	+
	65	+	/* 返回頂部按鈕 */
	66	+	#backToTop {
	67	+	position: fixed;
	68	+	bottom: 40px;
	69	+	right: 40px;
	70	+	background-color: #333;
	71	+	color: #fff;
	72	+	padding: 10px 15px;
	73	+	border: none;
	74	+	border-radius: 50%;
	75	+	cursor: pointer;
	76	+	display: none; /* 初始隱藏 */
	77	+	font-size: 18px;
	78	+	z-index: 1000;
	79	+	transition: background-color 0.3s;
	80	+	}
	81	+
	82	+	#backToTop:hover {
	83	+	background-color: #555;
	84	+	}
37	85		</style>
38	86		</head>
39	87		<body>
40	88
41	89		<!-- 導航欄 -->
42		-	<div class="navbar">
43		-	<a href="#section1">部分一</a>
44		-	<a href="#section2">部分二</a>
45		-	<a href="#section3">部分三</a>
	90	+	<div class="navbar" id="navbar">
	91	+	<a href="#section1" class="nav-link">部分一</a>
	92	+	<a href="#section2" class="nav-link">部分二</a>
	93	+	<a href="#section3" class="nav-link">部分三</a>
	94	+	<a href="#section4" class="nav-link">部分四</a>
46	95		</div>
47	96
48	97		<!-- 內容部分 -->
			@@ -58,8 +107,81 @@
58	107
59	108		<div id="section3" class="section">
60	109		<h2>部分三</h2>
61		-	<p>這是第三部分的內容。頁面結束，謝謝你的瀏覽！</p>
	110	+	<p>這是第三部分的內容。你可以加入圖片、視頻或其他多媒體內容。</p>
62	111		</div>
63	112
	113	+	<div id="section4" class="section">
	114	+	<h2>部分四</h2>
	115	+	<p>這是第四部分的內容。頁面結束，謝謝你的瀏覽！</p>
	116	+	</div>
	117	+
	118	+	<!-- 返回頂部按鈕 -->
	119	+	<button id="backToTop" title="返回頂部">⇧</button>
	120	+
	121	+	<script>
	122	+	// 當前視窗滾動位置
	123	+	const sections = document.querySelectorAll('.section');
	124	+	const navLinks = document.querySelectorAll('.nav-link');
	125	+	const navbar = document.getElementById('navbar');
	126	+	const backToTop = document.getElementById('backToTop');
	127	+
	128	+	// 檢查哪些區塊進入視窗，並添加動畫
	129	+	const observerOptions = {
	130	+	threshold: 0.1
	131	+	};
	132	+
	133	+	const observer = new IntersectionObserver((entries, observer) => {
	134	+	entries.forEach(entry => {
	135	+	if(entry.isIntersecting){
	136	+	entry.target.classList.add('visible');
	137	+	observer.unobserve(entry.target);
	138	+	}
	139	+	});
	140	+	}, observerOptions);
	141	+
	142	+	sections.forEach(section => {
	143	+	observer.observe(section);
	144	+	});
	145	+
	146	+	// 高亮當前導航連結
	147	+	window.addEventListener('scroll', () => {
	148	+	let current = '';
	149	+	sections.forEach(section => {
	150	+	const sectionTop = section.offsetTop - 70;
	151	+	if (pageYOffset >= sectionTop) {
	152	+	current = section.getAttribute('id');
	153	+	}
	154	+	});
	155	+
	156	+	navLinks.forEach(link => {
	157	+	link.classList.remove('active');
	158	+	if(link.getAttribute('href') === `#${current}`){
	159	+	link.classList.add('active');
	160	+	}
	161	+	});
	162	+
	163	+	// 導航欄背景變化
	164	+	if (window.scrollY > 50) {
	165	+	navbar.classList.add('scrolled');
	166	+	} else {
	167	+	navbar.classList.remove('scrolled');
	168	+	}
	169	+
	170	+	// 返回頂部按鈕顯示
	171	+	if (window.scrollY > 300) {
	172	+	backToTop.style.display = 'block';
	173	+	} else {
	174	+	backToTop.style.display = 'none';
	175	+	}
	176	+	});
	177	+
	178	+	// 返回頂部按鈕功能
	179	+	backToTop.addEventListener('click', () => {
	180	+	window.scrollTo({
	181	+	top: 0,
	182	+	behavior: 'smooth'
	183	+	});
	184	+	});
	185	+	</script>
64	186		</body>
65	187		</html>

timmy zrewidował ten Gist 11 months ago. Przejdź do rewizji

1 file changed, 65 insertions

html_page_with_navigation.html(stworzono plik)

		@@ -0,0 +1,65 @@
1	+	<!DOCTYPE html>
2	+	<html lang="zh-Hant">
3	+	<head>
4	+	<meta charset="UTF-8">
5	+	<title>頁面內導航範例</title>
6	+	<style>
7	+	body {
8	+	font-family: Arial, sans-serif;
9	+	}
10	+	/* 固定導航欄 */
11	+	.navbar {
12	+	position: fixed;
13	+	top: 0;
14	+	width: 100%;
15	+	background-color: #333;
16	+	padding: 10px 0;
17	+	text-align: center;
18	+	z-index: 1000;
19	+	}
20	+	.navbar a {
21	+	color: white;
22	+	margin: 0 15px;
23	+	text-decoration: none;
24	+	font-weight: bold;
25	+	}
26	+	.navbar a:hover {
27	+	text-decoration: underline;
28	+	}
29	+	/* 內容區塊 */
30	+	.section {
31	+	padding: 100px 20px;
32	+	margin-top: 60px; /* 為了避免被固定導航欄遮蓋 */
33	+	}
34	+	#section1 { background-color: #f4f4f4; }
35	+	#section2 { background-color: #e4e4e4; }
36	+	#section3 { background-color: #d4d4d4; }
37	+	</style>
38	+	</head>
39	+	<body>
40	+
41	+	<!-- 導航欄 -->
42	+	<div class="navbar">
43	+	<a href="#section1">部分一</a>
44	+	<a href="#section2">部分二</a>
45	+	<a href="#section3">部分三</a>
46	+	</div>
47	+
48	+	<!-- 內容部分 -->
49	+	<div id="section1" class="section">
50	+	<h2>部分一</h2>
51	+	<p>這是第一部分的內容。你可以在這裡放置任何你想要展示的資訊。</p>
52	+	</div>
53	+
54	+	<div id="section2" class="section">
55	+	<h2>部分二</h2>
56	+	<p>這是第二部分的內容。繼續添加更多內容，使頁面更豐富。</p>
57	+	</div>
58	+
59	+	<div id="section3" class="section">
60	+	<h2>部分三</h2>
61	+	<p>這是第三部分的內容。頁面結束，謝謝你的瀏覽！</p>
62	+	</div>
63	+
64	+	</body>
65	+	</html>

Nowsze Starsze