Переход на другую страницу (через HTML5, CSS3 и JS) в iPad по Swipe (с анимацией слайдов)

Question

Переход на другую страницу (через HTML5, CSS3 и JS) в iPad по Swipe (с анимацией слайдов)

0

Я работаю над веб-сайтом (в HTML5, CSS3 и JS), который будет открыт только в iPad.

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

Мне удалось реализовать это с помощью аддитивного со следующим JS:

if ( swipeDirection == 'left' ) {
    window.location.href = 'other.html';
}

Это работает, но анимации нет; при прокрутке новая страница просто загружается. Я надеюсь, что когда я провёл старую страницу, она движется пальцем до того, как новая страница переместится (или загрузится).

любая помощь?

Благодарю.

Steve 17 сен. 2013, в 21:17

Источник

Теги:

html

css

slide

ipad

swipe

1 ответ

Ещё вопросы

Kevin Lynch · Accepted Answer · 2013-09-17T18-33-00.000Z

Для этого вам понадобится все страницы на одном документе 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.