Circular image transition using CSS and TweenMax
A Pen by Steve Gardner on CodePen.
Circular image transition using CSS and TweenMax
A Pen by Steve Gardner on CodePen.
<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;*/ | |
} | |