Circular page transitions

Question

I am experimenting with animations and page transitions, trying to create a page with 3 circular images which function as navigation buttons. When you click one of them, I want the circle to expand to fill the entire page, and thereby become its background.

Well, that's my issue, I'm not really sure where to start. Currently I've been messing with the code from this recent question: http://stackoverflow.com/questions/9320658/expanding-circles-with-css3-animations That is a good way to make expanding circles and I figure I can make that fill the webpage, but then it covers the entire page and doesn't make the circle the background image, which is what I want. — Kevin Swanberg, May 13 '13 at 18:26

score 0 · Answer 1 · answered May 13 '13 at 18:48

I've put together a little mock-up of something similar to what you're describing to get you started. This solution requires jQuery and jQuery UI, and essentially creates an animation to blow up a circular DIV element to fill the 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, this allows you to create three DIV elements, each of which contains the HTML for a separate page you'd like to display. The initial CSS puts all 3 circles in the middle of the page, and makes all of their child-elements invisible.

Once you click one, however, the jQuery .animate() calls will adjust the positions of the various elements, expand the clicked element to fill the window, and shift the z-indexes so that your other two nav options stay on top.

Here is a working jsFiddle which you can play with to tweak the effects. If you have questions about how to use it, feel free to ask and I'll try to help further.

score 0 · Answer 2 · answered May 13 '13 at 18:49

Here is a very simple starting point for you.

It does not use an image. It uses border-radius to make a circle.

DEMO: http://jsfiddle.net/kPcPB/

.circle{
    position:absolute;
    width:300px;
    height:300px;
    top:50%;
    left:50%;
    margin-left:-150px;
    margin-top:-150px;
    background:lime;
    border-radius:50%;
    -webkit-transition:all 3s;
}

Hope that helps.

score 0 · Answer 3 · answered May 13 '13 at 18:49

This is what I came up with. It uses CSS3 for animation and jQuery for applying the css!.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="background"></div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>
</html>

CSS

.background, body {
  -webkit-transition: all 1s;
}
.background {
  background: url(http://dribbble.s3.amazonaws.com/users/5299/screenshots/1068946/akm-94_1x.jpg);
  height: 100px;
  width: 100px;
  background-size: cover;
  border-radius: 50%;
  position: relative;
  /* z-index: -1; */
}

jQuery

$(function () {
$('.background').hover(function() {
  $('.background').css({'width': 100 + '%', 'height' : 100 + '%', 'border-radius': 0, 'position': 'absolute', 'z-index': -1});
}, function () {
   $('.background').css({'width': '100', 'height' : '100', 'border-radius': 50 + '%', 'position': 'relative', 'z-index': 1});
});
});

http://jsbin.com/orawin/2/

Circular page transitions

3 Answers3