AndrewJBateman/ionic-angular-parallax

:clipboard: Ionic app to display a parallax effect so scrolling makes an image move out of view slower than the actual content. Another great tutorial from Simon Grimm - see Readme for link

⚡ Ionic Angular Parallax

• Ionic app to display a parallax effect so scrolling makes an image move out of view slower than the actual content.
• Another great tutorial from Simon Grimm Youtube: 'Building an Ionic Parallax Image Effect'.

📄 Table of contents

• ⚡ Ionic Angular Parallax
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • ✉️ Contact

📚 General info

• Angular Attribute directive used to contain code to change the appearance of a DOM element.
• Ionic DomController used with Ion scroll event to read DOM header height and write DOM changes to transform image.

📷 Screenshots

📶 Technologies

• Ionic v6
• Ionic/angular v6 Ionic Angular building blocks
• Angular v15
• Ionic Native Splash Screen v5 plugin to display and hide a splash screen during application launch. Not actually used yet here.

💾 Setup

• npm i to install dependencies
• Type: 'ionic serve' to start the server on _localhost://8100

💻 Code Examples

• Extract from parallax-header.directive.ts component initialization lifecycle hook to get an element from the Home page by its class name.

ngOnInit() {
    let content = this.element.nativeElement;
    this.header = content.getElementsByClassName("parallax-image")[0];

    this.domCtrl.read(() => {
      this.headerHeight = this.header.clientHeight;
    });
  }

🆒 Features

• Use of very compact code (not mine) to produce array list *ngFor="let i of [].constructor(30)" - see 👏 Inspiration below
• Dom Controller read() and write() functions used so Ionic-Angular schedules read & write operations at the best time. On a related note: DOM updates are better done in batches using the Dom Controller - see JOSH MORONY blog: Increasing Performance with Efficient DOM Writes in Ionic for more on this.
• Use of webkitTransform translate3d function to manipulate the image to give the parallax effect.

📋 Status & To-do list

• Status: Working
• To-do: Nothing

👏 Inspiration

• Simon Grimm Youtube: 'Building an Ionic Parallax Image Effect'
• Ionic Academy: Building an Ionic Parallax Image Effect [v5]
• Stackoverflow: 'Angular 2 - NgFor using numbers instead collections'
• JOSH MORONY blog: Increasing Performance with Efficient DOM Writes in Ionic

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com