Я работаю над веб-сайтом (в HTML5, CSS3 и JS), который будет открыт только в iPad.
Я хочу реализовать движения салфетки, которые перенаправляют текущую страницу на другую страницу.
Мне удалось реализовать это с помощью аддитивного со следующим JS:
if ( swipeDirection == 'left' ) {
window.location.href = 'other.html';
}
Это работает, но анимации нет; при прокрутке новая страница просто загружается. Я надеюсь, что когда я провёл старую страницу, она движется пальцем до того, как новая страница переместится (или загрузится).
любая помощь?
Благодарю.
Для этого вам понадобится все страницы на одном документе HTML, а затем поместите каждую страницу в div. Таким образом, когда вы проведите пальцем по экрану, он оживит эффект завивки страницы, показывая под ним div. Вы не можете анимировать это иначе, потому что вы не можете начать отображение страницы, которая не загружается и т.д.
Вот ДЕМО http://www.jqueryrain.com/?9yQO5MGv
<div id="exemple1">
<div><img src="img/img1.jpg" style="margin-left: 0px;" /></div>
<div><img src="img/img1.jpg" style="margin-left: -250px;" /></div>
<div><img src="img/img2.jpg" style="margin-left: 0px;" /></div>
<div><img src="img/img2.jpg" style="margin-left: -250px;" /></div>
<div><img src="img/img3.jpg" style="margin-left: 0px;" /></div>
<div><img src="img/img3.jpg" style="margin-left: -250px;" /></div>
<div><img src="img/img4.jpg" style="margin-left: 0px;" /></div>
<div><img src="img/img4.jpg" style="margin-left: -250px;" /></div>
<div><img src="img/img5.jpg" style="margin-left: 0px;" /></div>
<div><img src="img/img5.jpg" style="margin-left: -250px;" /></div>
<div><img src="img/img6.jpg" style="margin-left: 0px;" /></div>
<div><img src="img/img6.jpg" style="margin-left: -250px;" /></div>
</div>
<div>
<a href="#" onclick="$('#exemple1').trigger('previous'); return false;">Previous</a>
-
<a href="#" onclick="javascript:$('#exemple1').trigger('next'); return false;">Next</a>
</div>
<script>
$('#exemple1').flippage({
width: 500,
height: 333
});
</script>
Вы заменили бы img
на содержимое вашей страницы и присвоили стиль поля внутреннему div.