Chloroplast (Talk | contribs) |
Chloroplast (Talk | contribs) |
||
(19 intermediate revisions by the same user not shown) | |||
Line 346: | Line 346: | ||
delayScale: 1.5, | delayScale: 1.5, | ||
delay: 50, | delay: 50, | ||
− | sync: | + | sync: true, |
reverse: false, | reverse: false, | ||
shuffle: false, | shuffle: false, | ||
Line 355: | Line 355: | ||
delayScale: 1.5, | delayScale: 1.5, | ||
delay: 50, | delay: 50, | ||
− | sync: | + | sync: true, |
reverse: false, | reverse: false, | ||
shuffle: false, | shuffle: false, | ||
Line 362: | Line 362: | ||
autoStart: true, | autoStart: true, | ||
inEffects: [], | inEffects: [], | ||
− | outEffects: [ 'hinge' ], | + | outEffects: ['hinge'], |
callback: function () {}, | callback: function () {}, | ||
type: 'char' | type: 'char' | ||
Line 1,671: | Line 1,671: | ||
}); | }); | ||
})(); | })(); | ||
+ | </script> | ||
+ | <script> | ||
+ | function growDiv(param) { | ||
+ | var id = param; | ||
+ | var growDiv = document.getElementById('grow-'+id); | ||
+ | |||
+ | if (growDiv.clientHeight) { | ||
+ | growDiv.style.height = 0; | ||
+ | } else { | ||
+ | var items = document.querySelectorAll('#grow-' + id + ' .list-group-item'); | ||
+ | if (items.length > 0) | ||
+ | growDiv.style.height = (items.length * items[0].clientHeight) + "px"; | ||
+ | } | ||
+ | |||
+ | if(document.getElementById("menu-item-"+id).className.indexOf("focus") >= 0){ | ||
+ | document.getElementById("menu-item-"+id).className = document.getElementById("menu-item-"+id).className.replace("focus", ""); | ||
+ | } else{ | ||
+ | document.getElementById("menu-item-"+id).className += " focus"; | ||
+ | } | ||
+ | |||
+ | if(id == 2 || id == 3 || id == 4 || id == 7 || id == 9){ | ||
+ | $("#sidebar-arrow-" + id).toggleClass("side-bar-arrow-up"); | ||
+ | } | ||
+ | |||
+ | event.preventDefault(); | ||
+ | } | ||
+ | |||
+ | var $head = $( '#ha-header' ); | ||
+ | $( '.ha-waypoint' ).each( function(i) { | ||
+ | var $el = $( this ), | ||
+ | animClassDown = $el.data( 'animateDown' ), | ||
+ | animClassUp = $el.data( 'animateUp' ); | ||
+ | |||
+ | $el.waypoint( function( direction ) { | ||
+ | if( !(direction !== 'down' || !animClassDown) ) { | ||
+ | $head.attr('class', 'ha-header ' + animClassDown); | ||
+ | } | ||
+ | else if( !(direction !== 'up' || !animClassUp) ){ | ||
+ | $head.attr('class', 'ha-header ' + animClassUp); | ||
+ | } | ||
+ | }, { offset: '100%' } ); | ||
+ | } ); | ||
+ | |||
+ | (function($) { | ||
+ | |||
+ | var setCss = function() { | ||
+ | if($(window).width() <= 900) { | ||
+ | $('#nus_logo').css('left', "10%"); | ||
+ | $('#sci_logo').css('display', "none"); | ||
+ | $('#sps_logo').css('display', "none"); | ||
+ | $('.canvas_parts').css('display', "none"); | ||
+ | }else{ | ||
+ | $('#nus_logo').css('left', "0%"); | ||
+ | $('#sci_logo').css('display', "block"); | ||
+ | $('#sps_logo').css('display', "block"); | ||
+ | $('.canvas_parts').css('display', "block"); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | setCss(); | ||
+ | $(window).resize(setCss); | ||
+ | }); | ||
+ | |||
+ | })(jQuery); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | $( "#canvas" ) | ||
+ | .mouseleave(function() { | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Cancer_cell_body').css('opacity', '1'); | ||
+ | $('#Lactate').css('opacity', '1'); | ||
+ | |||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '1'); | ||
+ | |||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '1'); | ||
+ | |||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing').css('opacity', '1'); | ||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.CD44v6" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
+ | $('#Lactate').css('opacity', '0.2'); | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | |||
+ | $('#CD44v6').css('opacity', '1'); | ||
+ | $('#CD44v6_text').css('display', 'block'); | ||
+ | $('#CD44v6_text').textillate({ in: { | ||
+ | effect: 'fadeInUpBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('.CD44v6_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.Cancer_cell_body" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | |||
+ | |||
+ | $('.Cancer_cell_body_text').css('display', 'block'); | ||
+ | $('#Cancer_cell_body').css('opacity', '1'); | ||
+ | $('#Lactate').css('opacity', '1'); | ||
+ | $('.Cancer_cell_body_text').textillate({ in: { | ||
+ | effect: 'fadeInRightBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('.Cancer_cell_body_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.Invasin_and_LLO" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '0.2'); | ||
+ | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
+ | $('#Lactate').css('opacity', '0.2'); | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | |||
+ | |||
+ | $('.Invasin_and_LLO_text').css('display', 'inline'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '1'); | ||
+ | $('.Invasin_and_LLO_text').textillate({ in: { | ||
+ | effect: 'fadeInDownBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | $('.Invasin_and_LLO_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.Quorum_Sensing" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '0.2'); | ||
+ | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
+ | $('#Lactate').css('opacity', '0.2'); | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | |||
+ | |||
+ | $('#Quorum_Sensing_text').css('display', 'block'); | ||
+ | $('#Quorum_Sensing').css('opacity', '1'); | ||
+ | $('#Quorum_Sensing_text').textillate({ in: { | ||
+ | effect: 'fadeInLeftBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | // $('#CD44v6').mouseenter(function() { | ||
+ | // $('#CD44v6').css('display', 'none'); | ||
+ | // }); | ||
+ | // $( "#CD44v6" ).mouseleave(function() { | ||
+ | // $('#CD44v6').css('display', 'block'); | ||
+ | // }); | ||
+ | </script> | ||
+ | |||
+ | <!-- and operator --> | ||
+ | <script> | ||
+ | var andop = function (a, b) { | ||
+ | if (a) { | ||
+ | if (b) { | ||
+ | return true; | ||
+ | } else { | ||
+ | return false; | ||
+ | } | ||
+ | } else { | ||
+ | return false; | ||
+ | } | ||
+ | }; | ||
+ | </script> | ||
+ | <script> | ||
+ | $(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, | ||
+ | // 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(); | ||
+ | |||
+ | }); | ||
+ | $(document).ready(function() { | ||
+ | // Show or hide the sticky footer button | ||
+ | $(window).scroll(function() { | ||
+ | if ($(this).scrollTop() > 200) { | ||
+ | $('.go-top').fadeIn(200); | ||
+ | } else { | ||
+ | $('.go-top').fadeOut(200); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // Animate the scroll to top | ||
+ | $('.go-top').click(function(event) { | ||
+ | event.preventDefault(); | ||
+ | |||
+ | $('html, body').animate({scrollTop: 0}, 300); | ||
+ | }) | ||
+ | }); | ||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 07:39, 16 October 2016