Angular で parallax 実装してみた

Angular + parallax.js の組み合わせに関する記事が少なかったので、書いてみます。 

## 完成イメージ

パララックスにもいくつか種類があるみたいですが、この記事は
マウスの hover に合わせて背景がズレるやつを Angular で実装する例です
 
![Jun-21-2021 22-06-47.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/02c5ae7f-59ed-b0d8-506c-3f9068ed6d37.gif)


## 参考にしたサイト

基本的には、下記のサイトに答えが載っているのだが、改めてここに記す
[How To Use parallax.js in Angular 2+(5.2.10) - Medium](https://medium.com/@jonmichaeldreher/how-to-use-parallax-js-in-angular-2-5-2-10-c06e95cb7f1)


## 下準備

すでに Angular のプロジェクトが存在しており、`ParallaxComponent` という名前のコンポーネントがあるものとして解説します。

### 手順1 parallax-js をインストール

```terminal
npm i parallax-js
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/031dca99-8e58-7984-520a-d3fa69c64470.png)

### 手順2 angular.json に parallax.js の参照を追加

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/03e4c822-aedc-e988-dc27-8b28975b5308.png)

## 手順3 require を使うので　@types/node をインストール

これを参考に
[angular 7（TypeScript 3.1.3）で名前 'require'が見つかりません](https://www.it-swarm-ja.com/ja/angular/angular-7%EF%BC%88typescript-313%EF%BC%89%E3%81%A7%E5%90%8D%E5%89%8D-'require'%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93/808398621/)

### @types/node をインストール

```terminal
npm i @types/node
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/1b028b17-3a2d-1fc6-af7d-9e1770622558.png)

### tsconfig.app.json に "types":["node"] を追加

```json:tsconfig.app.json
  "compilerOptions": {
    "types": [
      "node"
    ]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/74980826-bc9d-a2de-58ad-a249fe004100.png)

## コンポーネント の編集 

以下の `ngAfterContentInit() ` 関数を追加

```typescript:parallax.component.ts
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
    });
  }

}
```

html、css はこんな感じで, `container`　に背景画像を css で設定する

>参考サイト
https://csspoint101.com/parallax-on-hover-effect-using-parallax-js/

```html:parallax.component.html
<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>
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/902fcf98-dbd9-e2cf-61bb-ba921b2e439f.png)

# まとめ

以上で
Angular11 で parallax.js　を使うことができました
![parallaxonhover-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/e18f8800-e0c7-99b5-502e-4b7f176a05a2.gif)