follow.js

Description

there is text that can follow you

Code

<body>
  <div id="follower">👁</div>
<script type="text/javascript">
    const div = document.getElementById('follower');

    // Atur semua gaya via JS (tanpa CSS)
    div.style.position = 'fixed';
    div.style.left = '0px';
    div.style.top = '0px';
    div.style.fontFamily = 'monospace';
    div.style.fontSize = '22px';
    div.style.color = '#ff0000';
    div.style.textShadow = '0 0 6px #ff0000';
    div.style.pointerEvents = 'none';
    div.style.zIndex = '9999';
    div.style.margin = '0';
    div.style.padding = '0';
    div.style.transform = // agar posisi tepat di tengah kursor

    // Atur body
    document.body.style.margin = '0';
    document.body.style.backgroundColor = '#000';
    document.body.style.cursor = 'none';
    document.body.style.overflow = 'hidden';

    let x = window.innerWidth / 2;
    let y = window.innerHeight / 2;

    // Lacak kursor
    document.addEventListener('mousemove', (e) => {
      x = e.clientX;
      y = e.clientY;
    });

    // Animasi mengikuti
    function animate() {
      const currentX = parseFloat(div.style.left) || x;
      const currentY = parseFloat(div.style.top) || y;

      const dx = x - currentX;
      const dy = y - currentY;

      div.style.left = (currentX + dx * 0.07) + 'px';
      div.style.top = (currentY + dy * 0.07) + 'px';

      requestAnimationFrame(animate);
    }

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

In action

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

Wikidot Code Snippets

Snippets

Description

Code

In action

Rate this solution