建立一個「單頁」網站與網頁之間的動畫

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. 使用獲取您的內容。您可以使用您放入鏈接的href屬性來獲取正確的內容。然後使用.on()方法將事件綁定到該元素。你離開href的原因是要有一個優雅的回退：如果代碼出現問題，應該禁用JavaScript或者只是在非javascript友好的瀏覽器上導航，他仍然可以訪問你的內容。

這些是實現您所需要的兩個基本步驟。如果要微調您的網站多一點，儘量去想那些事情，以及：

1. 讓您的網站被謹慎使用裝載.gif S的外觀更加敏感。

2. 不雙服務內容：檢查用戶是否點擊當前顯示頁面的鏈接並且不再次獲取內容;除了看你的用戶愚蠢，它會造成無用的服務器負載（可能微不足道，但仍然）。不過，一定要考慮你的用戶！告訴他，通過巧妙使用UI來禁用該鏈接。

3. 操作瀏覽器歷史記錄：使用history API。您的網站將更容易訪問，更方便用戶，更適合搜索引擎優化，並且看起來也更加先進。