scroll-highlight

ui

  • 《长恨歌》白居易
  • 风吹仙袂飘飖举，犹似霓裳羽衣舞。
  • 玉容寂寞泪阑干，梨花一枝春带雨。
  • 含情凝睇谢君王，一别音容两渺茫。
  • 昭阳殿里恩爱绝，蓬莱宫中日月长。
  • 回头下望人寰处，不见长安见尘雾。
  • 惟将旧物表深情，钿合金钗寄将去。
  • 钗留一股合一扇，钗擘黄金合分钿。
  • 但令心似金钿坚，天上人间会相见。
  • 临别殷勤重寄词，词中有誓两心知。
  • 七月七日长生殿，夜半无人私语时。
  • 在天愿作比翼鸟，在地愿为连理枝。
  • 天长地久有时尽，此恨绵绵无绝期。

src

scroll-highlight-item.tsx

TSX
"use client"

import { motion } from "motion/react";

interface ScrollItemHighlightProps {
    text: string;
    index: number;
    isHighlighted: boolean;
    onHighlight: (index: number) => void;
}

export function ScrollHighlightItem({ text, index, isHighlighted, onHighlight }: ScrollItemHighlightProps) {
    return (
        <motion.li className="cursor-pointer first:mb-10 md:first:mb-20 duration-300"
                   initial={ false }
                   animate={ {
                       opacity: isHighlighted ? 1 : 0.3,
                       scale: isHighlighted ? 1.02 : 1
                   } }
                   transition={ {
                       duration: 0.1,
                       ease: "linear",
                   } }
                   onViewportEnter={ () => onHighlight(index) }
                   viewport={ {
                       margin: "-28% 0px -68% 0px",
                       amount: "some",
                   } }
                   key={ index }>
            <span className="text-2xl md:text-4xl lg:text-5xl xl:text-6xl text-white duration-300">
                { text }
            </span>
        </motion.li>
    )
}

page.tsx

TSX
"use client"

import { useState } from "react";
import { ScrollHighlightItem } from "@/examples/scroll-highlight/scroll-highlight-item";

export default function Page() {

    const [ selected, setSelected ] = useState<number | null>();

    const CHANG_HEN_GE = [
        "《长恨歌》白居易",
        "风吹仙袂飘飖举，犹似霓裳羽衣舞。",
        "玉容寂寞泪阑干，梨花一枝春带雨。",
        "含情凝睇谢君王，一别音容两渺茫。",
        "昭阳殿里恩爱绝，蓬莱宫中日月长。",
        "回头下望人寰处，不见长安见尘雾。",
        "惟将旧物表深情，钿合金钗寄将去。",
        "钗留一股合一扇，钗擘黄金合分钿。",
        "但令心似金钿坚，天上人间会相见。",
        "临别殷勤重寄词，词中有誓两心知。",
        "七月七日长生殿，夜半无人私语时。",
        "在天愿作比翼鸟，在地愿为连理枝。",
        "天长地久有时尽，此恨绵绵无绝期。",
    ];

    return (
        <div className="bg-[#141b1c] py-32 md:py-48 lg:py-64">
            <ul className="flex flex-col items-center gap-y-10">
                {
                    CHANG_HEN_GE.map((line, index) => (
                        <ScrollHighlightItem text={ line }
                                             index={ index }
                                             isHighlighted={ index === selected }
                                             onHighlight={ setSelected }
                                             key={ index }/>
                    ))
                }
            </ul>
        </div>
    )
}

video