Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Circular Image Transition
<div class="holder">
<div id="photo-holder"></div>
</div>
<div id="preload"></div>
var photoCount = 6;
var pieceCount = 6;
var onPhoto = 0;
var pieceCompleteCount = 0;
var delay;
var transitions = ['center', 'random']
var transitionType = 0;
$(document).ready(function()
{
preload();
});
function preload()
{
for (var i = 0; i < photoCount; i++)
{
$('#preload').append('<img src="http://placekitten.com/500/' + (500 + i) + '">')
};
$(window).load(function()
{
setup();
});
}
function setup()
{
$('#photo-holder').html('');
for (var i = 0; i < pieceCount; i++)
{
var newWidth = (((100-(100 / pieceCount) * i))/100) * 100; //((pieceWidth - ((pieceWidth / pieceCount) * i)) / pieceWidth) * 100;
var newBackgroundSize = 100 + (100-newWidth)/newWidth * 100; //100 + (100 - newWidth);
var newTop = ((100 / pieceCount) * i)/2;
$('#photo-holder').append('<div class="section" id="piece'+i+'" style="top: ' + newTop + '%; left: ' + newTop + '%; width: ' + newWidth + '%; height: ' + newWidth + '%; background-size:'+newBackgroundSize+'%; background-image: url(\'http://placekitten.com/500/' + (500 + onPhoto) + '\')"></div>')
};
nextSlide();
}
function nextSlide()
{
clearInterval(delay);
pieceCompleteCount = 0;
++onPhoto;
if(onPhoto >= photoCount)
{
onPhoto = 0;
}
for(var i=0; i < pieceCount; i++)
{
var spinDelay = 0;
var spin = 360;
var piece = $('#piece'+i);
switch(transitions[transitionType])
{
case 'random':
spinDelay = Math.random()/2;
spin = Math.random()*360;
break;
case 'center':
spinDelay = (pieceCount-i)/10;
spin = 181;
break;
}
TweenMax.to(piece, 1, {
delay: spinDelay,
directionalRotation: spin + '_long',
onComplete: completeRotation,
onCompleteParams: [piece],
ease: Power4.easeIn
})
}
}
function completeRotation(piece)
{
piece.css('background-image', 'url(http://placekitten.com/500/' + (500 + onPhoto) + ')');
TweenMax.to(piece, 2, {
directionalRotation: '0_short',
onComplete: finishPieceanimation,
ease: Elastic.easeOut
})
}
function finishPieceanimation()
{
++pieceCompleteCount;
if(pieceCompleteCount == pieceCount)
{
delay = setInterval(nextSlide, 1000);
}
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="https://codepen.io/steveg3003/pen/zBVakw"></script>
body
{
background-color: #222;
}
#preload
{
display: none;
}
.holder
{
width: 300px;
height: 300px;
border: 5px solid #ffffff;
margin: 40px auto;
position: relative;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 1);
}
#photo-holder
{
width: 100%;
height: 100%;
position: absolute;
}
.section
{
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
border-radius: 50%;
position: absolute;/*
transition: background-image 1s ease;*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.