0

最後に読み込まれたタイトルをクリックするたびに、またはスライドまたは画面をクリックするたびに新しいタイトルを動的にビューに読み込むため、PowerPoint のトランジションと同様に、画面をクリックするか矢印キーを使用して新しいテキストを「フライイン」します。 HTML5 ソリューションを探しています。クリックするたびに、新しいタイトルが読み込まれます。

そのために、jQueryのfadeInおよびfadeOut効果を使用できましたが、タイトルを次々にロードし、以前にロードされたタイトルを上に保持し、その後に新しくロードされたタイトルを保持する方法を理解できませんでした.

私はjQueryのfadeInとfadeOutを使用してこのFiddleを見つけました: http://jsfiddle.net/Fyhm7/ :

    <a href="#" data-section="#home">Home</a>
    <a href="#" data-section="#products">Products</a>
    <a href="#" data-section="#contact">Contact</a>

    <div id="wrapper"></div>

    <section id="home">Home</section>
    <section id="products">Products</section>
    <section id="contact">Contact</section>
    $("a").on("click", function() {
        var id = $(this).data("section");

        $("section:visible").fadeOut(function() {
            $(id).fadeIn();
        });
    });

section {
    display: none;
}

    #home { height: 200px; background: beige; display: block;}
    #products { height: 1000px; background: honeydew; }
    #contact { height: 500px; background: seashell; }

しかし、Flash や PowerPoint で表現できるほどきれいではありません。さらに、これはページ onlclick のメニューのコンテンツをロードする単なるメニューです。クリックするたびに新しいコンテンツを追加する必要があります。

また、ここで別の同様のソリューションを見つけましたHTML5 Loading data-section when click on Navigation link

前者の例は、いくつかのタイトルを表示し、そのタイトルに添付されたコンテンツをロードします。後者は、似たようなことを行います。

必要なのは、画面または以前に読み込まれたタイトルをクリックすると表示される新しいヘッダーです。おそらく、これは同様のコードで実行できます。アイデア？

私が必要としているものに近い、より良い例はありますか？

4

1 に答える 1

1

必要に応じて、css アニメーションを使用できます。この Web サイトには、利用可能な CSS アニメーションが多数リストされていますhttp://daneden.me/animate/。それはあなたがやりたいことを正確にやっているわけではありませんが、CSSアニメーションができることを示しているだけです。

于 2013-04-11T02:38:21.683 に答える