诗意文案流光：动态文本的视觉盛宴

本文链接：https://blog.csdn.net/m0_74223728/article/details/143406897

效果演示

这段代码是一个HTML文档，它包含了一个使用p5.js库创建的动态文本流效果的网页。p5.js是一个JavaScript库，它提供了一个类似于Processing的创意编程环境，使得开发者能够更容易地使用HTML5的canvas元素来创建图形和交互式动画。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端Hardy</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow: hidden;
            height: 100%;
            background-color: #000;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        let Copywriting = [
            '梦想的路上，有你相伴，便是最美的风景',
            "你的微笑，是我一天中最温暖的阳光",
            "مرحبا بالعالم",
            "与你相遇，是命运最温柔的安排",
            "你眼中有春与秋，胜过我见过的所有山川河流",
            "愿岁月温柔以待，愿你笑靥如花",
            "你是我心中的诗，读你千遍也不厌倦",
            "你若安好，便是晴天",
            "愿做你生命中的暖阳，温暖你的每一个冬日",
            "你的名字，是我读过最短的情诗",
            "你是我漫漫人生路上，最美的意外",
            "Helo Byd",
            "Hej Verden",
            "Hallo Welt",
            "Γειά σου Κόσμε",
            "Hello World",
            "Hello World",
            "Hola Mundo",
            "Tere, Maailm",
            "Kaixo Mundua",
            "سلام دنیا",
            "Hei maailma",
            "Bonjour le monde",
            "Dia duit an Domhan",
            "Ola mundo",
            "હેલો વર્લ્ડ",
            "Sannu Duniya",
            "नमस्ते दुनिया",
            "Hello World",
            "Pozdrav svijete",
            "Bonjou Mondyal la",
            "Helló Világ",
            "Բարեւ աշխարհ",
            "Halo Dunia",
            "Ndewo Ụwa",
            "Halló heimur",
            "你的存在，让整个世界都变得温柔起来",
            "你是我心中的星辰，照亮我前行的夜空",
            "こんにちは世界",
            "Hello World",
            "Გამარჯობა მსოფლიო",
            "Сәлем Әлем",
            "សួស្តីពិភពលោក",
            "ಹಲೋ ವರ್ಲ್ಡ್",
            "안녕하세요 월드",
            "你的笑容，是我一天中最甜美的糖果",
            "ສະບາຍດີຊາວໂລກ",
            "你是我平凡生活中的一抹亮色，让我的世界不再单调",
            "Sveika pasaule",
            "愿为你守候，直到时间的尽头",
            "你是我心中那片不灭的灯火，温暖而明亮",
            "Здраво свету",
            "ഹലോ വേൾഡ്",
            "Сайн уу",
            "हॅलो वर्ल्ड",
            "你的每一个小动作，都是我眼中最美的风景",
            "Hello dinja",
            "မင်္ဂလာပါကမ္ဘာလောက",
            "नमस्कार संसार",
            "Hallo Wereld",
            "Hei Verden",
            "Moni Dziko Lapansi",
            "ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ",
            "你是我不期而遇的温暖，和生生不息的希望",
            "Olá Mundo",
            "你的眼睛里有星辰大海，让我沉溺其中",
            "愿为你遮风挡雨，陪你走过四季",
            "හෙලෝ වර්ල්ඩ්",
            '梦想的路上，有你相伴，便是最美的风景',
            "你的微笑，是我一天中最温暖的阳光",
            "مرحبا بالعالم",
            "与你相遇，是命运最温柔的安排",
            "你眼中有春与秋，胜过我见过的所有山川河流",
            "愿岁月温柔以待，愿你笑靥如花",
            "你是我心中的诗，读你千遍也不厌倦",
            "你若安好，便是晴天",
            "愿做你生命中的暖阳，温暖你的每一个冬日",
            "你的名字，是我读过最短的情诗",
            "你是我漫漫人生路上，最美的意外",
            "Kamusta Mundo",
            '梦想的路上，有你相伴，便是最美的风景',
            "你的微笑，是我一天中最温暖的阳光",
            "مرحبا بالعالم",
            "与你相遇，是命运最温柔的安排",
            "你眼中有春与秋，胜过我见过的所有山川河流",
            "愿岁月温柔以待，愿你笑靥如花",
            "你是我心中的诗，读你千遍也不厌倦",
            "你若安好，便是晴天",
            "愿做你生命中的暖阳，温暖你的每一个冬日",
            "你的名字，是我读过最短的情诗",
            "你是我漫漫人生路上，最美的意外",
            "Mo ki O Ile Aiye",
            "你好，世界",
            "你好，世界",
            "你好，世界",
            "Sawubona Mhlaba"
        ];
        let charSize = 18;
        let fallRate = charSize / 2;
        let streams;
        let langs = Copywriting.map(function (str) {
            return str.split('').reverse().join('');
        });
        class Char {
            constructor(value, x, y, speed) {
                this.value = value;
                this.x = x;
                this.y = y;
                this.speed = speed;
            }
            draw() {
                const flick = random(100);
                if (flick < 10) {
                    fill(120, 30, 100);
                    text(round(random(9)), this.x, this.y);
                } else {
                    text(this.value, this.x, this.y);
                }

                this.y = this.y > height ? 0 : this.y + this.speed;
            }
        }
        class Stream {
            constructor(text, x) {
                const y = random(text.length * 4);
                const speed = random(2, 1);
                this.chars = [];

                for (let i = text.length; i >= 0; i--) {
                    this.chars.push(
                        new Char(text[i], x, (y + text.length - i) * charSize, speed)
                    );
                }
            }
            draw() {
                fill(120, 100, 100);
                this.chars.forEach((c, i) => {
                    const lit = random(100);
                    if (lit < 30) {
                        if (i === this.chars.length - 1) {
                            fill(120, 30, 100);
                        } else {
                            fill(120, 100, 90);
                        }
                    }
                    c.draw();
                });
            }
        }
        function createStreams() {
            for (let i = 0; i < width; i += charSize) {
                streams.push(new Stream(random(langs), i));
            }
        }
        function reset() {
            streams = [];
            createStreams();
        }
        function setup() {
            createCanvas(innerWidth, innerHeight);
            reset();
            frameRate(60);
            colorMode(HSB);
            noStroke();
            textSize(charSize);
            textFont("monospace");
            background(0);
        }
        function draw() {
            background(0, 0.4);
            streams.forEach((s) => s.draw());
        }
        function windowResized() {
            resizeCanvas(innerWidth, innerHeight);
            background(0);
            reset();
        }
    </script>
</body>
</html>