ihk24/templates/source/js/modules/magazine-header.js

// import $ from "jquery";
const $ = require('jquery');
class MagazineHeader {
  constructor(header) {
    this.header = header.addClass('initiated');
    this.gradient = header.find('.gradient');
    this.title = header.find('.title');
    this.window = $(window);
    this.minScale = 0;
    this.preventResize = false;

    this.getMinScale();
    this.initScroll();

    this.window.on('resize', () => {
      this.getMinScale();
    })

    $('body')
      .on('overlay-open', () => {
        this.preventResize = true;
      })
      .on('overlay-close', () => {
        this.preventResize = false;
      })
  }

  initScroll() {
    window.addEventListener("scroll", () => {
      window.requestAnimationFrame( () => {
        if (!this.preventResize) {
          this.checkScroll();
        }
      })
    },{passive: true});

    this.checkScroll();
  };

  checkScroll() {
    const st = this.window.scrollTop();
    const scale = 1 - Math.round(st / 4) / 100;
    const opacity = 1 - Math.round(st / 2) / 100;
    this.gradient.css({'transform': 'scale(1, ' + (scale > this.minScale ? scale : this.minScale) + ')'});
    this.title.css({
      'transform': 'translate(-50%, -50%) scale(' + (scale > this.minScale ? scale : this.minScale) + ')',
      'opacity': opacity > 0 ? opacity : 0
    })
  }

  getMinScale() {
    this.minScale = Math.round(1000 / this.header.outerHeight()) / 100;
  }
}

$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
  $('.magazine-header:not(.initiated)').each(function(i) {
    new MagazineHeader($(this));
  });
})