Как визуализировать анимацию Vanilla JS в Angular

Question

Мне нужно применить анимацию к компоненту страницы с ошибкой в ​​angular. Я уже создал анимированную страницу, используя Vanilla JS. Теперь мне нужно применить эту логику анимации в теге script к моему angular компоненту. Как этого добиться? Пожалуйста, помогите мне. Мой код здесь:

<div id="container">
    <div class="content">
        <h2>404</h2>
        <h4>Opps! Page not found</h4>
        <p>
            The page you were looking for doesn't exist. You may
            have mistyped the address or the page may have moved.
        </p>
        <a href="#">Back To Home</a>
    </div>
</div>
<script type="text/javascript">
    var container = document.getElementById('container');
    window.onmousemove = function(e){
        var x = - e.clientX/5,
            y = - e.clientY/5;
        container.style.backgroundPositionX = x + 'px';
        container.style.backgroundPositionY = y + 'px';
    }
</script>

Answer 1

, если целевой элемент находится в шаблоне компонента

<div class="container" (mousemove)="onMousemoveHandler($event)">
</div>

compo nnet

  onMousemoveHandler(e: MouseEvent) {

    const x = -e.clientX / 5;
    const y = -e.clientY / 5;

    const container = e.target as HTMLElement;
    container.style.backgroundPositionX = x + "px";
    container.style.backgroundPositionY = y + "px";
  }

demo ?

Answer 2

пока предварительный ответ работает нормально, но если вы хотите использовать тот же эффект на другом элементе, не находящемся внутри этого компонента, директива angular является идеальным вариантом использования здесь.

BgTiltDirective

@Directive({
  selector: "[bgTilt]"
})
export class BgTiltDirective {
  @HostListener("mousemove", ["$event", "$event.target"]) handler(
    e: MouseEvent,
    elm: HTMLElement
  ) {
    const x = -e.clientX / 5;
    const y = -e.clientY / 5;

    elm.style.backgroundPositionX = x + "px";
    elm.style.backgroundPositionY = y + "px";
  }
}

шаблон

<div class="container" bgTilt></div>

демо ?‍♂️