0

For loading new titles into view dynamically every time you click the last loaded title or by clicking on the slide or screen like you can do using similar to PowerPoint's transition "fly in" every time you click the screen or use the arrow key a new text block is loaded I am looking for an HTML5 solution. Each click should load a new title.

For that I could use jQuery's fadeIn and fadeOut effect, but I have not been able to work out how I can load one title after another and keep the earlier loaded titles on top followed by the newly loaded title.

I found this Fiddle using jQuery fadeIn and fadeOut: 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; }

but it is not as pretty as we can have it in Flash or PowerPoint. Plus it is just a menu loading content for the menu on the page onlclick. I need new content added with each click.

Also found another similar solution here HTML5 Loading data-section when click on Navigation link

The former example shows several titles and loads content attached to that title.The latter does something similar.

What I need is a new header to show on clicking the screen or previous loaded title. Perhaps this can be done with similar code. Ideas?

Any better examples around that are closer to what I need?

Community
  • 1
  • 1
rhand
  • 1,176
  • 4
  • 17
  • 45

1 Answers1

1

If you want, you can use css animation. This website list lots of available css animation http://daneden.me/animate/. It's not exactly doing what you want to do, but just showing what css animation capable doing.

Zendy
  • 1,664
  • 1
  • 17
  • 24
  • FadeDown or BounceDown look like an interesting CSS techniques . But what if I want to load 10 titles or answers every time I click the wrapper or previous title I faded/bounce down? Is that possible? – rhand Apr 11 '13 at 02:43
  • 1
    yah it's possible, you need to add a class to the element, and that class will do the animation for you. – Zendy Apr 11 '13 at 02:49