Splitting.js 开源项目教程

2026-01-19 11:14:06作者：齐冠琰

项目介绍

Splitting.js 是一个轻量级的 JavaScript 库，用于在网页上创建分割文本和元素的效果。它可以帮助开发者轻松实现文本动画、响应式设计以及创意布局。Splitting.js 通过简单的 API 提供了丰富的定制选项，使得文本和元素的分割变得简单而高效。

项目快速启动

安装

你可以通过 npm 或直接在 HTML 中引入 Splitting.js 来安装和使用它。

通过 npm 安装

npm install splitting

在 HTML 中引入

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

基本使用

以下是一个简单的示例，展示如何在 HTML 中使用 Splitting.js 来分割文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splitting.js 示例</title>
    <link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css">
</head>
<body>
    <div class="content" data-splitting>Hello, Splitting.js!</div>

    <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
    <script>
        Splitting();
    </script>
</body>
</html>

应用案例和最佳实践

文本动画

Splitting.js 可以用于创建各种文本动画效果，例如逐字显示、打字机效果等。

<div class="text" data-splitting>这是一个文本动画示例。</div>

<script>
    Splitting({ by: 'chars' });
</script>

响应式设计

Splitting.js 可以与 CSS 结合，实现响应式的文本布局。

<div class="responsive-text" data-splitting>响应式文本布局示例。</div>

<style>
    .responsive-text .char {
        display: inline-block;
        transition: transform 0.3s;
    }
    .responsive-text .char:hover {
        transform: scale(1.5);
    }
</style>

<script>
    Splitting({ by: 'chars' });
</script>

典型生态项目

Splitting.js 可以与其他前端框架和库结合使用，例如 React、Vue 和 Three.js 等。以下是一些典型的生态项目：

React 集成

import React from 'react';
import Splitting from 'splitting';

class SplittingText extends React.Component {
    componentDidMount() {
        Splitting({ by: 'chars' });
    }

    render() {
        return <div data-splitting>这是一个 React 集成示例。</div>;
    }
}

export default SplittingText;

Vue 集成

<template>
    <div data-splitting>这是一个 Vue 集成示例。</div>
</template>

<script>
import Splitting from 'splitting';

export default {
    mounted() {
        Splitting({ by: 'chars' });
    }
}
</script>

通过以上示例，你可以看到 Splitting.js 在不同框架中的集成方式，以及如何实现丰富的文本和元素分割效果。

Splitting

JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!

项目地址：https://gitcode.com/gh_mirrors/sp/Splitting

登录后查看全文