How To Use Parallax-js In Angular

In this blog, we will see how to use the Parallax-js effect in angular.

What is Parallax-js, and how does it work?

At the start of the document’s body, parallax.js will construct a fixed-position element for each parallax image. This mirror element will lie behind the other elements, matching the target object’s location and proportions.

Because of the nature of this implementation, you must make these parallax objects and any layers beneath them transparent in order to see the parallax effect underneath. Also, if this element has no other content, you’ll need to make sure it has some fixed dimensions, or you won’t be able to see anything.

Let’s Implement it,

We can use @angular/CLI to create a new Angular Project for this demo.

Use the following command in your terminal window:

$ ng new $ ng new AngularParallaxJsDemo

This will create a new Angular project with CSS styles (rather than Sass, Less, or Stylus), no routing, and no tests.

Go to the newly created project folder:

$ cd AngularParallaxJsDemo

npm -s install parallax-js

And also We can install Typings npm package.

npm install typings -g --save-dev

2. Add Typings Class

Because it doesn’t have typings available at @types/ you must create a document.

src>typings.d.ts

3. Declare module in typings.d.ts

Declare the module in typings.d.ts and expose the void function so the “new” feature can be implemented later.

declare module 'parallax-js' {
    export interface parallax {}
    export function Parallax(scene:any, optionns?:object): void;
}

4. Import ngAfterContentInit in your .ts component

Because it must to read first all your HTML to use Parallax and declare “require” before of decorator Component.

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

declare let require: any;

@Component({...})

Then, implement AfterContentInit in your class component.

5.  Use Parallax importing with “require”.

export class AppComponent implements AfterContentInit {

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

Now it’s done.

OUTPUT:

I hope you guys understand how I can do this. Let me know if you face any difficulties.

You can watch my previous blog here.

Happy Coding {;}