diff --git a/jquery.roundabout-shapes.js b/jquery.roundabout-shapes.js new file mode 100644 index 0000000..04cffbc --- /dev/null +++ b/jquery.roundabout-shapes.js @@ -0,0 +1,182 @@ +/** + * jQuery Roundabout Shapes v2 + * http://fredhq.com/projects/roundabout-shapes/ + * + * Provides additional paths along which items can move for the + * jQuery Roundabout plugin (v1.0+). + * + * Terms of Use // jQuery Roundabout Shapes + * + * Open source under the BSD license + * + * Copyright (c) 2009-2011, Fred LeBlanc + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * + * - Redistributions of source code must retain the above copyright + * notice, this list of conditions and the following disclaimer. + * - Redistributions in binary form must reproduce the above + * copyright notice, this list of conditions and the following + * disclaimer in the documentation and/or other materials provided + * with the distribution. + * - Neither the name of the author nor the names of its contributors + * may be used to endorse or promote products derived from this + * software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" + * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE + * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE + * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR + * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + */ +jQuery.extend(jQuery.roundaboutShapes, +{ + theJuggler: function(r, a, t) { + return { + x: Math.sin(r + a), + y: Math.tan(Math.exp(Math.log(r)) + a) / (t - 1), + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + figure8: function(r, a, t) { + return { + x: Math.sin(r * 2 + a), + y: (Math.sin(r + Math.PI/2 + a) / 8) * t, + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + waterWheel: function(r, a, t) { + return { + x: (Math.sin(r + Math.PI/2 + a) / 8) * t, + y: Math.sin(r + a) / (Math.PI/2), + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + square: function(r, a, t) { + var sq_x, sq_y, sq_z; + + if (r <= Math.PI/2) { + sq_x = (2/Math.PI) * r; + sq_y = -(2/Math.PI) * r + 1; + sq_z = -(1/Math.PI) * r + 1; + } else if (r > Math.PI/2 && r <= Math.PI) { + sq_x = -(2/Math.PI) * r + 2; + sq_y = -(2/Math.PI) * r + 1; + sq_z = -(1/Math.PI) * r + 1; + } else if (r > Math.PI && r <= (3 * Math.PI) / 2) { + sq_x = -(2/Math.PI) * r + 2; + sq_y = (2/Math.PI) * r - 3; + sq_z = (1/Math.PI) * r - 1; + } else { + sq_x = (2/Math.PI) * r - 4; + sq_y = (2/Math.PI) * r - 3; + sq_z = (1/Math.PI) * r - 1; + } + + return { + x: sq_x, + y: sq_y * t, + z: sq_z, + scale: sq_z + }; + }, + conveyorBeltLeft: function(r, a, t) { + return { + x: -Math.cos(r + a), + y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t, + z: (Math.sin(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + conveyorBeltRight: function(r, a, t) { + return { + x: Math.cos(r + a), + y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t, + z: (Math.sin(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + goodbyeCruelWorld: function(r, a, t) { + return { + x: Math.sin(r + a), + y: (Math.tan(r + 3*Math.PI/2 + a) / 8) * (t + 0.5), + z: (Math.sin(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + diagonalRingLeft: function(r, a, t) { + return { + x: Math.sin(r + a), + y: -Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5), + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + diagonalRingRight: function(r, a, t) { + return { + x: Math.sin(r + a), + y: Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5), + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + rollerCoaster: function(r, a, t) { + return { + x: Math.sin(r + a), + y: Math.sin((2 + t) * r), + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + tearDrop: function(r, a, t) { + return { + x: Math.sin(r + a), + y: -Math.sin(r/2 + t) + 0.35, + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + tickingClock: function(r, a, t) { + return { + x: Math.cos(r + a - Math.PI/2), + y: Math.sin(r + a - Math.PI/2), + z: Math.cos(r), + scale: Math.cos(r) + 0.5 + } + }, + flurry: function(r, a, t) { + return { + x: Math.sin(r * 3 + a), + y: (Math.cos(r + Math.PI/2 + a) / 2) * t, + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + nowSlide: function(r, a, t) { + return { + x: Math.tan(r * 2 + a) * 0.5, + y: Math.cos(r*2 + t) / 6, + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + }, + risingEssence: function(r, a, t) { + return { + x: Math.sin(r + a), + y: Math.tan((2 + t) * r), + z: (Math.cos(r + a) + 1) / 2, + scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5 + }; + } +}); \ No newline at end of file diff --git a/jquery.roundabout-shapes.min.js b/jquery.roundabout-shapes.min.js new file mode 100644 index 0000000..512545c --- /dev/null +++ b/jquery.roundabout-shapes.min.js @@ -0,0 +1,40 @@ +/** + * jQuery Roundabout Shapes v2 + * http://fredhq.com/projects/roundabout-shapes/ + * + * Provides additional paths along which items can move for the + * jQuery Roundabout plugin (v2.0+). + * + * Terms of Use // jQuery Roundabout Shapes + * + * Open source under the BSD license + * + * Copyright (c) 2009-2011, Fred LeBlanc + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * + * - Redistributions of source code must retain the above copyright + * notice, this list of conditions and the following disclaimer. + * - Redistributions in binary form must reproduce the above + * copyright notice, this list of conditions and the following + * disclaimer in the documentation and/or other materials provided + * with the distribution. + * - Neither the name of the author nor the names of its contributors + * may be used to endorse or promote products derived from this + * software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" + * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE + * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE + * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR + * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + */ +jQuery.extend(jQuery.roundaboutShapes,{theJuggler:function(a,b,c){return{x:Math.sin(a+b),y:Math.tan(Math.exp(Math.log(a))+b)/(c-1),z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},figure8:function(a,b,c){return{x:Math.sin(a*2+b),y:Math.sin(a+Math.PI/2+b)/8*c,z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},waterWheel:function(a,b,c){return{x:Math.sin(a+Math.PI/2+b)/8*c,y:Math.sin(a+b)/(Math.PI/2),z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},square:function(a,b,c){var d,e,f;if(a<=Math.PI/2){d=2/Math.PI*a;e=-(2/Math.PI)*a+1;f=-(1/Math.PI)*a+1}else if(a>Math.PI/2&&a<=Math.PI){d=-(2/Math.PI)*a+2;e=-(2/Math.PI)*a+1;f=-(1/Math.PI)*a+1}else if(a>Math.PI&&a<=3*Math.PI/2){d=-(2/Math.PI)*a+2;e=2/Math.PI*a-3;f=1/Math.PI*a-1}else{d=2/Math.PI*a-4;e=2/Math.PI*a-3;f=1/Math.PI*a-1}return{x:d,y:e*c,z:f,scale:f}},conveyorBeltLeft:function(a,b,c){return{x:-Math.cos(a+b),y:Math.cos(a+3*Math.PI/2+b)/8*c,z:(Math.sin(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},conveyorBeltRight:function(a,b,c){return{x:Math.cos(a+b),y:Math.cos(a+3*Math.PI/2+b)/8*c,z:(Math.sin(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},goodbyeCruelWorld:function(a,b,c){return{x:Math.sin(a+b),y:Math.tan(a+3*Math.PI/2+b)/8*(c+.5),z:(Math.sin(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},diagonalRingLeft:function(a,b,c){return{x:Math.sin(a+b),y:-Math.cos(a+Math.tan(Math.cos(b)))/(c+1.5),z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},diagonalRingRight:function(a,b,c){return{x:Math.sin(a+b),y:Math.cos(a+Math.tan(Math.cos(b)))/(c+1.5),z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},rollerCoaster:function(a,b,c){return{x:Math.sin(a+b),y:Math.sin((2+c)*a),z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},tearDrop:function(a,b,c){return{x:Math.sin(a+b),y:-Math.sin(a/2+c)+.35,z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},tickingClock:function(a,b,c){return{x:Math.cos(a+b-Math.PI/2),y:Math.sin(a+b-Math.PI/2),z:Math.cos(a),scale:Math.cos(a)+.5}},flurry:function(a,b,c){return{x:Math.sin(a*3+b),y:Math.cos(a+Math.PI/2+b)/2*c,z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},nowSlide:function(a,b,c){return{x:Math.tan(a*2+b)*.5,y:Math.cos(a*2+c)/6,z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}},risingEssence:function(a,b,c){return{x:Math.sin(a+b),y:Math.tan((2+c)*a),z:(Math.cos(a+b)+1)/2,scale:Math.sin(a+Math.PI/2+b)/2+.5}}}) \ No newline at end of file diff --git a/roundabout.css b/roundabout.css new file mode 100644 index 0000000..4d67d79 --- /dev/null +++ b/roundabout.css @@ -0,0 +1,218 @@ + +body{background:#fff; color:#eee;} + .roundabout-holder { + padding: 0; + margin: 0 auto; + height: 580px; + width: 920px; + } + + .roundabout-moveable-item { + height: 580px; + width: 808px; + cursor: pointer; + border:1px solid black; + display:block; + } + + .roundabout-moveable-item img { + height: 100%; + width: 100%; + } + + .roundabout-in-focus { + cursor: auto; + } + + + + +#carousel li { +height: 580px; +width: 808px; +box-shadow: 0 0 10px #000; +text-align: center; +cursor: pointer; +overflow: hidden; +background: #000; + opacity: 1!important; +} + +#carousel li.roundabout-in-focus:hover span { +display: block; +z-index: 1; +} + +#carousel li img { + opacity: 0.65; +} + +#carousel li.roundabout-in-focus{ +cursor: default; +} + +#carousel li.roundabout-in-focus img { +opacity: 1!important; +} +#carousel li.roundabout-in-focus:hover img { +opacity: .5!important; +} + + +#carousel li span { +display: none; +position: absolute; +width: 260px; +border-radius: 5px; +margin: 270px 88px; +overflow: hidden; +box-shadow: 0 0 8px #000; +} + +#carousel a.view-project-button { +display: block; +color: #FFF; +font: 34px/1.6em "Helvetica Neue", Arial, sans-serif; +padding: 6px 12px; +text-decoration: none; +background: #9ABE42; +} +#carousel a.view-project-button:hover { +background: #7E9D32; +} + +#carousel li span a.preview { +background: #BD3B3C; +border-radius: 5px 0 0 5px; +} +#carousel li span a:hover.preview { +background: #CE4A4B; +} +#carousel li span a.details { +background: #A28E5C; +border-radius: 0 5px 5px 0; +} +#carousel li span a:hover.details { +background: #B8A169; +} + + + + + + + + + + + + + +.well { + border: 1px solid #e6e6e6; + border-radius: 6px; + color: #888; + margin-top:60px; + +} +.well-anchor { + align-items: center; + color: #555; + cursor: pointer; + display: flex; + font-size: 21px; + margin-left: auto; + margin-right: auto; + max-width: 660px; + padding: 30px 30px 59px 30px; +} +.sign-up-box { + font-family: -apple-system, "Helvetica Neue", "Segoe UI", sans-serif; + font-feature-settings: 'kern'; + align-items: flex-start; + align-self: stretch; + background: #fff; + min-width: 660px; + overflow: visible; + padding-left: 45px; + position: relative; +} +.grid-block.vertical { + flex-flow: column nowrap; +} + + +img { + max-width: 100%; + vertical-align: middle; + border: 0; +} +.well-anchor .img { + margin-right: 15px; +} +.sign-up-box .img { + bottom: 4px; + height: auto; + position: absolute; + right: 0; + width: 150px; +} +.well-anchor .p { + line-height: 1.4; + margin-bottom: 0; + font-family: -apple-system, "Helvetica Neue", "Segoe UI", sans-serif; +} +.footer .well-anchor .p { + margin-bottom: 9px; + margin-right: 120px; +} +.strong { + font-weight: 500; +} +.well-anchor .a { + color: #834fab; + font-size: 14px; + white-space: nowrap; + text-decoration: none; +} +.well-anchor.cta-blue .a { + color: #039BE5; + font-size: 14px; + white-space: nowrap; + text-decoration: none; +} + + + +a:-webkit-any-link { + text-decoration: none; + cursor: auto; +} + +.well-anchor .a .icons { + height: 12px; + margin-top: 1px; + position: relative; + top: 1px; + width: 12px; +} +.well-anchor:hover { + border-color: #834fab; + box-shadow: inset 0 0 0 1px #834fab; +} +.well-anchor.cta-blue{ + border-color: #039BE5; + box-shadow: inset 0 0 0 1px #03A9F4; +} +.well-anchor.cta-blue:hover { + border-color: #039BE5; + box-shadow: inset 0 0 0 2px #03A9F4; +} + +.well-anchor.cta-blue{ + padding: 30px 30px 10px 30px; +} + + + +