Parallax effect Angular 8+

Parallax effect Angular 8+

Parallax effects on Single Page Applications are definitely an old hat. However there’s always a first time to use something. After testing out a lot, which didn’t work like I needed it, I came up with a solution, based on a blog entry by Gaurav Foujdar. But with a different way to move the elements.

TLDR

Implement the parallax effect with an Angular directive, which works on the translate-y property of CSS3.

See the demo on Stackblitz or check out from GitHub.

angular-8-parallax-directive

hpmartini ⋅ 4 years ago

The parallax effect…

… not explained. I won’t bother you with boring explainations about that effect, which you can read for yourself on wikipedia if you feel the urge.

Prerequisites

First you have to have node.js running on your system.

For Mac users

If you’re lucky to have a Mac, just run this:

brew install node

If you don’t have homebrew installed already, go to homebrew.sh or run this:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

For anyone else

Sorry for that, but please visit nodejs.org for further instructions. I don’t have another system at hand right now.

Ahead with angular cli

Install Angulars command line interface with this, if you dont’t have it already:

npm install -g @angular/cli

Setup the Angular project

Go to the projects directory of your desire and run this command to create an Angular project:

ng new "my-awsome-parallax-project"

This creats your awesome parallax project in the directory called… I guess you know it already. The CLI fills up the project with everything needed to get it running. So start it up:

ng serve -o

The “-o” is not recommended, it just opens the angular app in your default browser.

Now the fun part starts

Lets generate a new directive:

ng generate directive common/parallax

This command puts the new directive in the sub directory common, which is not necessary, but I like to have a clean structure.

The CLI also registers the directive in the app.modules.ts, along with the default components and services.

parallax.directive.ts

import {Directive, ElementRef, HostListener, Input, Renderer2} from '@angular/core';

@Directive({
  selector: '[appParallax]'
})
export class ParallaxDirective {
  @Input('factor') set parallaxFactor(val) {
    this.factor = val ? val : 1;
  }

  private factor: number;

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) { }

  @HostListener('window:scroll')
  onWindowScroll() {
    this.renderer.setProperty(
      this.elementRef.nativeElement, 
      'style',
      `transform: translateY(${this.getTranslation()}px)`);
  }

  private getTranslation() {
    return window.scrollY * this.factor / 10;
  }
}
view on GitHub
  • The factor of how fast the element will move relative to the scroll position is passed through an @Input decorator. By default (factor = 1) the effect will be just a bitt slower then a linear scrolling element.
  • The class ElementRef is the recommended way to manipulate elementes, because directly accessing the DOM could promote XSS attacs.
  • The Renderer2 takes the ElementRef and sets the desired property in the DOM.
  • We just set the translateY CSS property of our element by multiplying the current scroll position with the passed factor. I devide that by 10, because the movement would be to fast or we could not work with integers in the HTML.
  • The @HostListener('window:scroll') will be triggered when you scroll - what a surprise - and the translate propery will be updated.

app.component.html 

<div class="container">
  <hello name=""></hello>
  <p appParallax [factor]="11">I'm slowly inverting.</p>
  <p appParallax [factor]="12">I'm doing it faster!</p>
  <p appParallax [factor]="13">Me even more.</p>
  <p appParallax [factor]="14">And I rock!</p>
</div>

<div class="container">
  <h1 appParallax [factor]="0.3">Hello Parallax</h1>

  <div id="linearScrollingText">I just scroll in linear speed</div>

  <div id="slowText" appParallax [factor]="9">I'm going faaaa... not.</div>
</div>
view on GitHub

app.component.css 

.container {
  height: 100vh;
}

#slowText {
  position: absolute;
  bottom: -30px;
  right: 10px;
}

#linearScrollingText {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
view on GitHub

Nothing special here, the container is set to 100vh so we can scoll at all. The same goes for the positioning of the two strings at the bottom.

That’s it.

Just to remember, you can watch the demo on Stackblitz or check out from GitHub.

(gif from https://abetteruserexperience.com)

LinkedInGitHubInstagramXDiscord

Blog

Kontakt

Impressum