Skip to content

Instantly share code, notes, and snippets.

Created December 7, 2014 21:34
Show Gist options
  • Save anonymous/a108967c7127caf71751 to your computer and use it in GitHub Desktop.
Save anonymous/a108967c7127caf71751 to your computer and use it in GitHub Desktop.
Polygon Image Slider
<div class="prev"></div>
<div class="next"></div>
<div class=polygon>
<div class="spinner">
<div class="side passive">
<img src="http://ingress.xanderhyde.com/downloads/ingress_R_1920x1200_by_Xanderhyde.jpg" alt="" />
</div>
<div class="side">
<img src="http://ingress.xanderhyde.com/downloads/ingress_R_1920x1200_by_Xanderhyde.jpg" alt="" />
</div>
<div class="side">
<img src="https://lh5.googleusercontent.com/-adX5umUE_YI/UO71unG82DI/AAAAAAAADL8/f-1roZ0shw8/w800-h800/ingress.JPG" alt="" />
</div>
<div class="side">
<img src="http://4.bp.blogspot.com/-zAxaxgcy2n4/UMNscCDMUyI/AAAAAAAABn4/zxg5rG8Iv9g/s1600/Portal.jpg" alt="" />
</div>
<div class="side">
<img src="https://lh4.googleusercontent.com/--X5FcfA1uAQ/UVQsl81sNbI/AAAAAAAAAEM/uZm1OpUQxOk/w500/Ingress.jpg" alt="" />
</div>
<div class="side">
<img src="https://lh5.googleusercontent.com/-QmbNU7ToUdQ/UN_WP3RmJwI/AAAAAAAAG3M/soNQKlaawsc/w500/Ingress-Zelda.jpg" alt="" />
</div>
<div class="side">
<img src="http://ingressportal.com/w/wp-content/uploads/2012/12/wayne.ingress.jpg" alt="" />
</div>
<div class="side">
<img src="https://lh6.googleusercontent.com/-G5vp9mq7CJI/UYwq7Yk0BvI/AAAAAAAAHvc/CQgee2a_Yw8/w800-h800/xmp_01.jpg" alt="" />
</div>
</div>
</div>
<div class="imagelist"></div>
<div class="info"></div>
$(function(){
setImagePolygon();
var imagelist = $('.side');
imagelist.each(function(i,e){
var cb = $(document.createElement('input'));
cb.attr('type','checkbox')
.attr('data-index',i);
if($(e).hasClass('passive'))
cb.removeAttr('checked');
else
cb.attr('checked','checked');
$('.imagelist').append(cb).append('image' + (i + 1));
});
});
var rotation;
var angle;
function setImagePolygon(){
var images = $('.side:not(.passive)');
var startAngle = 0;
var w = images.width();
var n = images.length;
angle = 360 / images.length;
var r = w / (2 * Math.sin((angle/2)*Math.PI/180));
var h = Math.sqrt(Math.pow(r,2) - (Math.pow(w/2,2)));
rotation = 0;
var even = (images.length % 2 === 0);
$('.info').html('');
logInfo('h= ' +h);
logInfo('n=' + n);
logInfo('even=' + even);
logInfo('r=' + r);
logInfo('angle=' + angle);
if(n < 3){
images.css('transform','rotateY(0deg) translateZ(0px)');
}
else{
images.each(function(i,e){
if(i===0){
$(e).css('transform','translateZ('+ h +'px)');
}else
$(e).css('transform','rotateY('+startAngle+'deg) translateZ('+ h +'px)');
startAngle= startAngle+angle;
});
}
}
$('.imagelist').on('change','input',function(){
if(this.checked)
$($('.side')[$(this).data('index')]).removeClass('passive');
else
$($('.side')[$(this).data('index')]).addClass('passive');
setImagePolygon();
});
function logInfo(i){
$('.info').append('<br/>'+i);
}
function rotate(d){
var dim = d > 0 ? 1:-1;
var newRotation = (rotation + (angle * dim));
$('.spinner').css('transform','rotateY('+ newRotation + 'deg)');
rotation = newRotation;
}
$('.next').on('click',function(e){
rotate(1);
});
$('.prev').on('click',function(e){
rotate(-1);
});
/*
var touchX,touchY,move;
//$('.polygon').on({ 'touchstart' : function(e){ console.log(e); } });
$( ".polygon" )[0].addEventListener('touchstart', function(e) {
e.preventDefault();
if($(e.target).parent().hasClass('side')){
var touch = e.touches[0];
touchX = touch.pageX;
touchY = touch.pageY;
}
}, false);
//$( ".polygon" ).mousemove(function( e ) {console.log(e);});
$( ".polygon" )[0].addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
if($(e.target).parent().hasClass('side') && touchX != null){
move = (touch.pageX - touchX);
//touchX = touch.pageX;
console.log(move);
if(move > (r / 2))
rotate(1);
else if(move < (-1 * w / 2))
rotate(-1);
else
$('.spinner').css('transform','rotateY('+ move + 'deg)');
}
}, false);
$( ".polygon" )[0].addEventListener('touchend', function(e) {
e.preventDefault();
if(move)
touchX = null;
touchY = null;
}, false);*/
.info{position:relative;top:150px;left:10px;z-index:3;}
.polygon{
-webkit-perspective: 800;
-moz-perspective: 800px;
-ms-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 0;
-moz-perspective-origin: 50% 0;
-ms-perspective-origin: 50% 0;
perspective-origin: 50% 0;
margin:50px auto;
width:320px;height:300px;
}
.side{background-color:black;
width:320px;
height:240px;
overflow:hidden;
position:absolute;
}
.passive{display:none;}
.spinner{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
position:relative;
transition:all 1s ease-in;
}
.side img{position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
opacity:0.7;
width:320px;
height:240px;
}
.next,.prev{position:absolute;width:50%;height:100%;top:0;cursor:pointer;opacity:0.5;z-index: 2;}
.next{right:0;}
.prev{left:0;}
.imagelist{position:relative;background-color:#fff;z-index:2;top:150px;left:10px;right:0;margin:auto;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment