在兩個分開的頁面之間創建向上滑動

因此，我一直在嘗試創建一個網站，在您實際進入網站之前創建一個歡迎頁面，並且當您按下輸入按鈕時，第一頁向上滑動，然後新頁面出現從下面。在兩個分開的頁面之間創建向上滑動

給你一個我在這裏真正意義的想法是一個很好的例子，http://keepearthquakesweird.com。

您會注意到，當您按下回車按鈕時，會有一個頁面轉換到完全不同的頁面（請注意URL更改）。這是我想要實現的。

到目前爲止，我已經嘗試了很多不同的插件，如animsition，（無法記住其他人：P），但似乎沒有任何工作，所以我最近的嘗試已與iframes（注意，URL不會改變）。

最新嘗試：

HTML

<a id="myLink" href="#"> 
      Click to slide in new page 
    </a> 


<iframe id="newPage" src="https://jsfiddle.net/"></iframe>

CSS

#myLink { 
position: absolute; 
} 

iframe { 
width: 100%; 
height: 100%; 
top: 100%;  
position: fixed; 
background-color: blue; 
}

JQuery的

$(document).ready(function() { 
    $('#myLink').click(function() { 
    $('#newPage').transition({top: '0%' }); 
    }); 
});

來源

2016-02-08 Matthew James Morris

你需要通過Ajax加載頁面來實現這一effect.You可以手動更新URL，而不改變頁面。 –

瀏覽器中的網址可能會更改，但從技術上講，它仍然是您看到的相同頁面。從來沒有重新加載，只是DOM重新渲染。 – Chris

@GoneCodingGoodbye有關於如何實現這個的教程？我也不知道什麼是或如何使用Ajax。 –

您鏈接到的頁面使用History API，它允許更改URL地址而無需重新加載整頁。正如其他人所說，你會：

捕獲點擊，並通過AJAX加載新的內容
過渡/動畫頁面使用歷史API
更新地址欄

我建議使用smoothState.js（一個jQuery插件），它爲你做了以上所有的事情。

PS：I幀是不是要走的路，他們有一個非常不同的目的

來源

2016-02-08 12:08:50 mjsarfatti

是的，iframe只是嘗試去獲得我想要的最後一次絕望嘗試。 –

我可以給你一個解決方案，您的問題聲明..

在頭部內使用<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)">。

和過渡有下列20多類型..

0  Rectangle towards centre 
1  Rectangle from centre outwards 
2  Circle towards centre 
3  Circle from centre outwards 
4  Horizontal wipe from bottom to top 
5  Horizontal wipe from top to bottom 
6  Vertical wipe from left to right 
7  Vertical wipe from right to left 
8  Vertical Blinds from left to right 
9  Horizontal blinds ftom top to bottom 
10  Box Blinds from left to right 
11  Box Blinds from top to bottom 
12  Pixel Fade 
13  Vertical Window Opening from middle to sides 
14  Vertical Window Closing from sides to middle 
15  Horizontal Window Opening from middle to top/bottom 
16  Horizontal Window Closing from top/bottom to middle 
17  Diagonal: bottom right to top left 
18  Diagonal: top right to bottom left 
19  Diagonal: bottom left to top right 
20  Diagonal: top left to bottom right 
21  Vertical Line Fade 
22  Horizontal Line Fade 
23  Random

但轉變不受瀏覽器支持，併爲此經常被認爲是不好的設計。

希望這將幫助你。

來源

2016-02-08 10:43:21

不錯理念。 IE是主要的問題，因爲只有IE11支持這一點。 –

在兩個分開的頁面之間創建向上滑動

回答

相關問題