Надо сделать смену страниц сайта путём наплывания справа. Откат к меню - сплывание вправо наплывшей страницы.
1) Делал путём растягивания страницы в два раза по ширине, нанесения фоновых картинок background-attachment: fixed, скрытия скроллбара, и программного скроллинга через jquery.scrollTo-min.js
2) Делал css тэгом animation.
3) Делал наплывающую страницу fixed блоком, меняющим своё положение через transition-duration.
Но во всех случаях анимация происходит рывками. Фоновая картинка основной страницы 275кб, наплывающей - 633кб (она тестовая). Пытался на стороне сервера делать предуменьшение по отосланным размерам клиента - долго.
Куда копать?
Вот, что сейчас имею -
vegasib.ru/new#page1 {
text-align: left;
width: 100%;
float: left;
height: 100%;
}
.background_mainer{
position: absolute;
z-index: -2;
background-attachment: fixed;
width: 100%;
height: 100%;
}
#page2 {
text-align: left;
width: 100%;
float: left;
height: 100%;
position: fixed;
left: 100%;
background-attachment: fixed;
background-image: url(../images/bg3x.jpg);
background-size: cover;
}
html body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
html {
overflow-x: hidden;
height: 100%;
}
body {
width: 100%;
}
<div id="page1">
<div class="background_mainer" style="background-image: url(./images/bg2xx.jpg); background-size: cover;"></div>
<div class="main" id="main_menu">
пункты меню на главной странице
</div>
</div>
<div id="page2">
<div class="main" id="about_us" style="display: none;">
контент первой наплывающей страницы
</div>
<div class="main" id="test" style="display: none;">
контент второй наплывающей страницы
</div>
</div>
Простой
