Chloroplast (Talk | contribs) |
Chloroplast (Talk | contribs) |
||
(14 intermediate revisions by the same user not shown) | |||
Line 360: | Line 360: | ||
callback: function () {} | callback: function () {} | ||
}, | }, | ||
− | autoStart: | + | autoStart: true, |
inEffects: [], | inEffects: [], | ||
− | outEffects: [], | + | outEffects: ['hinge'], |
callback: function () {}, | callback: function () {}, | ||
type: 'char' | type: 'char' | ||
Line 1,689: | Line 1,689: | ||
} else{ | } else{ | ||
document.getElementById("menu-item-"+id).className += " focus"; | 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"); | ||
} | } | ||
Line 1,713: | Line 1,717: | ||
var setCss = function() { | var setCss = function() { | ||
− | if($(window).width() <= | + | if($(window).width() <= 900) { |
− | + | $('#nus_logo').css('left', "10%"); | |
$('#sci_logo').css('display', "none"); | $('#sci_logo').css('display', "none"); | ||
$('#sps_logo').css('display', "none"); | $('#sps_logo').css('display', "none"); | ||
− | + | $('.canvas_parts').css('display', "none"); | |
}else{ | }else{ | ||
$('#nus_logo').css('left', "0%"); | $('#nus_logo').css('left', "0%"); | ||
$('#sci_logo').css('display', "block"); | $('#sci_logo').css('display', "block"); | ||
$('#sps_logo').css('display', "block"); | $('#sps_logo').css('display', "block"); | ||
− | + | $('.canvas_parts').css('display', "block"); | |
} | } | ||
}; | }; | ||
Line 1,738: | Line 1,742: | ||
$( "#canvas" ) | $( "#canvas" ) | ||
.mouseleave(function() { | .mouseleave(function() { | ||
− | $(' | + | $('.Cancer_cell_body_text').css('display', 'none'); |
$('#Cancer_cell_body').css('opacity', '1'); | $('#Cancer_cell_body').css('opacity', '1'); | ||
+ | $('#Lactate').css('opacity', '1'); | ||
$('#CD44v6_text').css('display', 'none'); | $('#CD44v6_text').css('display', 'none'); | ||
$('#CD44v6').css('opacity', '1'); | $('#CD44v6').css('opacity', '1'); | ||
− | $(' | + | $('.Invasin_and_LLO_text').css('display', 'none'); |
$('#Invasin_and_LLO').css('opacity', '1'); | $('#Invasin_and_LLO').css('opacity', '1'); | ||
Line 1,756: | Line 1,761: | ||
.mouseenter(function() { | .mouseenter(function() { | ||
$('#Cancer_cell_body').css('opacity', '0.2'); | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
− | $('#Cancer_cell_body_text').css('display', 'none'); | + | $('#Lactate').css('opacity', '0.2'); |
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
$('#Quorum_Sensing').css('opacity', '0.2'); | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
$('#Quorum_Sensing_text').css('display', 'none'); | $('#Quorum_Sensing_text').css('display', 'none'); | ||
$('#Invasin_and_LLO').css('opacity', '0.2'); | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
− | $(' | + | $('.Invasin_and_LLO_text').css('display', 'none'); |
$('#CD44v6').css('opacity', '1'); | $('#CD44v6').css('opacity', '1'); | ||
Line 1,782: | Line 1,788: | ||
$('#Quorum_Sensing_text').css('display', 'none'); | $('#Quorum_Sensing_text').css('display', 'none'); | ||
$('#Invasin_and_LLO').css('opacity', '0.2'); | $('#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'); | $('#Cancer_cell_body').css('opacity', '1'); | ||
− | $('#Cancer_cell_body_text').textillate({ in: { | + | $('#Lactate').css('opacity', '1'); |
+ | $('.Cancer_cell_body_text').textillate({ in: { | ||
effect: 'fadeInRightBig', | effect: 'fadeInRightBig', | ||
sync: true | sync: true | ||
Line 1,793: | Line 1,800: | ||
}) | }) | ||
.mouseleave(function() { | .mouseleave(function() { | ||
− | $(' | + | $('.Cancer_cell_body_text').css('display', 'none'); |
− | $(' | + | $('.Cancer_cell_body_text').textillate('start'); |
}); | }); | ||
Line 1,803: | Line 1,810: | ||
$('#CD44v6').css('opacity', '0.2'); | $('#CD44v6').css('opacity', '0.2'); | ||
$('#Cancer_cell_body').css('opacity', '0.2'); | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
− | $('#Cancer_cell_body_text').css('display', 'none'); | + | $('#Lactate').css('opacity', '0.2'); |
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
$('#Quorum_Sensing').css('opacity', '0.2'); | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
$('#Quorum_Sensing_text').css('display', 'none'); | $('#Quorum_Sensing_text').css('display', 'none'); | ||
− | $(' | + | $('.Invasin_and_LLO_text').css('display', 'inline'); |
$('#Invasin_and_LLO').css('opacity', '1'); | $('#Invasin_and_LLO').css('opacity', '1'); | ||
− | $(' | + | $('.Invasin_and_LLO_text').textillate({ in: { |
effect: 'fadeInDownBig', | effect: 'fadeInDownBig', | ||
sync: true | sync: true | ||
Line 1,816: | Line 1,824: | ||
}) | }) | ||
.mouseleave(function() { | .mouseleave(function() { | ||
− | $(' | + | $('.Invasin_and_LLO_text').css('display', 'none'); |
− | $(' | + | $('.Invasin_and_LLO_text').textillate('start'); |
}); | }); | ||
Line 1,826: | Line 1,834: | ||
$('#CD44v6').css('opacity', '0.2'); | $('#CD44v6').css('opacity', '0.2'); | ||
$('#Cancer_cell_body').css('opacity', '0.2'); | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
− | $('#Cancer_cell_body_text').css('display', 'none'); | + | $('#Lactate').css('opacity', '0.2'); |
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
$('#Invasin_and_LLO').css('opacity', '0.2'); | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
− | $(' | + | $('.Invasin_and_LLO_text').css('display', 'none'); |
Line 1,865: | Line 1,874: | ||
}; | }; | ||
</script> | </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> | ||
</html> | </html> |
Latest revision as of 07:39, 16 October 2016