Javascript-форум - Показать сообщение отдельно

s24344 · #1 (**permalink**) 26.05.2018, 07:37

Здравствуйте. Подскажите пожалуйста ответ на следующий вопрос. Применил на следующем сайте:
http://parus-water.ru/
эффект blur при scroll для background

class blurModule {

  constructor() {
    this.el = $('.main__slide');
    this.scroll = $(window).scrollTop();
  }


  handler () {
    // console.log(this.el);

    const w = $(window).outerWidth(true);

    const size = 1024;

    if ( w > 1024 ) {
      $(window).on('scroll', function () {

        let scroll = $(window).scrollTop();

        // console.log(scroll);

        $('.main__slide').css({
          filter: "blur(" + (scroll/60) + "px)"
        })
      })
    }
  }

  init () {
    this.handler();
  }

}

/* class blurModule {

  constructor() {
    this.el = document.querySelector('.main__slide');
  }

  handler () {
    const html = document.documentElement;
    const body = document.body;

    // let el = document.querySelector('.main__slide');
    // console.log(el);
    // console.log(this.el);

    let el = this.el;

    let w = window.innerWidth;

    if ( w > 1024 ) {
      window.onscroll = function () {
        var scrollTop = html.scrollTop || body && body.scrollTop || 0;
        scrollTop -= html.clientTop; // в IE7- <html> смещён относительно (0,0)

        el.style.filter = "blur(" + (scrollTop/50) + "px)";
      }
    } else {
      false
    }
  }

  init () {
    this.handler();
  }
} */

let blurmodule = new blurModule();

blurmodule.init();

В итоге в браузерах на базе Chromium при первой загрузке данный эффект подтормаживает страницу. Если кто-нибудь сталкивался, подскажите пожалуйста как решить данную проблему.