jquery animate - Circular page transitions -

i experimenting animations , page transitions, trying create page 3 circular images function navigation buttons. when click 1 of them, want circle expand fill entire page, , thereby become background.

i've put little mock-up of similar you're describing started. solution requires jquery , jquery ui, , creates animation blow circular div element fill whole page.

html:

<div class="circle">     <div>red contents go here!</div> </div> <div class="circle">     <div>green contents go here!</div> </div> <div class="circle">     <div>blue contents go here!</div> </div> 

css:

.circle {     display: inline-block;     position: absolute; left: 50%; top: 50%;     height: 50px; width: 50px;     margin: -25px 0 0 -25px;     cursor: pointer;     border-radius: 25px;     z-index: 0; } .circle:nth-child(1) { background: red; margin-left: -80px; } .circle:nth-child(2) { background: green; } .circle:nth-child(3) { background: blue; margin-left: 30px; } .circle > div { display: none; } .circle.expanded > div { display: block; } 

jquery:

$('.circle').on('click', function() {     var $this = $(this);     $this.css('z-index', 2)     .siblings('.circle').removeclass('expanded').css('z-index', 1);     $this.animate({         left: 0, top: 0, margin: 0,          width: '100%', height: '100%',         'border-radius': 0, padding: '60px 5px 5px 5px'     }, 1000).addclass('expanded');     $this.siblings('.circle').animate({         left: 0, top: 0, height: 50, width: 50,         'border-radius': 25, padding: '0'     }).first().css({ 'margin': '5px' })       .next().css({ 'margin': '5px 5px 5px 55px' });     $this.css('z-index', 0); }); 

basically, allows create 3 div elements, each of contains html separate page you'd display. initial css puts 3 circles in middle of page, , makes of child-elements invisible.

once click one, however, jquery .animate() calls adjust positions of various elements, expand clicked element fill window, , shift z-indexes other 2 nav options stay on top.

here working jsfiddle can play tweak effects. if have questions how use it, feel free ask , i'll try further.