Team:NJU China/Notebook
From 2013.igem.org
(Difference between revisions)
Line 921: | Line 921: | ||
</div> | </div> | ||
</div> | </div> | ||
- | + | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
+ | <script language="Javascript"> | ||
+ | /* | ||
+ | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ | ||
+ | * | ||
+ | * Uses the built in easing capabilities added In jQuery 1.1 | ||
+ | * to offer multiple easing options | ||
+ | * | ||
+ | * TERMS OF USE - jQuery Easing | ||
+ | * | ||
+ | * Open source under the BSD License. | ||
+ | * | ||
+ | * Copyright © 2008 George McGinley Smith | ||
+ | * 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 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 OWNER 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. | ||
+ | * | ||
+ | */ | ||
+ | |||
+ | // t: current time, b: begInnIng value, c: change In value, d: duration | ||
+ | jQuery.easing['jswing'] = jQuery.easing['swing']; | ||
+ | |||
+ | jQuery.extend( jQuery.easing, | ||
+ | { | ||
+ | def: 'easeOutQuad', | ||
+ | swing: function (x, t, b, c, d) { | ||
+ | //alert(jQuery.easing.default); | ||
+ | return jQuery.easing[jQuery.easing.def](x, t, b, c, d); | ||
+ | }, | ||
+ | easeInQuad: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t + b; | ||
+ | }, | ||
+ | easeOutQuad: function (x, t, b, c, d) { | ||
+ | return -c *(t/=d)*(t-2) + b; | ||
+ | }, | ||
+ | easeInOutQuad: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t + b; | ||
+ | return -c/2 * ((--t)*(t-2) - 1) + b; | ||
+ | }, | ||
+ | easeInCubic: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t + b; | ||
+ | }, | ||
+ | easeOutCubic: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutCubic: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInQuart: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuart: function (x, t, b, c, d) { | ||
+ | return -c * ((t=t/d-1)*t*t*t - 1) + b; | ||
+ | }, | ||
+ | easeInOutQuart: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; | ||
+ | return -c/2 * ((t-=2)*t*t*t - 2) + b; | ||
+ | }, | ||
+ | easeInQuint: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuint: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutQuint: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInSine: function (x, t, b, c, d) { | ||
+ | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; | ||
+ | }, | ||
+ | easeOutSine: function (x, t, b, c, d) { | ||
+ | return c * Math.sin(t/d * (Math.PI/2)) + b; | ||
+ | }, | ||
+ | easeInOutSine: function (x, t, b, c, d) { | ||
+ | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; | ||
+ | }, | ||
+ | easeInExpo: function (x, t, b, c, d) { | ||
+ | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; | ||
+ | }, | ||
+ | easeOutExpo: function (x, t, b, c, d) { | ||
+ | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; | ||
+ | }, | ||
+ | easeInOutExpo: function (x, t, b, c, d) { | ||
+ | if (t==0) return b; | ||
+ | if (t==d) return b+c; | ||
+ | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; | ||
+ | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; | ||
+ | }, | ||
+ | easeInCirc: function (x, t, b, c, d) { | ||
+ | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; | ||
+ | }, | ||
+ | easeOutCirc: function (x, t, b, c, d) { | ||
+ | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; | ||
+ | }, | ||
+ | easeInOutCirc: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; | ||
+ | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; | ||
+ | }, | ||
+ | easeInElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | }, | ||
+ | easeOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | ||
+ | }, | ||
+ | easeInOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; | ||
+ | }, | ||
+ | easeInBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*(t/=d)*t*((s+1)*t - s) + b; | ||
+ | }, | ||
+ | easeOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; | ||
+ | }, | ||
+ | easeInOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; | ||
+ | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; | ||
+ | }, | ||
+ | easeInBounce: function (x, t, b, c, d) { | ||
+ | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; | ||
+ | }, | ||
+ | easeOutBounce: function (x, t, b, c, d) { | ||
+ | if ((t/=d) < (1/2.75)) { | ||
+ | return c*(7.5625*t*t) + b; | ||
+ | } else if (t < (2/2.75)) { | ||
+ | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; | ||
+ | } else if (t < (2.5/2.75)) { | ||
+ | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; | ||
+ | } else { | ||
+ | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; | ||
+ | } | ||
+ | }, | ||
+ | easeInOutBounce: function (x, t, b, c, d) { | ||
+ | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; | ||
+ | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | /* | ||
+ | * | ||
+ | * TERMS OF USE - EASING EQUATIONS | ||
+ | * | ||
+ | * Open source under the BSD License. | ||
+ | * | ||
+ | * Copyright © 2001 Robert Penner | ||
+ | * 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 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 OWNER 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. | ||
+ | * | ||
+ | */ | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | |||
+ | var $sidescroll = (function() { | ||
+ | |||
+ | // the row elements | ||
+ | var $rows = $('#ss-container > div.ss-row'), | ||
+ | // we will cache the inviewport rows and the outside viewport rows | ||
+ | $rowsViewport, $rowsOutViewport, | ||
+ | // navigation menu links | ||
+ | $links = $('#ss-links > a'), | ||
+ | // the window element | ||
+ | $win = $(window), | ||
+ | // we will store the window sizes here | ||
+ | winSize = {}, | ||
+ | // used in the scroll setTimeout function | ||
+ | anim = false, | ||
+ | // page scroll speed | ||
+ | scollPageSpeed = 2000 , | ||
+ | // page scroll easing | ||
+ | scollPageEasing = 'easeInOutExpo', | ||
+ | // perspective? | ||
+ | hasPerspective = false, | ||
+ | |||
+ | perspective = hasPerspective && Modernizr.csstransforms3d, | ||
+ | // initialize function | ||
+ | init = function() { | ||
+ | |||
+ | // get window sizes | ||
+ | getWinSize(); | ||
+ | // initialize events | ||
+ | initEvents(); | ||
+ | // define the inviewport selector | ||
+ | defineViewport(); | ||
+ | // gets the elements that match the previous selector | ||
+ | setViewportRows(); | ||
+ | // if perspective add css | ||
+ | if( perspective ) { | ||
+ | $rows.css({ | ||
+ | '-webkit-perspective' : 600, | ||
+ | '-webkit-perspective-origin' : '50% 0%' | ||
+ | }); | ||
+ | } | ||
+ | // show the pointers for the inviewport rows | ||
+ | $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco'); | ||
+ | // set positions for each row | ||
+ | placeRows(); | ||
+ | |||
+ | }, | ||
+ | // defines a selector that gathers the row elems that are initially visible. | ||
+ | // the element is visible if its top is less than the window's height. | ||
+ | // these elements will not be affected when scrolling the page. | ||
+ | defineViewport = function() { | ||
+ | |||
+ | $.extend( $.expr[':'], { | ||
+ | |||
+ | inviewport : function ( el ) { | ||
+ | if ( $(el).offset().top < winSize.height ) { | ||
+ | return true; | ||
+ | } | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | }, | ||
+ | // checks which rows are initially visible | ||
+ | setViewportRows = function() { | ||
+ | |||
+ | $rowsViewport = $rows.filter(':inviewport'); | ||
+ | $rowsOutViewport = $rows.not( $rowsViewport ) | ||
+ | |||
+ | }, | ||
+ | // get window sizes | ||
+ | getWinSize = function() { | ||
+ | |||
+ | winSize.width = $win.width(); | ||
+ | winSize.height = $win.height(); | ||
+ | |||
+ | }, | ||
+ | // initialize some events | ||
+ | initEvents = function() { | ||
+ | |||
+ | // navigation menu links. | ||
+ | // scroll to the respective section. | ||
+ | $links.on( 'click.Scrolling', function( event ) { | ||
+ | |||
+ | // scroll to the element that has id = menu's href | ||
+ | $('html, body').stop().animate({ | ||
+ | scrollTop: $( $(this).attr('href') ).offset().top | ||
+ | }, scollPageSpeed, scollPageEasing ); | ||
+ | |||
+ | return false; | ||
+ | |||
+ | }); | ||
+ | |||
+ | $(window).on({ | ||
+ | // on window resize we need to redefine which rows are initially visible (this ones we will not animate). | ||
+ | 'resize.Scrolling' : function( event ) { | ||
+ | |||
+ | // get the window sizes again | ||
+ | getWinSize(); | ||
+ | // redefine which rows are initially visible (:inviewport) | ||
+ | setViewportRows(); | ||
+ | // remove pointers for every row | ||
+ | $rows.find('a.ss-circle').removeClass('ss-circle-deco'); | ||
+ | // show inviewport rows and respective pointers | ||
+ | $rowsViewport.each( function() { | ||
+ | |||
+ | $(this).find('div.ss-left') | ||
+ | .css({ left : '0%' }) | ||
+ | .end() | ||
+ | .find('div.ss-right') | ||
+ | .css({ right : '0%' }) | ||
+ | .end() | ||
+ | .find('a.ss-circle') | ||
+ | .addClass('ss-circle-deco'); | ||
+ | |||
+ | }); | ||
+ | |||
+ | }, | ||
+ | // when scrolling the page change the position of each row | ||
+ | 'scroll.Scrolling' : function( event ) { | ||
+ | |||
+ | // set a timeout to avoid that the | ||
+ | // placeRows function gets called on every scroll trigger | ||
+ | if( anim ) return false; | ||
+ | anim = true; | ||
+ | setTimeout( function() { | ||
+ | |||
+ | placeRows(); | ||
+ | anim = false; | ||
+ | |||
+ | }, 10 ); | ||
+ | |||
+ | } | ||
+ | }); | ||
+ | |||
+ | }, | ||
+ | // sets the position of the rows (left and right row elements). | ||
+ | // Both of these elements will start with -50% for the left/right (not visible) | ||
+ | // and this value should be 0% (final position) when the element is on the | ||
+ | // center of the window. | ||
+ | placeRows = function() { | ||
+ | |||
+ | // how much we scrolled so far | ||
+ | var winscroll = $win.scrollTop(), | ||
+ | // the y value for the center of the screen | ||
+ | winCenter = winSize.height / 2 + winscroll; | ||
+ | |||
+ | // for every row that is not inviewport | ||
+ | $rowsOutViewport.each( function(i) { | ||
+ | |||
+ | var $row = $(this), | ||
+ | // the left side element | ||
+ | $rowL = $row.find('div.ss-left'), | ||
+ | // the right side element | ||
+ | $rowR = $row.find('div.ss-right'), | ||
+ | // top value | ||
+ | rowT = $row.offset().top; | ||
+ | |||
+ | // hide the row if it is under the viewport | ||
+ | if( rowT > winSize.height + winscroll ) { | ||
+ | |||
+ | if( perspective ) { | ||
+ | |||
+ | $rowL.css({ | ||
+ | '-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)', | ||
+ | 'opacity' : 0 | ||
+ | }); | ||
+ | $rowR.css({ | ||
+ | '-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)', | ||
+ | 'opacity' : 0 | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | |||
+ | $rowL.css({ left : '-50%' }); | ||
+ | $rowR.css({ right : '-50%' }); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen. | ||
+ | else { | ||
+ | |||
+ | // row's height | ||
+ | var rowH = $row.height(), | ||
+ | // the value on each scrolling step will be proporcional to the distance from the center of the screen to its height | ||
+ | factor = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ), | ||
+ | // value for the left / right of each side of the row. | ||
+ | // 0% is the limit | ||
+ | val = Math.max( factor * 50, 0 ); | ||
+ | |||
+ | if( val <= 0 ) { | ||
+ | |||
+ | // when 0% is reached show the pointer for that row | ||
+ | if( !$row.data('pointer') ) { | ||
+ | |||
+ | $row.data( 'pointer', true ); | ||
+ | $row.find('.ss-circle').addClass('ss-circle-deco'); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | |||
+ | // the pointer should not be shown | ||
+ | if( $row.data('pointer') ) { | ||
+ | |||
+ | $row.data( 'pointer', false ); | ||
+ | $row.find('.ss-circle').removeClass('ss-circle-deco'); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | // set calculated values | ||
+ | if( perspective ) { | ||
+ | |||
+ | var t = Math.max( factor * 75, 0 ), | ||
+ | r = Math.max( factor * 90, 0 ), | ||
+ | o = Math.min( Math.abs( factor - 1 ), 1 ); | ||
+ | |||
+ | $rowL.css({ | ||
+ | '-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)', | ||
+ | 'opacity' : o | ||
+ | }); | ||
+ | $rowR.css({ | ||
+ | '-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)', | ||
+ | 'opacity' : o | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | |||
+ | $rowL.css({ left : - val + '%' }); | ||
+ | $rowR.css({ right : - val + '%' }); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | }; | ||
+ | |||
+ | return { init : init }; | ||
+ | |||
+ | })(); | ||
+ | |||
+ | $sidescroll.init(); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 19:00, 26 September 2013