Home > Article > Web Front-end > Cursor trail part tml css js

Cursor trail part tml css js

Linda HamiltonOriginal: 2024-10-08 06:17:30236browse

Code is:

<!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>

The above is the detailed content of Cursor trail part tml css js. For more information, please follow other related articles on the PHP Chinese website!

css JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Create a blog with Deno nd FreshNext article：Create a blog with Deno nd Fresh

See more

Cursor trail part tml css js

Code is:

Related articles