Скользящие переходы веб-страницы (jQuery) - PullRequest
3 голосов
/ 29 мая 2011

Несмотря на то, что на этом сайте есть похожие вопросы, non, похоже, вполне отвечает на мой вопрос ...

У меня есть сайт с 5 статическими страницами, который похож на внутреннюю часть парикмахерской.Мне бы хотелось, чтобы каждый переход страницы выглядел так, будто пользователь скользит по салону.Это означает, что контент (.content div) должен выдвигаться, а затем - следующая страница. Если это возможно, было бы хорошо иметь возможность добавлять различные классы в ссылки, чтобы изменить способ скольжения страницы и новой страницы.(т.е. справа налево или слева направо).Следует отметить, что панель навигации, логотип и нижний колонтитул не будут скользить, поскольку они находятся в одном и том же месте на каждой странице.

Мне удалось получить эффект затухания с помощью jQuery:

$(".content").css("display", "none");
$(".content").fadeIn(2000);
$("a.transition").click(function(event) {
    event.preventDefault(); 
    linkLocation = this.href; 
    $(".content").fadeOut(1000, redirectPage); 
});
function redirectPage() {
    window.location = linkLocation;
}

Однако в действительности это очень неуклюже, и я хотел бы иметь возможность скользить по страницам так, как это делается в jQuery.Я не хочу иметь одностраничный веб-сайт по причинам SEO.Я не уверен, что ответом является ajax, но никогда не изучал его, поэтому не имею опыта его использования.

Спасибо,

Джейми

Ответы [ 2 ]

0 голосов
/ 12 февраля 2015

Я не понимаю, почему не может загрузить все все вместе и скрыть / показать их по требованию.

Подумайте о SEO, если робот поисковой системы игнорирует невидимое содержимое.Я не думаю, что загрузка новой страницы с помощью Javascript сделает это лучше, я не уверен, поправьте меня, пожалуйста, если я ошибаюсь.

Чтобы анимация была плавной, я думаю, что вы должны предварительно загрузитьсодержание.Независимо от того, как вы оптимизируете свои страницы, их загрузка все равно занимает определенное время, это определенно дольше, чем продолжительность вашей анимации, и это также зависит от сети / устройства / местоположения пользователя ...

0 голосов
/ 29 мая 2011

Вы можете использовать плагины панорамного вида для jquery: Плагин 1 Плагин 2 Плагин 3 И вы также можете проверить: Этот пост на SO

...