Search code examples
javascripthtmljquerycssweb-frontend

Hiding and revealing animated content (with transitions) on a single html page?


I am trying to make a website with content displayed in book form, page flipping animations. For each "page" of the content there are different svg pictures which are animated; I am not sure how to go about this.

Essentially, is there any way to show and hide content like I want without having to create an html file for each "page"? The sequence is kind of important and I would not want google to link to some random place as a result for my website. Thanks!

I am thinking about a carousel of some kind but the slide is the entire page, supports animated content, animated transitions and has text in it. I am relatively new to front-end development and would not know the answer if I saw it. sorry if this is the wrong forum.


Solution

  • Yes, it is totally possible to show and hide content like you want without having to create an html file for each "page".

    There are many events in a webpage like click, hover, mouseleave, scroll etc. You can use those events and add event listeners with JavaScript to hide or reveal contents within the same html page if you want. I am quite sure it is applicable to animated contents too.