Здравствуйте. Подскажите пожалуйста ответ на следующий вопрос. Применил на следующем сайте:
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 при первой загрузке данный эффект подтормаживает страницу. Если кто-нибудь сталкивался, подскажите пожалуйста как решить данную проблему.
