var mycode = function(){
//define variables
var myPad = scrawl.pad.mycanvas,
here,
details = false,
myPic,
myPicPath,
mySprite,
mySpeed = 0,
items = [
'angelfish', 'blackbutterfly', 'cagedparrot', 'capuchin', 'greenparrot',
'ibis', 'kookaburra', 'peacock', 'pelican', 'pinkcockatoo',
'swallowtail', 'swan', 'tabbycats', 'terrapin', 'turkey'
],
myGroup,
myReflections,
carousel,
selectImage,
unselectImage,
checkClick,
updateCarousel;
//set background color for canvas
scrawl.cell[myPad.base].set({
backgroundColor: 'black',
});
//import images into scrawl library
scrawl.getImagesByClass('demo');
//define groups
myGroup = scrawl.newGroup({
name: 'myGroup',
order: 2,
});
myReflections = scrawl.newGroup({
name: 'myReflections',
order: 1,
});
//define sprites - carousel
carousel = scrawl.makeEllipse({
name: 'carousel',
startX: 375,
startY: 200,
radiusX: 300,
radiusY: 100,
method: 'none',
});
//define sprites - display photos
for(var i = 0, z = items.length; i < z; i++){
scrawl.newPicture({
name: items[i],
group: 'myGroup',
source: items[i],
width: 150,
height: 100,
strokeStyle: 'Gold',
lineJoin: 'round',
method: 'fillDraw',
path: 'carousel',
pathPlace: i/z,
pathSpeedConstant: false,
handleX: 'center',
handleY: '101%',
}).clone({
//and their reflections
name: items[i]+'_r',
group: 'myReflections',
globalAlpha: 0.32,
flipUpend: true,
});
}
//event listener and associated functions
selectImage = function(){
myPic = myGroup.getSpriteAt(here);
if(myPic){
myPicPath = myPic.path;
details = true;
myPic.set({
startX: 375,
startY: 187.5,
path: false,
scale: 3.7,
order: 1000,
handleY: 'center',
});
scrawl.sprite[myPic.name+'_r'].set({
visibility: false,
});
scrawl.render();
}
};
unselectImage = function(){
if(myPic){
myPic.set({
handleY: '101%',
path: myPicPath,
});
scrawl.sprite[myPic.name+'_r'].set({
visibility: true,
});
}
details = false;
myPic = false;
myPicPath = false;
};
checkClick = function(e){
if(e){
e.stopPropagation();
e.preventDefault();
}
(details) ? unselectImage() : selectImage();
};
scrawl.canvas.mycanvas.addEventListener('mouseup', checkClick, false);
//animation function
updateCarousel = function(){
if(!details){
mySpeed = -((here.x - 375)/170000);
for(var i = 0, z = items.length; i < z; i++){
mySprite = scrawl.sprite[items[i]];
mySprite.set({
scale: (mySprite.start.y/250)+0.5,
order: mySprite.start.y,
deltaPathPlace: mySpeed,
});
mySprite = scrawl.sprite[items[i]+'_r'];
mySprite.set({
scale: (mySprite.start.y/250)+0.5,
order: mySprite.start.y,
deltaPathPlace: mySpeed,
});
}
myGroup.updateStart();
myReflections.updateStart();
}
myReflections.sortSprites();
myGroup.sortSprites();
myPad.stampBackground();
for(var i = 0, z = items.length; i < z; i++){
scrawl.sprite[myReflections.sprites[i]].stamp('clearWithBackground');
scrawl.sprite[myReflections.sprites[i]].stamp();
scrawl.sprite[myGroup.sprites[i]].stamp();
}
myPad.show();
};
//initial display of carousel - for safari
here = {x: 350, y: 187.5, active: true};
updateCarousel();
updateCarousel();
//animation object
scrawl.newAnimation({
fn: function(){
here = myPad.getMouse();
if(here.active){
updateCarousel();
}
},
});
};
scrawl.loadModules({
path: 'http://scrawl.rikweb.org.uk/js/',
modules: ['images', 'animation', 'path', 'factories'],
callback: function(){
window.onload = function(){
scrawl.init();
mycode();
};
},
});
img {
position: fixed;
visibility: hidden;
}
<h2>3D Carousel effect with selectable items</h2>
<p>Move mouse over canvas to rotate the carousel. Click on an image to enlarge it, or to return to the carousel.</p>
<canvas id="mycanvas" width="750" height="375"></canvas>
<img src="http://scrawl.rikweb.org.uk/img/carousel/angelfish.png" id="angelfish" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/blackbutterfly.png" id="blackbutterfly" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/cagedparrot.png" id="cagedparrot" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/capuchin.png" id="capuchin" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/greenparrot.png" id="greenparrot" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/ibis.png" id="ibis" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/kookaburra.png" id="kookaburra" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/peacock.png" id="peacock" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/pelican.png" id="pelican" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/pinkcockatoo.png" id="pinkcockatoo" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/swallowtail.png" id="swallowtail" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/swan.png" id="swan" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/tabbycats.png" id="tabbycats" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/terrapin.png" id="terrapin" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/turkey.png" id="turkey" class="demo" />
<script src="http://scrawl.rikweb.org.uk/js/scrawlCore-min.js"></script>
