2 篇文章含有標籤「typescript」

檢視所有標籤

滾動視差（Parallax Scrolling）網頁設計入門教學筆記 | 學習筆記

2024年12月4日 · 閱讀時間約 5 分鐘

kdchang

滾動視差（Parallax Scrolling）是一種前端網頁設計技術，透過不同層的背景與內容以不同的速度滾動，營造出立體感與動態視覺效果。這種技術常見於品牌網站、產品介紹頁面或作品展示頁面，能有效提升使用者的沉浸感與互動體驗。

滾動視差的視覺效果

背景與內容滾動速率不同：背景滾動速度較慢，前景滾動速度較快，模擬景深效果。
多層次視覺變化：不同層的元素可以有獨立的滾動行為，增加動態感。
創造故事性：透過滾動觸發不同場景，讓使用者體驗連貫的視覺敘事。

二、滾動視差的基本實作

1. 使用純 CSS 來製作滾動視差

CSS 提供了 background-attachment: fixed; 屬性，可以讓背景圖像保持固定位置，而前景內容繼續滾動，營造簡單的滾動視差效果。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滾動視差示例</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .parallax {
            background-image: url('parallax-background.jpg');
            height: 100vh;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .content {
            height: 500px;
            background-color: white;
            text-align: center;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div class="parallax"></div>

    <div class="content">
        <h2>滾動視差示例</h2>
        <p>這是一個簡單的滾動視差網頁，背景固定不動，前景內容滾動。</p>
    </div>

    <div class="parallax"></div>

</body>
</html>

這種方式雖然簡單，但無法實現更複雜的視差動畫效果。如果想要更進階的效果，通常需要搭配 JavaScript 或 CSS 變形（Transform）。

2. 使用 CSS `transform` 來實現滾動視差

透過 transform: translateZ() 搭配 perspective()，可以製造出更立體的視差效果。

.parallax-container {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallax-layer {
    position: absolute;
    width: 100%;
    transform: translateZ(-1px) scale(2);
}

這種方式可以讓不同層的元素有不同的滾動速率，達到更細緻的視覺效果。

三、使用 JavaScript 製作更靈活的滾動視差

雖然純 CSS 可以實現基本視差效果，但若要控制不同層級的滾動速度，或者添加額外動畫效果，就需要 JavaScript。

1. 簡單的 JavaScript 滾動視差

使用 window.scrollY 來控制元素的 transform 屬性，使其隨滾動變化。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 滾動視差</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .parallax {
            position: relative;
            height: 100vh;
            overflow: hidden;
            background: url('parallax-background.jpg') center/cover no-repeat;
        }
        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: white;
        }
    </style>
</head>
<body>

    <div class="parallax">
        <div class="text">滾動視差效果</div>
    </div>

    <script>
        window.addEventListener('scroll', function() {
            let scrollPosition = window.scrollY;
            document.querySelector('.parallax').style.backgroundPositionY = scrollPosition * 0.5 + 'px';
        });
    </script>

</body>
</html>

在這個範例中，我們透過 JavaScript 讓背景圖片根據滾動位置改變 backgroundPositionY，從而達成視差效果。

2. 使用第三方函式庫（如 ScrollMagic）

如果想要更進階的視差效果，可以使用 ScrollMagic 這類 JavaScript 函式庫，來更精確地控制滾動動畫。

首先安裝 ScrollMagic：

npm install scrollmagic

然後在 JavaScript 中設定滾動觸發點：

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    triggerElement: '.parallax',
    duration: '100%',
    triggerHook: 0
})
.setTween('.parallax', { y: '50%', ease: Linear.easeNone })
.addTo(controller);

這樣可以讓 .parallax 元素在滾動時逐漸移動，達成視差效果。

四、滾動視差的應用場景

滾動視差可以應用於許多不同類型的網站，例如：

品牌網站：用來展示產品特性與公司理念，提高視覺吸引力。
作品集網站：適合攝影師、設計師，讓內容更具層次感。
故事敘述頁面：用來製作互動式故事，讓用戶在滾動中探索內容。
促銷與行銷頁面：讓特定區塊在滾動時突出，吸引目光。

五、滾動視差的優勢與缺點

優勢

增強視覺吸引力，使網站更具互動性。
可提升品牌形象，讓內容更具故事性。
創造更流暢的使用者體驗，增加網站的停留時間。

缺點

過多視差效果可能會影響效能，導致頁面滾動不流暢。
可能對行動裝置不友善，需要額外的優化。
過度使用可能會影響可讀性，降低使用者體驗。

六、結論

滾動視差是一種有效提升網站視覺吸引力的技術，適用於品牌展示、作品集與故事敘述類型的網站。透過 CSS 的 background-attachment，JavaScript 的 scrollY，或是使用函式庫如 ScrollMagic，都能實現不同程度的視差效果。

然而，使用時需注意效能與可讀性，確保不會影響使用者體驗。在實作時，建議先從簡單的 CSS 視差效果開始，逐步引入 JavaScript 或函式庫，根據需求選擇最佳實作方式。

TypeScript 入門教學筆記 | 學習筆記

2024年12月3日 · 閱讀時間約 4 分鐘

kdchang

TypeScript 是由 Microsoft 開發的 JavaScript 超集（Superset），提供靜態型別檢查（Static Type Checking），讓開發者在編譯時發現錯誤，提升程式碼的可靠性與可維護性。TypeScript 會被編譯為標準 JavaScript，並可以運行於任何支援 JavaScript 的環境，例如瀏覽器或 Node.js。

TypeScript 的主要特點

靜態型別檢查：在開發階段偵測類型錯誤，減少潛在錯誤。
強大的 IDE 支援：提供自動補全、型別推斷等功能，提高開發效率。
物件導向特性：支援類別（Class）、介面（Interface）、泛型（Generics）等功能。
相容 JavaScript：可以與現有的 JavaScript 程式碼共存，逐步導入 TypeScript。
模組化開發：支援 ES6+ 模組系統，便於管理大型應用程式。

二、安裝與設定 TypeScript

1. 安裝 TypeScript

可以使用 npm 來安裝 TypeScript：

npm install -g typescript

安裝完成後，可以使用以下指令來檢查 TypeScript 版本：

tsc -v

2. 初始化 TypeScript 專案

在專案目錄中執行以下指令，產生 tsconfig.json 設定檔：

tsc --init

這個設定檔可以調整 TypeScript 的編譯選項，例如輸出目錄、是否允許隱式 any 類型等。

三、基本語法

1. 變數與型別

TypeScript 透過 : 來指定變數的型別：

let name: string = 'Alice';
let age: number = 25;
let isStudent: boolean = true;

也可以使用 any 來允許變數接受任何型別：

let value: any = 'Hello';
value = 123; // 不會報錯

2. 陣列與元組

可以使用 type[] 來定義陣列型別：

let numbers: number[] = [1, 2, 3, 4];
let names: string[] = ['Alice', 'Bob'];

元組（Tuple）允許指定固定數量與型別的元素：

let person: [string, number] = ['Alice', 25];

3. 物件與介面

可以使用 interface 來定義物件的結構：

interface Person {
  name: string;
  age: number;
  isStudent?: boolean; // 可選屬性
}

let user: Person = {
  name: 'Alice',
  age: 25,
};

4. 函式與型別

函式的參數與回傳值可以明確指定型別：

function add(a: number, b: number): number {
  return a + b;
}

若函式沒有回傳值，可以使用 void：

function logMessage(message: string): void {
  console.log(message);
}

也可以使用箭頭函式語法：

const multiply = (a: number, b: number): number => a * b;

5. 型別別名（Type Alias）

type 關鍵字可以為型別取別名：

type ID = string | number;
let userId: ID = 123;

四、進階語法

1. Enum（列舉型別）

enum 允許定義一組具有特定名稱的數值：

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

let move: Direction = Direction.Up;

2. 泛型（Generics）

泛型允許函式或類別支援不同的型別，提高可重用性：

function identity<T>(value: T): T {
  return value;
}

console.log(identity<string>('Hello'));
console.log(identity<number>(123));

泛型也可用於類別：

class Box<T> {
  content: T;
  constructor(value: T) {
    this.content = value;
  }
}

let stringBox = new Box<string>('TypeScript');
let numberBox = new Box<number>(100);

3. 類別與繼承

TypeScript 提供完整的類別支援，與 JavaScript ES6 類似：

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

let alice = new Person('Alice');
alice.greet();

繼承類別：

class Student extends Person {
  studentId: number;
  constructor(name: string, studentId: number) {
    super(name);
    this.studentId = studentId;
  }
}

let bob = new Student('Bob', 123);
bob.greet();

4. 非空斷言（Non-null Assertion）

可以使用 ! 來告訴 TypeScript 變數一定不會是 null 或 undefined：

let value: string | null = 'Hello';
console.log(value!.length);

五、TypeScript 與 JavaScript 的比較

特性	JavaScript	TypeScript
型別檢查	無	靜態型別檢查
介面	無	有介面與型別定義
類別與繼承	ES6+ 支援	支援完整 OOP
泛型	無	支援泛型開發
Enum 列舉	無	有內建 Enum
編譯時錯誤	無	可提前檢查錯誤

六、TypeScript 專案開發

TypeScript 可與現代開發工具整合，如 Webpack、Babel 等。例如，在 React 或 Vue 開發中，可以使用 TypeScript 提供的型別檢查來提升程式碼質量。

在專案中安裝 TypeScript 相依套件：

npm install typescript @types/node --save-dev

若要搭配 React，則需安裝 @types/react 和 @types/react-dom：

npm install @types/react @types/react-dom --save-dev

七、總結

TypeScript 提供靜態型別檢查、模組化開發、泛型與完整的物件導向特性，使 JavaScript 程式碼更安全、可維護且容易擴展。透過與現有 JavaScript 相容的特性，可以逐步導入 TypeScript，提升專案的開發體驗與效能。在現代前端與後端開發中，TypeScript 已成為主流選擇之一。

滾動視差的視覺效果​

二、滾動視差的基本實作

1. 使用純 CSS 來製作滾動視差​

2. 使用 CSS transform 來實現滾動視差​

三、使用 JavaScript 製作更靈活的滾動視差

1. 簡單的 JavaScript 滾動視差​

2. 使用第三方函式庫（如 ScrollMagic）​

四、滾動視差的應用場景

五、滾動視差的優勢與缺點

優勢​

缺點​

六、結論

TypeScript 的主要特點​

二、安裝與設定 TypeScript

1. 安裝 TypeScript​

2. 初始化 TypeScript 專案​