Построения «одной страницы» сайт с анимацией между страницами

Question

Я хотел бы знать, что используется, чтобы иметь эффект, как этот шаблон сайта: http://www.templatemonster.com/demo/43491.html

Я хотел бы иметь одного меню и фон в то время как раз я нажмите на ссылку меню, чтобы запустить новую страницу, чтобы не переходить на новую страницу, заставляя браузер перезагружать новую страницу и т. д. Что-то гладкое и приятное.

Я не ищу код (кроме функций для использования (если JQuery)) и какие эффекты я должен искать, чтобы сделать это возможным?

Просто мне точку в правильном направлении :)

Answer 1

теперь может быть куча способов .. простой способ (но это не так много обслуживаемой пути)

это всего содержимого вашего сайта в одна страница и завернуть каждый раздел, который вы считаете страницу в DIV, как так

<div class="home-page">content of home page goes here </div> 
<div class="contact-us-page">content of contact us page goes here </div> 

etc... 

и с JQuery скрыть их всех, кроме домашней страницы

$(function(){ 
    $('.contact-us-page').hide(); 
    $('.other-page').hide(); 
}) 

и когда пользователь нажимает на ссылку на другую страницу скажем, свяжитесь с нами страница скроет родитель и вставьте контакт с нами страница вместо

$('.contact-us-link').click(function(){ 
    $('.home-page').hide(1000); 
    $('.contact-us-page').show(1000); 
}) 

и вот это :)

вниз падение этого является то, что не будет никакой маршрутизации ..

так, чтобы решить эту проблему, вы должны использовать что-то вроде Backbone.js , который занимает некоторое время, чтобы знать это хорошо ...

это просто быстрая идея о том, как это работает ..

Answer 2

Есть много способов, чтобы достичь того, что вы хотите, но это мое предположение о том, как идти об этом концептуально:

1. анимировать содержимое по анимации position вашего контейнера контента, который должен дать приятное ощущение вашей страницы. The jQuery documentation Должно быть довольно ясно. Помните, что вы хотите перехватить нормальное поведение якоря, так что либо preventDefault(), либо return false, или и то, и другое.

2. Получите ваш контент, используя AJAX request. Вы можете использовать атрибут href, который вы добавили в свою ссылку, чтобы получить правильный контент. Затем привяжите событие к этому элементу <a> с помощью метода .on(). Причина, по которой вы покидаете href, состоит в том, чтобы иметь изящный откат: если что-то пойдет не так с кодом, если пользователь отключил javascript или просто перешел на браузер, не поддерживающий javascript, он все равно сможет получить доступ к вашему контенту.

Это два важных шага для достижения того, что вы ищете.Если вы хотите, чтобы точно настроить ваш сайт немного больше, попробуйте думать об этих вещах, а также:

1. Сделайте ваш сайт выглядит более отзывчивым осторожным использованием нагрузки .gif с.

2. Не дублируйте содержимое: проверьте, нажимает ли пользователь ссылку на отображаемую на данный момент страницу и не получает ее снова; помимо того, что вы выглядите глупо для своего пользователя, он сделает бесполезную нагрузку на сервер (возможно, незначительную, но все же). Однако всегда считайте своего пользователя! Скажите ему, что эта ссылка отключена умным использованием пользовательского интерфейса.

3. Манипулировать история браузера: с помощью history API. Ваш сайт будет более доступным, более удобным для пользователя, более ориентированным на SEO, а также будет выглядеть намного более продвинутым.