CodePen에서는 동작하던 코드가 제 홈페이지에서는 동작하지 않는 문제(TweenMax?)

이삼사234

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 4,600

브라우저는 크롬 / 홈페이지는 아보카도 에디션 사용중입니다.

https://codepen.io/ReGGae/pen/VggNze

홈페이지에 해당 효과를 적용하려고 하였습니다.

해당 코드의 css/js 파일을 따로 만들어 서버에 업로드 후, head에

Copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<link rel="stylesheet" href="css파일경로">
<script src="js파일경로"></script>

로 각각 트윈맥스/효과 css 파일/효과 js 파일 스크립트를 연결해준 다음
<canvas id="canvas"></canvas> 코드를 head에 함께 넣어 canvas도 만들어 주었습니다.

각 코드를 codepen에서 시험해본 결과 제대로 동작하는 것도 확인하였습니다....

(여기서부터 문제상황ㅠㅠ)

그러나 제 홈페이지에서는 마우스를 따라다니는 원 자체가 아예 보이지 않는데, 뭐가 문제였을까요?

(제가 확인해본 것들..)

css파일과 js파일의 링크를 크롬 탭에서 직접 열어본 결과, 잘 열리는 걸로 보아서 css와 js 파일의 경로가 틀린 건 아닌 듯 합니다.. 또한, 우클릭-검사 에서 canvas를 확인하였더니 canvas에 css 속성이 잘 적용된 것을 확인하였습니다...... (width와 height를 100%으로 적용시켜두었는데 화면 크기에 맞게 canvas의 가로세로 너비가 맞춰져 있었음)

혹시 제가 뭔가 놓친 부분이 있을까요...?

적용한 코드는 아래와 같습니다.

CSS:

Copy

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

JS:

Copy

class CanvasCursor {
  constructor() {
    this.bindMethods();
    this.canvas = document.querySelector("#canvas");
    this.ctx = this.canvas.getContext("2d");
    this.bounds = {
      w: window.innerWidth,
      h: window.innerHeight
    };
    this.size = {
      radius: 50,
      w: 0,
      h: 0
    };
    this.angle = {
      start: -0.5,
      end: -0.5
    };
    this.mouse = {
      current: {
        x: 0,
        y: 0
      },
      last: {
        x: 0,
        y: 0
      },
      ease: 0.15
    };
    this.init();
  }
  bindMethods() {
    ["draw", "onResize", "getPos", "onPress", "onRelease"].forEach(method => this[method] = this[method].bind(this));
  }
  setBounds() {
    this.canvas.style.height = `${this.bounds.h}px`;
    this.canvas.style.width = `${this.bounds.w}px`;
    this.canvas.height = this.bounds.h;
    this.canvas.width = this.bounds.w;
    this.size.h = this.canvas.height;
    this.size.w = this.canvas.width;
  }
  draw() {
    const {
      radius,
      w,
      h
    } = this.size;
    const {
      current,
      last,
      ease
    } = this.mouse;
    const {
      start,
      end
    } = this.angle;
    this.ctx.clearRect(last.x - 100, last.y - 100, radius + 200, radius + 200);
    last.x += (current.x - last.x) * ease;
    last.y += (current.y - last.y) * ease;
    this.ctx.beginPath();
    this.ctx.arc(last.x, last.y, radius - 4, 0, 2 * Math.PI);
    this.ctx.lineWidth = 2;
    this.ctx.strokeStyle = "rgba(255, 255, 255)";
    this.ctx.stroke();
    this.ctx.closePath();
    this.ctx.beginPath();
    this.ctx.arc(last.x, last.y, radius - 4, start * Math.PI, end * Math.PI);
    this.ctx.lineWidth = 2;
    this.ctx.strokeStyle = "blue";
    this.ctx.stroke();
    this.ctx.closePath();
    requestAnimationFrame(this.draw);
  }
  onResize() {
    this.setBounds();
    this.draw();
  }
  onPress() {
    TweenMax.to(this.size, 0.75, {
      radius: 20,
      ease: Expo.easeOut
    });
    TweenMax.to(this.angle, 0.75, {
      end: 3.5,
      start: 1.5,
      ease: Power3.easeOut
    });
  }
  onRelease() {
    TweenMax.to(this.size, 1, {
      radius: 50,
      ease: Elastic.easeOut
    });
    TweenMax.to(this.angle, 1, {
      end: -0.5,
      start: -0.5,
      ease: Power3.easeOut
    });
  }
  getPos(e) {
    Object.assign(this.mouse.current, {
      x: e.clientX,
      y: e.clientY
    });
  }
  addListeners() {
    window.addEventListener("resize", this.onResize);
    window.addEventListener("mousemove", this.getPos);
    window.addEventListener("mousedown", this.onPress);
    window.addEventListener("mouseup", this.onRelease);
  }
  init() {
    this.addListeners();
    this.setBounds();
    requestAnimationFrame(this.draw);
  }
}
const canvasCursor = new CanvasCursor();

javascript 아보카도에디션