Revisión de 增強版頁面內導航與動畫效果

timmy revisó este gist 10 months ago. Ir a la revisión

Sin cambios

timmy revisó este gist 11 months ago. Ir a la revisión

Sin cambios

timmy revisó este gist 11 months ago. Ir a la revisión

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 revisó este gist 11 months ago. Ir a la revisión

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 revisó este gist 11 months ago. Ir a la revisión

1 file changed, 65 insertions

html_page_with_navigation.html(archivo creado)

		@@ -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>

Siguiente Anterior