【阴影】几种随鼠标移动阴影文字效果（JavaScript实现）

Sinvon
32 阅读4分钟

效果一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>光影文字动画</title>
    <link rel="stylesheet" href="style.css" />

    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
      }

      #text {
        font-size: 100px;
        font-weight: bold;
        color: white;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div id="text">SINVON</div>
    <!-- <script src="script.js"> -->
    <script>
      document.addEventListener('mousemove', function(event) {
        const textElement = document.getElementById('text');
        const textRect = textElement.getBoundingClientRect();
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        const textCenterX = textRect.left + textRect.width / 2;
        const textCenterY = textRect.top + textRect.height / 2;

        // 鼠标与字体中心的相对位置，调整阴影方向使其与鼠标中心对称
        const relativeX = textCenterX - mouseX;
        const relativeY = textCenterY - mouseY;

        // 根据字体中心与鼠标距离动态调整阴影长度，模拟光源效果
        const distanceToText = Math.sqrt(relativeX ** 2 + relativeY ** 2);
        const maxShadowLength = 50; // 阴影最大长度
        const minDistance = 50; // 距离字体多近时阴影长度开始减小
        const shadowLength = Math.max(maxShadowLength - (distanceToText - minDistance), 0);

        // 设置阴影
        textElement.style.textShadow = `${relativeX}px ${relativeY}px ${shadowLength}px rgba(0, 0, 0, ${Math.min(shadowLength / maxShadowLength, 1)})`;
      });

      document.addEventListener('mouseleave', function() {
        document.getElementById('text').style.textShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
      });
    </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>光影文字动画</title>
    <link rel="stylesheet" href="style.css" />

    <style>
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background-color: #f0f0f0;
        }
  
        #text {
          font-size: 100px;
          font-weight: bold;
          color: white;
          text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
      </style>
  </head>
  <body>
    <div id="text">SINVON</div>
    <!-- <script src="script.js"> -->
        <script>
            document.addEventListener('mousemove', function(event) {
                const textElement = document.getElementById('text');
                const textRect = textElement.getBoundingClientRect();
                const mouseX = event.clientX;
                const mouseY = event.clientY;
                const textCenterX = textRect.left + textRect.width / 2;
                const textCenterY = textRect.top + textRect.height / 2;
                
                // 鼠标与字体中心的相对位置，调整阴影方向使其与鼠标中心对称
                const relativeX = textCenterX - mouseX;
                const relativeY = textCenterY - mouseY;
                
                // 设置一个基础阴影长度，确保在页面任意位置都有阴影
                let shadowLength = 20; // 基础阴影长度
                
                // 计算鼠标与字体中心的实际距离
                const distanceToText = Math.sqrt(relativeX ** 2 + relativeY ** 2);
                
                // 当鼠标接近文字时，逐渐减少阴影长度，模拟光源靠近的效果
                if (distanceToText < 200) { // 200作为一个示例距离，可根据实际情况调整
                    shadowLength = Math.max(20 - (distanceToText - 100), 0); // 100为开始减小阴影长度的距离阈值
                }
                
                // 设置阴影
                textElement.style.textShadow = `${relativeX}px ${relativeY}px ${shadowLength}px rgba(0, 0, 0, ${Math.min(shadowLength / 20, 1)})`;
            });
    
            document.addEventListener('mouseleave', function() {
                document.getElementById('text').style.textShadow = 'none';
            });
        </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>全页面鼠标控制阴影</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            overflow: hidden; /* 防止页面滚动 */
        }
        #text {
            font-size: 100px;
            font-weight: bold;
            color: white;
            position: absolute; /* 使文字相对于页面定位 */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="text">SINVON</div>
    <script>
        const maxShadowLength = 150; // 阴影最大长度
        const textElement = document.getElementById('text');

        document.addEventListener('mousemove', function(event) {
            const pageWidth = window.innerWidth;
            const pageHeight = window.innerHeight;
            const centerX = pageWidth / 2;
            const centerY = pageHeight / 2;
            const mouseX = event.clientX;
            const mouseY = event.clientY;
            
            // 计算鼠标与页面中心的直线距离，模拟太阳角度
            const distanceFromCenter = Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2));
            const maxDistance = Math.sqrt(pageWidth ** 2 + pageHeight ** 2) / 2; // 页面对角线的一半，即理论上的最大距离
            
            // 根据距离计算阴影长度，当鼠标接近边缘时阴影最长
            let shadowLength = maxShadowLength * (1 - distanceFromCenter / maxDistance);
            shadowLength = Math.min(Math.max(shadowLength, 0), maxShadowLength); // 限制阴影长度在0到maxShadowLength之间

            // 阴影方向，假设光源在页面中心上方，阴影与鼠标位置相反
            const offsetX = -(mouseX - centerX) / maxDistance * shadowLength;
            const offsetY = -(mouseY - centerY) / maxDistance * shadowLength;

            // 应用动态阴影
            textElement.style.textShadow = `${offsetX}px ${offsetY}px ${shadowLength}px rgba(0, 0, 0, ${Math.min(shadowLength / maxShadowLength, 1)})`;
        });

        document.addEventListener('mouseleave', function() {
            textElement.style.textShadow = 'none';
        });
    </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>阴影优化效果</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        #text {
            font-size: 100px;
            font-weight: bold;
            color: white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="text">SINVON</div>
    <script>
        const maxShadowLength = 150; // 阴影最大长度
        const blurRadius = 5; // 阴影模糊半径，减小此值可以使阴影更清晰
        const textElement = document.getElementById('text');
        const viewportSize = { width: window.innerWidth, height: window.innerHeight };
        
        document.addEventListener('mousemove', function(event) {
            const centerX = viewportSize.width / 2;
            const centerY = viewportSize.height / 2;
            const mouseX = event.clientX;
            const mouseY = event.clientY;
            
            // 计算鼠标与页面中心的直线距离，模拟太阳角度
            const distanceFromCenter = Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2));
            const maxDistance = Math.sqrt(viewportSize.width ** 2 + viewportSize.height ** 2) / 2; // 页面对角线的一半
            
            // 随着鼠标远离中心，阴影长度线性增加
            let shadowLength = distanceFromCenter / maxDistance * maxShadowLength;
            shadowLength = Math.min(shadowLength, maxShadowLength); // 确保阴影长度不超过最大值

            // 阴影方向，假设光源在页面中心上方，阴影与鼠标位置相反
            const offsetX = -(mouseX - centerX) / maxDistance * shadowLength;
            const offsetY = -(mouseY - centerY) / maxDistance * shadowLength;

            // 应用动态阴影，减小模糊距离以提高清晰度
            textElement.style.textShadow = `${offsetX}px ${offsetY}px ${blurRadius}px rgba(0, 0, 0, ${Math.min(shadowLength / maxShadowLength, 1)})`;
        });

        document.addEventListener('mouseleave', function() {
            textElement.style.textShadow = 'none';
        });
    </script>
</body>
</html>

效果五

其实就是在效果4的基础上修改了两个参数：

const maxShadowLength = 15; // 阴影最大长度

const blurRadius = 10; // 阴影模糊半径，减小此值可以使阴影更清晰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影优化效果</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        #text {
            font-size: 100px;
            font-weight: bold;
            color: white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="text">SINVON</div>
    <script>
        const maxShadowLength = 15; // 阴影最大长度
        const blurRadius = 10; // 阴影模糊半径，减小此值可以使阴影更清晰
        const textElement = document.getElementById('text');
        const viewportSize = { width: window.innerWidth, height: window.innerHeight };
        
        document.addEventListener('mousemove', function(event) {
            const centerX = viewportSize.width / 2;
            const centerY = viewportSize.height / 2;
            const mouseX = event.clientX;
            const mouseY = event.clientY;
            
            // 计算鼠标与页面中心的直线距离，模拟太阳角度
            const distanceFromCenter = Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2));
            const maxDistance = Math.sqrt(viewportSize.width ** 2 + viewportSize.height ** 2) / 2; // 页面对角线的一半
            
            // 随着鼠标远离中心，阴影长度线性增加
            let shadowLength = distanceFromCenter / maxDistance * maxShadowLength;
            shadowLength = Math.min(shadowLength, maxShadowLength); // 确保阴影长度不超过最大值

            // 阴影方向，假设光源在页面中心上方，阴影与鼠标位置相反
            const offsetX = -(mouseX - centerX) / maxDistance * shadowLength;
            const offsetY = -(mouseY - centerY) / maxDistance * shadowLength;

            // 应用动态阴影，减小模糊距离以提高清晰度
            textElement.style.textShadow = `${offsetX}px ${offsetY}px ${blurRadius}px rgba(0, 0, 0, ${Math.min(shadowLength / maxShadowLength, 1)})`;
        });

        document.addEventListener('mouseleave', function() {
            textElement.style.textShadow = 'none';
        });
    </script>
</body>
</html>
avatar
文章
阅读
粉丝