web-dev-qa-db-ja.com

2つのフルページ間のJSまたはCssページスライド遷移

Page1.html、Page2.htmlの2つのhtmlページがあります。 2ページの間をスライドしたいと思います。 2つのdiv間をスライドしたり、コンテナー内をスライドしたりするためのプラグインとソリューションをたくさん見つけましたが、必要なのは完全なページ変更です。

何かを見つけました しかし問題は、ページが読み込まれたときにpage2のjqueryコードが起動しないことです。 jQuery mobileを使用することもできますが、私のプロジェクトではjQuery uiを使用しているため、競合が発生します...他に何かが必要です。

プロジェクトはiPadで実行されることになっているので、ドラッグできるスライドページがあると便利です。しかし、スライドのプラグインを見つけていただければ幸いです。

ありがとうございました。

javascriptjquerycss3transitions
8
Lince81

「新しいページ」にコンテンツを追加するためにAjaxを使用したり、jQueryでスライド効果を追加したりするなど、いくつかの解決策があります。 StackOverflowにはそれに関するいくつかのトピックがあります。

jQueryを使用してページ間をスライド

ページ間のスライドの手がかり効果

または、次のサンプルのように、ページの準備ができた場所に効果を追加します。

<html>
<head>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('body div').slideDown();
        });
    </script>
</head>
<body>
    <div style="width: 400px; height: 400px; background-color: blue; display: none;">
        <a href="page2.htm" style="color: white;">PAGE 2>></a>
    </div>
</body>

<html>
<head>
    <script src="js/jquery-1.7.2.min.js"></script>      
    <script>
        $(document).ready(function(){
            $('body div').slideDown();
        });
    </script>
</head>
<body>
    <div style="width: 400px; height: 400px; background-color: red; display: none;">
        <a href="page1.htm" style="color: white;">PAGE 1>></a>
    </div>
</body>

幸運を！

1
X-spert

私は、ページ全体の遷移と、2つのDIVを含む1ページを示す多くの例を探していました。 Animate.cssがうまく機能していることがわかりました。

このリンクのデモ

enter image description here

0
Patrick