Делаю сайт со скроллингом отдельных блоков информации. Блоки растягиваются на весь экран, у некоторых на фоне стоит изображение 1920х1080px. Скроллятся они через код:
$(document).ready(function(){
jQuery.easing.def = "easeInOutQuad";
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({'scrollTop': $target.offset().top
}, 1000, "swing", function () {window.location.hash = target;});
});
});
С подключением плагина jQuery easing.
Проблема в том, что на мониторе ноутбука скроллинг происходит плавно, но при отображении на мониторе 1920х1080 блок с фоновым изображением лагает и анимация получается дерганная. Помимо этого используется пара transition в css, но я убирал их и это никак не влияло на работу скроллинга.
Как написать правильно скрипт или разместить изображение/сверстать блоки, чтобы этих лагов не было?
Код CSS блока
.content {height: 100%;}
.content section {width: 100%; height: 100%;}
#main {
background: url('../images/main_bg.jpg');
background-size: cover;
background-position: center;
}
Код HTML
<div class="content">
<section id="main">
</section>
<section id="bio">
</section>
<section id="events">
</section>
</div>
Простой
