집 >웹 프론트엔드 >JS 튜토리얼 >커서 트레일 부분 tml css js

커서 트레일 부분 tml css js

Linda Hamilton원래의: 2024-10-08 06:17:30362검색

Cursor trail part tml css js

코드는 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color-Selectable Cursor Trail Effect</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #333;
      font-family: monospace;
      flex-direction: column; /* Allow elements to stack vertically */
    }
    .terminal {
      position: relative;
      width: 400px;
      height: 300px;
      background-color: #1e1e1e;
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid #444;
      padding: 20px;
      cursor: none;
      transition: background-color 0.3s ease;
    }
    .trail {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7); /* Placeholder color, dynamically changed */
      box-shadow: 0 0 5px 6px white; /* Will change based on selected color */
      pointer-events: none;
      animation: fade 4s linear forwards;
    }
    @keyframes fade {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0); }
    }
    .controls {
      display: flex;
      position: absolute;
      bottom: 10px;
      gap: 20px; /* Spacing between color pickers */
      margin-top: 20px; /* Space between terminal and color pickers */
      color: white;
    }
    .color-picker {
      padding: 5px 10px;
      font-size: 14px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="terminal" id="terminalBox">
</div>
<div class="controls">
  <label for="backgroundPicker">Background Color:</label>
  <input type="color" id="backgroundPicker" class="color-picker" value="#1e1e1e">

  <label for="colorPicker">Cursor Trail Color:</label>
  <input type="color" id="colorPicker" class="color-picker" value="#0f0bd4">
</div>

  <script>
    const terminalBox = document.getElementById('terminalBox');
    const colorPicker = document.getElementById('colorPicker');
    const backgroundPicker = document.getElementById('backgroundPicker');
    let trailColor = '#0f0bd4'; // Default trail color

    // Update cursor trail color when user picks a color
    colorPicker.addEventListener('input', (e) => {
      trailColor = e.target.value;
    });

    // Update terminal background color when user picks a color
    backgroundPicker.addEventListener('input', (e) => {
      terminalBox.style.backgroundColor = e.target.value;
    });

    // Create cursor-following particle effect with selected color
    terminalBox.addEventListener('mousemove', (e) => {
      const rect = terminalBox.getBoundingClientRect();

      // Create a small circle (trail)
      const trail = document.createElement('div');
      trail.className = 'trail';
      terminalBox.appendChild(trail);

      // Set the trail position relative to the terminal box
      trail.style.left = `${e.clientX - rect.left - 7.5}px`; // Center the circle
      trail.style.top = `${e.clientY - rect.top - 7.5}px`;

      // Change the trail color based on selected color
      trail.style.backgroundColor = trailColor;
      trail.style.boxShadow = `0 0 5px 2px ${trailColor}`;

      // Remove the trail element after the animation ends
      setTimeout(() => trail.remove(), 1000);  // The time here matches the animation duration in CSS
    });
  </script>
</body>
</html>

위 내용은 커서 트레일 부분 tml css js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css JS

성명：

이전 기사：API 테스트 생성기: 종합 가이드다음 기사：API 테스트 생성기: 종합 가이드