@alyumitskij

Как сделать смену страниц сайта наплыванием и без рывков?

Надо сделать смену страниц сайта путём наплывания справа. Откат к меню - сплывание вправо наплывшей страницы.
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>
  • Вопрос задан
  • 2633 просмотра
Пригласить эксперта
Ответы на вопрос 1
Symphony
@Symphony Куратор тега CSS
Так Вы покажите что у Вас вышло и макет?
Ап:
1. Уменьшить время анимации до .5-.6s
2. Размытые картинки
3. Во время анимации использовать маленькую картинку
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы