由于关于Angular和parallax.js的组合的文章较少，所以我决定写一篇。

完成的形象

听说视差效果也有几种类型，但这篇文章是关于使用Angular实现根据鼠标悬停来使背景移动的例子。

参考的网站

你可以在以下网站上找到答案：如何在Angular 2+(5.2.10)中使用parallax.js – Medium。但我会再次在这里简要介绍一下。

准备好了

已经存在一个 Angular 项目，并将其解释为有一个名为 ParallaxComponent 的组件。

安装parallax-js的步骤1

npm i parallax-js

在中国的母语中，只需要一个选项来改述以下句子：

为 angular.json 添加对 parallax.js 的引用。

"scripts": [
  "./node_modules/parallax-js/dist/parallax.min.js"
]

需要使用require，因此需要安装@types/node库。

在参考这个的基础上，在Angular 7（TypeScript 3.1.3）中找不到名为 ‘require’ 的内容。

请安装@types/node库。

npm i @types/node

在 tsconfig.app.json 文件中添加 “types”:[“node”]。

  "compilerOptions": {
    "types": [
      "node"
    ]

组件的编辑

添加下面的ngAfterContentInit()函数

import { Component } from '@angular/core';

@Component({
  selector: 'app-parallax',
  templateUrl: './parallax.component.html',
  styleUrls: ['./parallax.component.scss']
})
export class ParallaxComponent {

  constructor() { }

  ngAfterContentInit() {
    const Parallax = require('parallax-js')
    const scene = document.getElementById('scene');
    const parallaxInstance = new Parallax(scene, {
      relativeInput: true,
      haverOnly: true
    });
  }

}

在以下的方式中，将背景图像设置在容器中的 CSS 中：

html、css可如此编写，通过 CSS 在容器中设置背景图像。

参考网站
https://csspoint101.com/parallax-on-hover-effect-using-parallax-js/

<div id="container" class="container">
    <div id="scene" class="scene">
　　　　　　　　　　　　　　　　<div data-depth="1.00"><img src="../../assets/astronaut.png"></div>
　　　　　　　　　　　　　　　　<div data-depth="0.60"><img src="../../assets/Neptune.png"></div>
　　　　　　　　　　　　　　　　<div data-depth="0.40"><img src="../../assets/Mars.png"></div>
　　　　　　　　　　　　　　　　<div data-depth="0.80"><img src="../../assets/rocket.png"></div>
    </div>
</div>

.container{
    background: url("../../assets/background.jpg") no-repeat;
    width: 100%;
    overflow: hidden;
}

总结