# how I can make transitions beetwen two separate web page

**URL:** <https://forum.kirupa.com/t/how-i-can-make-transitions-beetwen-two-separate-web-page/636331>\
**Category:** programming\
**Created:** [March 30, 2017, 10:44am UTC](https://forum.kirupa.com/t/how-i-can-make-transitions-beetwen-two-separate-web-page/636331 "2017-03-30T10:44:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CharlesS](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@CharlesS](https://forum.kirupa.com/u/CharlesS)\
**Post date:** [March 30, 2017, 10:44am UTC](https://forum.kirupa.com/t/how-i-can-make-transitions-beetwen-two-separate-web-page/636331/1 "2017-03-30T10:44:15Z")

</div>

Hi I wondered how I can make transitions beetwen two separate web page e.g index.html and work.htm or it is better way to put all my pages content in index.html and use jquery and css ?  
thans for any help

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 30, 2017, 3:54pm UTC](https://forum.kirupa.com/t/how-i-can-make-transitions-beetwen-two-separate-web-page/636331/2 "2017-03-30T15:54:50Z")

</div>

It depends on how many pages you are dealing with. If you have only a handful of pages and the size of those pages isn’t large, your suggestion of having all of your content in one page seems reasonable. You may even be able to navigate between the pages without relying on jQuery: [https://www.kirupa.com/html5/animated\_scroll\_to\_top\_with\_easing.htm](https://www.kirupa.com/html5/animated_scroll_to_top_with_easing.htm) 😛

If you have too much content where putting everything into one page makes less sense, then the problem is more complicated. One way to accomplish this is by listening to every navigation event, pausing the event from fully propagating, fading the contents of your page out (using a CSS Animation), resuming the navigation event, and on the new page…fading everything in. Does this make sense? I can try elaborate in more detail if it doesn’t.

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![CharlesS](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@CharlesS](https://forum.kirupa.com/u/CharlesS)\
**Post date:** [March 31, 2017, 4:16pm UTC](https://forum.kirupa.com/t/how-i-can-make-transitions-beetwen-two-separate-web-page/636331/3 "2017-03-31T16:16:20Z")

</div>

That’s what I thought . The content is not too big and i think I will put all content together in one page. Thanks for answer , By the way very nice and friendly forum 🙂