import NavigationBase from '../navigation/anim-base';

export default class AboutNavigationAnimation extends NavigationBase {
  constructor() {
    super();
    this.hash = 'about';
    // Add objects to this.elem
    Object.assign(this.elem, {
      wrapper: document.getElementById('about-wrapper'),
      container: document.querySelector('#about-wrapper .container'),
      monogram: document.querySelector('#about-wrapper .monogram'),
      content: document.querySelector('#about-wrapper .content'),
    });

    this.fontSize = {
      content: 'calc(13px + .75vw)',
      monogram: '4vw',
    };
  }


  putInLaptop() {
    super.putInLaptop();
    // Calculate appropriate font size scale
    this.scaleX = this.elem.container.getBoundingClientRect().width / window.innerWidth;
    // Scale font sizes using CSS `calc`
    Object.entries(this.fontSize).forEach((pair) => {
      const [key, value] = pair;
      this.elem[key].style.fontSize = `calc(${value} * ${this.scaleX})`;
    });
  }


  removeFromLaptop() {
    super.removeFromLaptop();
    // Remove adjusted font sizes
    Array.from(Object.keys(this.fontSize)).forEach((n) => {
      this.elem[n].style.fontSize = '';
    });
  }
}

import NavigationBase from '../navigation/anim-base';

export default class AboutNavigationAnimation extends NavigationBase {
  constructor() {
    super();
    this.hash = 'about';
    // Add objects to this.elem
    Object.assign(this.elem, {
      wrapper: document.getElementById('about-wrapper'),
      container: document.querySelector('#about-wrapper .container'),
      monogram: document.querySelector('#about-wrapper .monogram'),
      content: document.querySelector('#about-wrapper .content'),
    });

    this.fontSize = {
      content: 'calc(13px + .75vw)',
      monogram: '4vw',
    };
  }


  putInLaptop() {
    super.putInLaptop();
    // Calculate appropriate font size scale
    this.scaleX = this.elem.container.getBoundingClientRect().width / window.innerWidth;
    // Scale font sizes using CSS `calc`
    Object.entries(this.fontSize).forEach((pair) => {
      const [key, value] = pair;
      this.elem[key].style.fontSize = `calc(${value} * ${this.scaleX})`;
    });
    // Turn off parallax effect
    window.parallax.disable();
  }


  removeFromLaptop() {
    super.removeFromLaptop();
    // Remove adjusted font sizes
    Array.from(Object.keys(this.fontSize)).forEach((n) => {
      this.elem[n].style.fontSize = '';
    });
    // Re-enable parallax effect
    window.parallax.enable();
  }
}

Disable Parallax3D on navigation page
Disable Parallax3D on navigation page
