Story Image

HTML

基本のHTML構造

                <div id="mouse-stalker" class="mouse-stalker">
                    <div id="mouse-stalker-item" class="mouse-stalker-item"></div>
                </div>

CSS

CSSファイルの内容

                .mouse-stalker {
                    position: fixed;
                    top: 0;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1px;
                    height: 1px;
                    z-index: 9999;
                    pointer-events: none;
                    mix-blend-mode: exclusion;
                }
                
                .mouse-stalker-item {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-color: #666666;
                    flex-shrink: 0;
                }
            

Javascript

Javascriptファイルの内容

                export default class MouseStalker {
                    static exec() {
                      this.init();
                      if (!this.mouseStalker || !this.mouseStalkerCircle) return;
                      document.addEventListener("mousemove", (e) => {
                        this.mousePosition.x = e.clientX;
                        this.mousePosition.y = e.clientY;
                      });
                      this.mouseStalkerHovers.forEach((element) => {
                        element.addEventListener("mouseover", () => {
                          this.mouseStalkerCircle.classList.add(
                            "mouse-stalker-item-circle-active"
                          );
                        });
                        element.addEventListener("mouseleave", () => {
                          this.mouseStalkerCircle.classList.remove(
                            "mouse-stalker-item-circle-active"
                          );
                        });
                      });
                      this.update();
                    }
                  
                    static init() {
                      this.mouseStalker = document.querySelector(".mouse-stalker-item");
                      this.mouseStalkerCircle = document.querySelector(
                        ".mouse-stalker-item-circle"
                      );
                      this.mouseStalkerHovers = document.querySelectorAll(".mouse-stalker-hover");
                      this.mousePosition = { x: 0, y: 0 };
                      this.stalkerPosition = { x: 0, y: 0 };
                    }
                  
                    static update() {
                      this.stalkerPosition.x +=
                        (this.mousePosition.x - this.stalkerPosition.x) * 0.1;
                      this.stalkerPosition.y +=
                        (this.mousePosition.y - this.stalkerPosition.y) * 0.1;
                  
                      let x = Math.round(this.stalkerPosition.x * 10) / 10;
                      let y = Math.round(this.stalkerPosition.y * 10) / 10;
                  
                      this.mouseStalker.style.transform = `translate3d(${x}px,${y}px,0)`;
                      window.requestAnimationFrame(this.update.bind(this));
                    }
                  }