A Pen by Lucas Alba on CodePen.
Last active
August 29, 2015 14:01
-
-
Save LucasJAlba/f70e25093229b43f7ab4 to your computer and use it in GitHub Desktop.
A Pen by Lucas Alba.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class='wrapper'> | |
<section id="container" class='twoD'> | |
<figure id="carousel" class=''></figure> | |
</section> | |
</div> | |
<section id="ctrls"> | |
<div id='dots'></div> | |
<div> | |
<div> | |
Total: <label id="nodeCountLbl" for="nodeCountCtrl"></label> | |
<input id="nodeCountCtrl" type="range"/> | |
</div> | |
<div> | |
Position:<label id="posCtrlLbl" for="posCtrl">Position</label> | |
<input id="posCtrl" type="range"/> | |
</div> | |
</div> | |
<div > | |
<button id="prev" data-increment="-1">Previous</button> | |
<button id="next" data-increment="1">Next</button> | |
<button id="axisCtrl">Toggle Carousel Axis</button> | |
<button id="backfaceCtrl">Backface</button> | |
<button id="3DCtrl">3D Toggle</button> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Carousel = (function($){ | |
/* Modernizr (Custom Build) | MIT & BSD * Build: http://www.modernizr.com/download/#-csstransforms3d-iepp-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load */ | |
Modernizr = function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["­","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",n.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);p.csstransforms3d=function(){var a=!!B(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d);return a};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{\}]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\n")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,e.prefixed=function(a){return C(a,"pfx")},g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCallback;if(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))}; | |
var modTransform = Modernizr.prefixed('transform'); | |
//config | |
var _obj ={ | |
elem: undefined, | |
nodes: 10, | |
max: 20, | |
radius: 100, | |
axis : "y", | |
nodeCtrl: undefined, | |
nodeCtrlLbl: undefined, | |
axisCtrl:undefined, | |
nextBtnCtrl:undefined, | |
previousBtnCtrl:undefined, | |
backfaceCtrl:undefined, | |
posCtrl:undefined, | |
posCtrlLbl:undefined, | |
generateElems:false, | |
dotsCtrl:false, | |
nodeName:"", | |
displayBackface:true, | |
generateColors:false | |
}; | |
var _rotations = {x:'rotateX', y:'rotateY'}; | |
var _rotOpp = {x:'y', y:'x'}; | |
function enableAxisCtrl(){ | |
if(_obj.axisCtrl !==undefined) | |
_obj.axisCtrl.click( function(){toggleAxis();}); | |
} | |
function enableBackfaceCtrl(){ | |
if(_obj.backfaceCtrl !==undefined) | |
_obj.backfaceCtrl.click( function(){toggleBackface()}); | |
} | |
function enableNextCtrl(){ | |
if(_obj.nextBtnCtrl !==undefined) | |
_obj.nextBtnCtrl.click( function(){move(_obj.axis === "y"?~_obj.pos+2:_obj.pos+1);}); | |
} | |
function enableDots(){ | |
if(_obj.dotsCtrl !==undefined){ | |
var i,l,tmp = document.createDocumentFragment(); | |
for(i=0,l=len();i<l;i+=1){ | |
tmp.appendChild($('<figure>').addClass('dotOff').get(0)); | |
console.log('loop '+i) | |
} | |
_obj.dotsCtrl.empty().html(tmp).children().on('click', function(){ | |
var idx =$(this).index(); | |
_obj.posCtrl ? _obj.posCtrl.val(idx).change() : move(idx); | |
dotPos(idx); | |
}); | |
} | |
} | |
this.dotPos=function(pos){ | |
_obj.dotsCtrl.children().removeClass('dotOn').eq(pos).addClass('dotOn'); | |
}; | |
function enablePrevCtrl(){ | |
if(_obj.previousBtnCtrl !==undefined) | |
_obj.previousBtnCtrl.click( function(){move(_obj.axis === "y"?~_obj.pos:_obj.pos-1);}); | |
} | |
function enablePosCtrl(){ | |
if(_obj.posCtrl !==undefined){ | |
_obj.posCtrl.attr({"max":_obj.nodes-1}).val(_obj.pos).on('change',function(){ | |
move(this.value); | |
if(posCtrlLbl !== undefined){ | |
_obj.posCtrlLbl.text(this.value); | |
} | |
}); | |
} | |
} | |
function enableCountCtrl(){ | |
if(_obj.nodeCtrl !== undefined){ | |
//validate and correct: max input | |
_obj.nodeCtrl.val(_obj.nodes >_obj.max?_obj.max:_obj.nodes).attr({"max":(_obj.max),"step":"1","min":"2"}); | |
_obj.nodeCtrl.change( function( event ) { | |
//validate and correct: /*odd and*/ max | |
var val = (this.value>_obj.max?_obj.max:this.value);//>>1<<1; | |
if(_obj.nodeCtrlLbl !== undefined)//update label | |
_obj.nodeCtrlLbl.text(val+" "+_obj.nodeName); | |
if(val !== this.value)//update input if invalid | |
_obj.nodeCtrl.val(val); | |
len(val); | |
}); | |
//init the CtrlLbl | |
if(_obj.nodeCtrlLbl !== undefined){ | |
_obj.nodeCtrlLbl.text(_obj.nodes+" "+_obj.nodeName); | |
} | |
} | |
} | |
this.toggleBackface = function(){_obj.elem.toggleClass('backface'); }; | |
this.init = function(_opts){ | |
if(_opts.elem === undefined || _opts.elem ===null) | |
throw new Error("Carousel.init(object): Requires object.elem type HTML elemtent"); | |
$.extend(true,_obj,_opts); | |
_obj.elem.addClass("carousel"); | |
//Generate new children with pos + click event if resetflag | |
if(_obj.generateElems){ | |
var tmp = document.createDocumentFragment(); | |
for(var i=0,l=_obj.max;i<l;++i){ | |
tmp.appendChild(($('<figure>').attr({"data-pos":(i)}).html(i).get(0))); | |
} | |
_obj.elem.empty().html(tmp); | |
_obj.nodes = _obj.nodes; | |
} | |
else{ | |
_obj.nodes =_obj.max= _obj.elem.children().length; | |
_obj.elem.children().each(function(n){ | |
$(this).attr({"data-pos":(n)}); | |
}); | |
} | |
if(!_obj.displayBackface) | |
_obj.elem.toggleClass('backface'); | |
$.extend(_obj,{ pos:0, mid:(_obj.nodes>>1), rot:0, nodeSlice: (360 / _obj.nodes)}); | |
morph(); | |
enablePosCtrl(); | |
enableCountCtrl(); | |
enableAxisCtrl(); | |
enableBackfaceCtrl(); | |
enableNextCtrl(); | |
enablePrevCtrl(); | |
$('body').addClass('ready'); | |
console.log('Ready'); | |
return this; | |
}; | |
function morph(){ | |
enableDots(); | |
var e =_obj.elem[0]; | |
var nodeSize = e[_obj.axis=="x" ? 'offsetHeight':'offsetWidth' ]; | |
var nodeSlice = (360 / _obj.nodes); | |
_obj.radius = Math.round( ( nodeSize >>1) / Math.tan( Math.PI / _obj.nodes ) ); | |
for (i=0,ang=0,l=_obj.nodes;i<l;i++ ){ | |
ang = nodeSlice * i; | |
if(_obj.generateColors) | |
$(e.children[i]).css({"display":"block","background-color":'hsla(' + ang + ', 100%, 50%, 1)'})[0].style[ modTransform ] = _rotations[_obj.axis] +'(' + (ang*=_obj.axis==="y"?1:-1) + 'deg) translateZ(' + _obj.radius + 'px)'; | |
else | |
$(e.children[i]).css({"display":"block",})[0].style[ modTransform ] = _rotations[_obj.axis] +'(' + (ang*=_obj.axis==="y"?1:-1) + 'deg) translateZ(' + _obj.radius + 'px)'; | |
} | |
for (l=_obj.max;i<=l;i++)//hide unused nodes | |
$(e.children[i]).css({"display":"none"}); | |
e.style[modTransform] = 'translateZ(-' + _obj.radius + 'px) '+_rotations[_obj.axis]+'(' +_obj.rot+ 'deg)'; | |
dotPos(Math.abs(_obj.pos)%len()); | |
if(posCtrlLbl !== undefined){ | |
_obj.posCtrlLbl.text(Math.abs(_obj.pos)); | |
} | |
console.log(_obj.pos); | |
}; | |
this.toggleAxis = function(){ | |
_obj.axis = _rotOpp[_obj.axis]; | |
var pos= _obj.pos; | |
this.len(_obj.nodes); | |
move(pos); | |
return this; | |
}; | |
this.len = function(val){ | |
if(val == undefined) | |
return _obj.nodes; | |
console.log("len"); | |
_obj.nodes = val; | |
_obj.pos =0; | |
_obj.rot =360/_obj.nodes*_obj.pos; | |
_obj.nodeSlice = (360 / _obj.nodes); | |
enablePosCtrl(); | |
move(0); | |
return this; | |
}; | |
this.move= function(n){ | |
n= _obj.axis=="y"?~n+1:n; | |
_obj.pos = n; | |
_obj.rot =(360/_obj.nodes*(_obj.pos)); | |
morph(); | |
return this; | |
}; | |
$(window).resize(function() { | |
morph(); | |
}); | |
return this; | |
})(jQuery); | |
$(document).ready(function(){ | |
Carousel.init({ | |
elem: $('#carousel'), | |
nodeCtrl: $('#nodeCountCtrl'), | |
nodeCtrlLbl:$('#nodeCountLbl'), | |
posCtrl:$('#posCtrl'), | |
posCtrlLbl:$('#posCtrlLbl'), | |
previousBtnCtrl:$('#prev'), | |
nextBtnCtrl:$('#next'), | |
axisCtrl:$('#axisCtrl'), | |
backfaceCtrl:$('#backfaceCtrl'), | |
nodes:13, | |
max:100, | |
dotsCtrl:$('#dots'), | |
generateElems:true, | |
generateColors:true, | |
displayBackface:false, | |
}); | |
}); | |
$('#3DCtrl').click(function(){$('#container').toggleClass('twoD threeD');}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.carousel * {max-width:100%; max-height:100%;} | |
.carousel { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
-webkit-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.carousel > * { | |
display: block; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding:0; | |
} | |
.carousel.backface > * { | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.carousel { | |
-webkit-transition: -webkit-transform 1s; | |
transition: transform 1s; | |
} | |
.carousel > *{ | |
-webkit-transition: opacity 1s, -webkit-transform 1s; | |
transition: opacity 1s, transform 1s; | |
} | |
/**/ | |
.floatleft{ float :left;} | |
.floatright{float :right;} | |
.textalignleft{ text-align:left;} | |
#ctrls { | |
position:fixed; | |
bottom:0; | |
} | |
figure { | |
display: block; | |
-webkit-margin-before: 0; | |
-webkit-margin-after: 0; | |
-webkit-margin-start: 0; | |
-webkit-margin-end: 0; | |
} | |
.wrapper{ | |
width:100%; | |
overflow:hidden; | |
} | |
#dots { | |
width: 100%; | |
float: left; | |
} | |
.dotOff { | |
width: 15px; | |
height:15px; | |
background-color: gray; | |
float: left; | |
border-radius: 100%; | |
margin: 1%; | |
position:relative; | |
} | |
.dotOn{background-color: blue;} | |
.container,#container{ | |
width: 40%; | |
position: relative; | |
margin: 50px 30%; | |
} | |
#container::after,.dotOff ::after{ | |
content:''; | |
display:block; | |
padding-top:100%; | |
} | |
.carousel > * { | |
/* opacity:0.8; */ | |
background-color: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
text-align: center; | |
width:90%; | |
height:90%; | |
left:5%; | |
top:5%; | |
border-radius: 0 25px 25px 25px; | |
box-shadow: 1px 1px 1px 1px #999; | |
} | |
.threeD{ | |
-webkit-perspective: 800px; | |
perspective: 800px; | |
} | |
.twoD{ | |
border: 1px solid; | |
overflow: hidden; | |
} | |
.twoD >*>*{ | |
width:100%; | |
height:100%; | |
left:0; | |
top:0; | |
border-radius: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment