动画逻辑逐字处理每个＜span＞的模糊和淡入效果

本文链接：https://blog.youkuaiyun.com/m0_58149406/article/details/145658741

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Animation</title>
  <style>
    * {
      margin: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      background-color: black;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    blockquote {
      display: block;
      margin: 0 auto;
      text-align: center;
      max-width: 900px;
    }

    p,
    cite {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    p {
      font-family: Georgia, serif;
      color: white;
      font-size: 2.7rem;
      font-style: italic;
      font-weight: 300;
      padding-bottom: 2rem;
    }

    span {
      will-change: opacity;
      opacity: 0;
    }

    span.animate {
      opacity: 1;
      -webkit-filter: blur(0) !important;
    }

    cite {
      font-family: Verdana, sans-serif;
      font-size: 0.9rem;
      color: #aaa;
      opacity: 0;
      font-style: normal;
      font-weight: 500;
    }

    cite.animate {
      opacity: 1;
    }
  </style>
</head>
<body>
  <blockquote>
    <p>
      <span data-duration="1.1" data-delay=".23" data-blur="6">“Two&nbsp;</span>
      <span data-duration="1.4" data-delay=".43" data-blur="3">things&nbsp;</span>
      <span data-duration="1.8" data-delay=".42" data-blur="5">are&nbsp;</span>
      <span data-duration="1.2" data-delay=".25" data-blur="9">infinite:&nbsp;</span>
      <span data-duration="1.7" data-delay=".30" data-blur="4">the&nbsp;</span>
      <span data-duration="1.2" data-delay=".29" data-blur="3">universe&nbsp;</span>
      <span data-duration="1.4" data-delay=".26" data-blur="5">and&nbsp;</span>
      <span data-duration="1.7" data-delay=".19" data-blur="9">human&nbsp;</span>
      <span data-duration="1.2" data-delay=".11" data-blur="5">stupidity;&nbsp;</span>
      <span data-duration="1.9" data-delay=".19" data-blur="2">and&nbsp;</span>
      <span data-duration="1.2" data-delay=".36" data-blur="9">I'm&nbsp;</span>
      <span data-duration="1.8" data-delay=".17" data-blur="3">not&nbsp;</span>
      <span data-duration="1.2" data-delay=".30" data-blur="10">sure&nbsp;</span>
      <span data-duration="1.5" data-delay=".50" data-blur="4">about&nbsp;</span>
      <span data-duration="1.8" data-delay=".19" data-blur="2">the&nbsp;</span>
      <span data-duration="1.3" data-delay=".18" data-blur="4">universe.”&nbsp;</span>
    </p>
    <cite>Albert Einstein</cite>
  </blockquote>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script>
    const words = document.getElementsByTagName('span');
    const cite = document.getElementsByTagName('cite');

    const animate = () => {
      let maxDelay = 0;
      let maxDuration = 0;

      for (let i = 0; i < words.length; i++) {
        const word = words[i];
        const duration = parseFloat(word.dataset.duration);
        const delay = parseFloat(word.dataset.delay);
        const blur = word.dataset.blur;

        maxDelay = Math.max(delay, maxDelay);
        maxDuration = Math.max(duration, maxDuration);

        gsap.set(word, {
          'filter': `blur(${blur}px)`
        });

        gsap.to(word, {
          opacity: 1,
          filter: 'blur(0px)',
          duration: duration,
          delay: delay,
          ease: 'power1.in'
        });
      }

      gsap.to(cite, {
        opacity: 1,
        duration: maxDuration,
        delay: maxDelay,
        ease: 'power1.in'
      });

      gsap.delayedCall((maxDuration + maxDelay), () => {
        const baseDelay = 3;
        gsap.to(words, { opacity: 0, delay: baseDelay });
        gsap.to(cite, { opacity: 0, delay: baseDelay });
        gsap.delayedCall(baseDelay + (maxDuration * 2), animate);
      });
    };

    animate();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Animation with Random Colors</title>
  <style>
    * {
      margin: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      background-color: black;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    blockquote {
      display: block;
      margin: 0 auto;
      text-align: center;
      max-width: 900px;
    }

    p,
    cite {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    p {
      font-family: Georgia, serif;
      color: white;
      font-size: 2.7rem;
      font-style: italic;
      font-weight: 300;
      padding-bottom: 2rem;
    }

    span {
      will-change: opacity, color;
      opacity: 0;
    }

    cite {
      font-family: Verdana, sans-serif;
      font-size: 0.9rem;
      color: #aaa;
      opacity: 0;
      font-style: normal;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <blockquote>
    <p>
      <span data-duration="1.1" data-delay=".23" data-blur="6">“Two&nbsp;</span>
      <span data-duration="1.4" data-delay=".43" data-blur="3">things&nbsp;</span>
      <span data-duration="1.8" data-delay=".42" data-blur="5">are&nbsp;</span>
      <span data-duration="1.2" data-delay=".25" data-blur="9">infinite:&nbsp;</span>
      <span data-duration="1.7" data-delay=".30" data-blur="4">the&nbsp;</span>
      <span data-duration="1.2" data-delay=".29" data-blur="3">universe&nbsp;</span>
      <span data-duration="1.4" data-delay=".26" data-blur="5">and&nbsp;</span>
      <span data-duration="1.7" data-delay=".19" data-blur="9">human&nbsp;</span>
      <span data-duration="1.2" data-delay=".11" data-blur="5">stupidity;&nbsp;</span>
      <span data-duration="1.9" data-delay=".19" data-blur="2">and&nbsp;</span>
      <span data-duration="1.2" data-delay=".36" data-blur="9">I'm&nbsp;</span>
      <span data-duration="1.8" data-delay=".17" data-blur="3">not&nbsp;</span>
      <span data-duration="1.2" data-delay=".30" data-blur="10">sure&nbsp;</span>
      <span data-duration="1.5" data-delay=".50" data-blur="4">about&nbsp;</span>
      <span data-duration="1.8" data-delay=".19" data-blur="2">the&nbsp;</span>
      <span data-duration="1.3" data-delay=".18" data-blur="4">universe.”&nbsp;</span>
    </p>
    <cite>Albert Einstein</cite>
  </blockquote>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script>
    // Function to generate a random color in RGB format
    const getRandomColor = () => {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r}, ${g}, ${b})`;
    };

    const words = document.getElementsByTagName('span');
    const cite = document.getElementsByTagName('cite');

    const animate = () => {
      let maxDelay = 0;
      let maxDuration = 0;

      for (let i = 0; i < words.length; i++) {
        const word = words[i];
        const duration = parseFloat(word.dataset.duration);
        const delay = parseFloat(word.dataset.delay);
        const blur = word.dataset.blur;

        maxDelay = Math.max(delay, maxDelay);
        maxDuration = Math.max(duration, maxDuration);

        // Generate a random color for each span
        const randomColor = getRandomColor();

        gsap.set(word, {
          'filter': `blur(${blur}px)`,
          color: randomColor, // Set the initial random color
          opacity: 0
        });

        // Animate the span to white and remove blur
        gsap.to(word, {
          opacity: 1,
          filter: 'blur(0px)',
          color: 'white', // Transition to white
          duration: duration,
          delay: delay,
          ease: 'power1.in'
        });
      }

      // Animate the citation
      gsap.to(cite, {
        opacity: 1,
        duration: maxDuration,
        delay: maxDelay,
        ease: 'power1.in'
      });

      // Reset animation after completion
      gsap.delayedCall((maxDuration + maxDelay), () => {
        const baseDelay = 3;
        gsap.to(words, { opacity: 0, delay: baseDelay });
        gsap.to(cite, { opacity: 0, delay: baseDelay });
        gsap.delayedCall(baseDelay + (maxDuration * 2), animate);
      });
    };

    // Start the animation
    animate();
  </script>
</body>
</html>