视差网站滞后

Question

我正在开发一个视差网站（here），导航div框使网站滞后。

我似乎能够顺利完成的唯一方法是将导航div切换为未排序的列表。

但是当我向网站添加一个按钮并单击它时：

HTML：

<div id="nope" class="coolButton">
    <h4><span>Nope.</span></h4>
</div>

CSS：

#nope {
text-align: center;
}
h4 {
margin: 0;
padding: 0;
font-size: 600%;
line-height: 1em;
font-weight: bold;
text-align: center;
color: #fff;
-webkit-transition: -webkit-transform .3s linear;

}
h4:hover {
cursor: pointer;
text-shadow: 3px 3px 10px rgba(0,0,0,.5);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
}
#nope:active:after {
display: block;
margin: 5em auto 0 auto;
content: url(kc.png);
}
h4 span {
padding: .1em .3em;
line-height: 1em;
-webkit-border-radius: .1em;
-moz-border-radius: .1em;
-webkit-transition: background-color .4s linear;

}
h4 span:hover {     
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,.5);
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,.5);
background: rgba(141,211,234,.35) url(grad.png) repeat-x top left;
}
.coolButton {
margin: 0;
padding: 10em;
font: small "Trebuchet MS", Helvetica, Arial, sans-serif;
background-position: 0 500%;
overflow: hidden;
-webkit-transition: background-position .4s ease-out;

}
.coolButton:hover {
background: url(space.png) no-repeat 50% 0;
}

网站很流畅！

我需要一个解决方案来保持网站流畅，而不会改变导航菜单的外观。