頁面轉換，如何在現有頁面中滑動頁面

我正在尋找實現頁面轉換，從而指向另一頁面的鏈接將代替加載頁面，將下一頁滑入下一頁。類似於演示網站上的MOVE轉換：http://tympanus.net/Development/PageTransitions/
雖然這不是完全正確，因爲這是全部頁面（即url不會更改），但它們需要在不同的頁面之間進行轉換。

我得到儘可能是這樣的：
HTML：頁面轉換，如何在現有頁面中滑動頁面

<body> 
    <div class="container"> 
     <a href="next-page.html" class="slide_page">Link</a> 
     TEXT GOES HERE 
    </div> 
</body>

的jQuery：

$(function(){ 
    // hide the div on page load and use a slidedown effect 
    $('div.container').fadeOut(0, function(){ 
     $(this).slideDown(500); 
    }); 
    // capture link clicks and slide up then go to the links href attribute 
    $('a.slide_page').click(function(e){ 
     e.preventDefault(); 
     var $href = $(this).attr('href'); 
     $('div.container').slideUp(500, function(){ 
      window.location = $href; 
     }); 
    }); 

});

但是，這並不完全正確，因爲這方法滑動當前頁面向上滑動前下一頁向下，但這裏的網址變化很好。任何建議將不勝感激！

來源

2013-08-02 user1374796

http://stackoverflow.com/questions/4403004/sliding-an-entire-web-page 重複？ –

這是預期的結果。你鏈接的例子不會加載一個新頁面，它具有不同div上的內容。當你加載一個新的url時，腳本首先製作舊頁面的結束動畫，然後加載新頁面，然後製作開始動畫。這種方式沒有其他可能性。 –

嘿，我最近使用了頁面轉換的東西。我可能會幫助你。你介意解釋你有什麼確切的問題嗎？因爲我不確定是否有問題。 – Secret

如果我得到這個正確的，你想滑的東西，但不是隻滑動一個任意DIV，要在一個全新的網頁滑動？

你可以做的是使用AJAX。所以基本上，當您收到數據時，請發出ajax請求，將您的＃next-page.html（）更改爲您收到的數據。

你必須現在循環它們，所以設置'＃活動頁面'可能會更好。

這是我用過的那個網站。 http://cs75.heliohost.org/當你點擊一個鏈接時，會顯示一個幻燈片動畫，但是如果我編輯了幻燈片的html，我可以將新頁面放在該滑動矩形上。

這裏有你需要的東西：

兩個 '頁數'。你會在你重新使用這些。
當用戶點擊一個鏈接，讓Ajax調用，然後更換「非活動頁」與您收到的數據。
使'inactive-Page'處於活動狀態，然後應用您的動畫。
打開頁面替換爲「不活動頁」

隨意問有沒有什麼在我的回答含糊其辭。

來源

2013-08-02 13:37:43 Secret

這看起來不錯，你引用的網站看起來非常接近我以後（只是一個不同的方向）。我今晚會嘗試一下，讓你知道我怎麼樣！ – user1374796

你現在鏈接的網站現在看起來不活躍？！這絕對是我實現後的目標，讓我知道它什麼時候回到網上，我會再看一次。 – user1374796

@ user1374796是的，不幸的是我似乎已被暫停，該網站只是一個一次性免費的網站。雖然看到我的編輯。 – Secret

您可以查詢字符串設定爲?animate=true和next-page.html

$(function() { 
    if (location.search.match(/animate=true/)) { 
     $('body').hide().slideDown(); 
    } 
});

向下動畫您也可以使用HTML隱藏機體，因此將之前準備好DOM被隱藏。

和鏈接將

<a href="next-page.html?animate=true" class="slide_page">Link</a>

來源

2013-08-02 13:28:24 jcubic

關於動畫：

如果你想同時向上滑動，你必須告訴既可以向上滑動。因此，而不是你的「slideDown」，使用「slideUp」。

如果你看看頁面的源代碼，你會發現他們實際上使用CSS動畫來完成大部分工作。這使得他們可以一次輕鬆運行兩個動畫，並允許瀏覽器使用硬件加速來處理動畫（jQuery和JS通常會默認排隊，但您可以添加queue:false to make them run at the same time，JavaScript尚未訪問硬件加速）。

這些動畫的基石在animations.css file。注意底部的命名關鍵幀以及它們是如何工作的：

@-webkit-keyframes moveToTop { 
    to { -webkit-transform: translateY(-100%); } 
} 
@-moz-keyframes moveToTop { 
    to { -moz-transform: translateY(-100%); } 
} 
@keyframes moveToTop { 
    to { transform: translateY(-100%); } 
}

你並不需要讓他們關鍵幀這樣的，你可以建立他們進入元素（或類）自己。我認爲他們使用了命名關鍵幀，因爲他們反覆使用大量相同的動畫。不過，轉換是讓他們向上移動（或任何其他你想要的方向）。

關於URL變化：

，而不是試圖自己寫的功能，你可能想看看Pjax。這是一個讓GitHub做你想要的頁面滑動事項的庫。如果沒有別的，你可以看看來源，看看他們是如何做到的。

它的工作原理是將AJAX與PushState（因此名稱）相結合。當您點擊鏈接時，JavaScript會覆蓋默認的點擊行爲並進行AJAX調用以獲取新內容。然後它激活一個PushState調用，它會更新瀏覽器的URL（這是「不同頁面」的關鍵），並在新內容中進行動畫處理。在不支持PushState的瀏覽器中，頁面就像其他站點一樣加載。

來源

2013-08-02 13:38:58 Shauna

非常感謝！看起來不錯，我會嘗試一下，讓你知道它是怎麼回事:) – user1374796

頁面轉換，如何在現有頁面中滑動頁面

回答

相關問題