Template:JS/EPFL default
From 2014.igem.org
$(document).ready(function() { $('body').scrollspy({ target: '#affix-nav' }); $('#menubar li[style]').css('color', 'transparent');
$('#myCarousel').carousel({ interval: 7000 }); // Scroll page with easing effect $('.navbar ul li a.goto').bind('click', function(e) { e.preventDefault(); target = this.hash; $.scrollTo(target, 1500, { easing: 'easeOutCubic' });
$(".btn-navbar").click(); });
// Scroll page with easing effect $('#footerMenu a').bind('click', function(e) { e.preventDefault(); target = this.hash; $.scrollTo(target, 1500, { easing: 'easeOutCubic' });
$(".btn-navbar").click(); });
// Show/Hide Sticky "Go top" button $(window).scroll(function(){ if($(this).scrollTop()>200){ $(".go-top").fadeIn(200); } else{ $(".go-top").fadeOut(200); } }); // Scroll Page to Top when clicked on "go top" button $(".go-top").click(function(event){ event.preventDefault();
$.scrollTo(20, 1500, { easing: 'easeOutCubic' }); });
var SCREEN_WIDTH = 388; var SCREEN_HEIGHT = 220;
var MAX_SCREEN_WIDTH = 388; var MAX_SCREEN_HEIGHT = 220;
var MAX_IMG_WIDTH = 1129; var MAX_IMG_HEIGHT = 427; var canvas; var context; var particle; var img; var mouseX = null; var mouseY = null;
var initialized = false; init();
function init() {
canvas = document.getElementById('biopad');
img = document.getElementById('slide1'); if (canvas && canvas.getContext) { context = canvas.getContext('2d'); // Register event listeners canvas.addEventListener('mousemove', documentMouseMoveHandler, false); canvas.addEventListener('touchstart', canvasTouchStartHandler, false); canvas.addEventListener('touchmove', canvasTouchMoveHandler, false); window.addEventListener('resize', windowResizeHandler, false); createParticles();
windowResizeHandler(); setTimeout(windowResizeHandler, 1000); setInterval( loop, 1000 / 60 ); } }
function createParticles() { particle = { position: { x: mouseX, y: mouseY }, size: 5, speed: 0.05, targetSize: 3, fillColor: '#ffff66', }; }
function documentMouseMoveHandler(event) {
pos = canvas.getBoundingClientRect(); mouseX = event.clientX - pos.left; mouseY = event.clientY - pos.top;
initialized = true; }
function canvasTouchStartHandler(event) { if(event.touches.length == 1) {
pos = canvas.getBoundingClientRect(); mouseX = event.touches[0].pageX - pos.left; mouseY = event.touches[0].pageY - pos.top;
event.preventDefault();
initialized = true;
} } function canvasTouchMoveHandler(event) { if(event.touches.length == 1) {
pos = canvas.getBoundingClientRect(); event.preventDefault();
mouseX = event.touches[0].pageX - pos.left; mouseY = event.touches[0].pageY - pos.top;
initialized = true; } }
function windowResizeHandler() {
imgPos = img.getBoundingClientRect();
ratioW = imgPos.width / MAX_IMG_WIDTH; ratioH = imgPos.height / MAX_IMG_HEIGHT;
SCREEN_WIDTH = parseInt(MAX_SCREEN_WIDTH * ratioW); SCREEN_HEIGHT = parseInt(MAX_SCREEN_HEIGHT * ratioH); canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; canvas.style.position = 'absolute'; canvas.style.left = parseInt((imgPos.right - canvas.width) - 48 * ratioW) + 'px'; canvas.style.top = parseInt(90 * ratioH) + 'px'; }
function loop() {
if (initialized) { // Fade out the lines slowly by drawing a rectangle over the entire canvas context.fillStyle = 'rgba(203,225,229,0.3)'; //context.fillStyle = 'rgba(0,0,0,0.05)'; context.fillRect(0, 0, context.canvas.width, context.canvas.height); var lp = { x: particle.position.x, y: particle.position.y };
if (lp.x == null && lp.y == null) { lp.x = mouseX; lp.y = mouseY; } // Apply position particle.position.x = mouseX; particle.position.y = mouseY; // Limit to screen bounds particle.position.x = Math.max( Math.min( particle.position.x, SCREEN_WIDTH ), 0 ); particle.position.y = Math.max( Math.min( particle.position.y, SCREEN_HEIGHT ), 0 ); context.beginPath(); context.fillStyle = particle.fillColor; context.strokeStyle = particle.fillColor; context.lineWidth = particle.size; context.moveTo(lp.x, lp.y); context.lineTo(particle.position.x, particle.position.y); context.stroke(); context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true); context.fill();
} }
var machu = new Audio("https://static.igem.org/mediawiki/2014/0/00/01_Machu_Pichu.mp3");
var easter_egg = new Konami(function() { machu.play(); });
});