Team:Central Calgary
<script src="https://2015.igem.org/Team:Central_Calgary/js/jquery?action=raw&ctype=text/javascript"></script> <script src="https://2015.igem.org/Team:Central_Calgary/js/mousewheel?action=raw&ctype=text/javascript"></script> <script src="https://2015.igem.org/Team:Central_Calgary/js/teampagejs?action=raw&ctype=text/javascript"></script> <script src="https://2015.igem.org/Team:Central_Calgary/three?action=raw&ctype=text/javascript"></script>
<script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/EffectComposer?action=raw&ctype=text/javascript"></script>
<script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/RenderPass?action=raw&ctype=text/javascript"></script> <script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/MaskPass?action=raw&ctype=text/javascript"></script> <script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/ShaderPass?action=raw&ctype=text/javascript"></script>
<script src="https://2015.igem.org/Team:Central_Calgary/shaders/CopyShader?action=raw&ctype=text/javascript"></script> <script src="https://2015.igem.org/Team:Central_Calgary/shaders/HorizontalBlurShader?action=raw&ctype=text/javascript"></script> <script src="https://2015.igem.org/Team:Central_Calgary/shaders/RGBShiftShader?action=raw&ctype=text/javascript"></script>
<script>
var panels = new Array("#home1","#home2","#team1","#team2","#why1","#project1","#project2","#project3","#project4","#lab1","#lab2","#lab3","#lab4","#lab5","#lab6","#lab7","#lab8","#lab9","#lab10","#safety1","#ethics1","#logbook1","#policy1"); var panelButtons = new Array("#fho1","#fho2","#fte1","#fte2","#fwh1","#fpr1","#fpr2","#fpr3","#fpr4","#flb1","#flb2","#flb3","#flb4","#flb5","#flb6","#flb7","#flb8","#flb9","#flb10");
var buttons = new Array("#bHome","#bTeam","#bWhy","#bProject","#bLab","#bSafety","#bEthics","#bLogbook","#bPolicy","#bPractices"); var footerMenus = new Array("#home","#team","#why","#project","#lab"); var prevMenu = 0, activeMenu = 0; var currentPanel = 0;
function update() {
prevMenu = activeMenu;
for(var i = 0; i <= buttons.length; i++) { $(buttons[i]).attr("class","menuItem");
}
if(currentPanel === 0 || currentPanel === 1) { $("#bHome").attr("class","currentLink"); $("#home").addClass("activeFooter"); activeMenu = 0;
} else if(currentPanel === 2 || currentPanel === 3) { $("#bTeam").attr("class","currentLink"); $("#team").addClass("activeFooter"); activeMenu = 1;
} else if (currentPanel===4) { $("#bWhy").attr("class","currentLink"); $("#why").addClass("activeFooter"); activeMenu = 2;
} else if(currentPanel <= 8) {
$("#bProject").attr("class","currentLink");
$("#project").addClass("activeFooter");
activeMenu = 3;
} else if(currentPanel <= 18) { $("#bLab").attr("class","currentLink");
$("#lab").addClass("activeFooter");
activeMenu = 4; } else if(currentPanel === 11) { $("#bSafety").attr("class","currentLink"); } else if(currentPanel === 12) { $("#bEthics").attr("class","currentLink"); } else if(currentPanel === 13) { $("#bLogbook").attr("class","currentLink"); } else if(currentPanel === 14) { $("#bPolicy").attr("class","currentLink"); } else if(currentPanel === 15) { $("#bPractices").attr("class","currentLink"); }
for(var i = 0; i < panelButtons.length; i++)
{
$(panelButtons[i]).removeClass('activePage');
}
$(panelButtons[currentPanel]).addClass('activePage');
for(var i = 0; i<footerMenus.length; i++)
{
if(i === activeMenu)
{
if(prevMenu != activeMenu)
{
$(footerMenus[i]).fadeIn("fast","linear");
}
}
else
{
$(footerMenus[i]).fadeOut("fast","linear");
$(footerMenus[i]).addClass("disableFooter").removeClass("activeFooter");
}
}
if(currentPanel===1)
{
$("#contentBg").fadeOut(0);
$("#contentBg").css("background","url(img/teamPhoto.png)");
$("#contentBg").stop().fadeIn(500);
}
else
{
$("#contentBg").stop().fadeOut(500);
}
}
window.addEventListener("keydown", function(e) {
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); }
}, false);
(function($) { $('#header a').on('click', function(e) { e.preventDefault(); var target = '#'+$(this).data('target'); var left = $(target).position().left;
if(panels[currentPanel] != target) { for(var i = 0; i < panels.length; i++) {
if(panels[i] === target) { currentPanel=i; break; } } update();
$('html, body').stop().animate({scrollLeft:left, scrollTop:"0px"}, 1000); } });
$('#footerBar a').on('click', function(e) { e.preventDefault();
var target = '#'+$(this).data('target');
if(target == "#next") { if(currentPanel + 1 < panels.length) { currentPanel++; var left = $(panels[currentPanel]).position().left; update(); $('html, body').stop().animate({scrollLeft:left, scrollTop:"0px"}, 500);
}
} else if(target == "#back") {
if(currentPanel - 1 >= 0)
{
currentPanel--;
var left = $(panels[currentPanel]).position().left;
update();
$('html, body').stop().animate({scrollLeft:left, scrollTop:"0px"}, 500);
}
} else {
var left = $(target).position().left;
if($(this).data('group') == footerMenus[activeMenu]) { if(panels[currentPanel] != target) { for(var i = 0; i < panels.length; i++) { if(panels[i] === target) { currentPanel=i; break; } } update(); $('html, body').stop().animate({scrollLeft:left, scrollTop:"0px"}, 1000); } } }
});
/*$("body").mousewheel(function(event,delta) {
event.preventDefault();
if(currentPanel-delta < panels.length)
{
if(currentPanel-delta>=0)
{
currentPanel-=delta;
var left = $(panels[currentPanel]).position().left;
$("html,body").stop().animate({scrollLeft:left, scrollTop:"0px"}, 500); event.preventDefault(); } } update();
});*/
update();
}(jQuery));
var camera, scene, renderer, mesh, loader, material,texture,composer; var container; var sFinal; var json;
$.ajaxSetup({ async: false });
sFinal = $.ajax({
url: "https://static.igem.org/mediawiki/2015/c/ce/Dna.txt", }).responseText;
json = JSON.parse(sFinal);
container = document.getElementById('canvas'); document.body.appendChild(container);
renderer = new THREE.WebGLRenderer(); renderer.setSize(1920,1080); renderer.setClearColor( 0x90D8F0,0); container.appendChild(renderer.domElement);
scene = new THREE.Scene(); var ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xFFFFFF,1); var directionalLight2 = new THREE.DirectionalLight(0xFFFFFF,1); directionalLight.position.set(10, 1, 3); directionalLight2.position.set(0, 3, 10); scene.add(directionalLight); scene.add(directionalLight2);
camera = new THREE.PerspectiveCamera( 75, 1920 / 1080, 1, 10000 ); camera.position.x = 10; camera.position.y = 0; camera.position.z = 25;
/*
composer = new THREE.EffectComposer( renderer ); composer.addPass(new THREE.RenderPass(scene,camera));
var RGBShift = new THREE.ShaderPass(THREE.RGBShiftShader); RGBShift.uniforms[ 'amount' ].value = 0.0; composer.addPass (RGBShift);
var effect = new THREE.ShaderPass( THREE.HorizontalBlurShader ); effect.renderToScreen = true; composer.addPass( effect );
- /
// LOAD AND CREATE STRAND loader = new THREE.JSONLoader();
var strand = loader.parse(json, null); material = new THREE.MeshLambertMaterial( {color: 0x63D8FF }); mesh = new THREE.Mesh( strand.geometry, material ); mesh.rotation.y +=Math.PI / 2 + 0.3; mesh.rotation.x +=Math.PI / 6; mesh.position.x = 0; mesh.position.z = 3; mesh.position.y = 0; scene.add( mesh );
var imgTexture = THREE.ImageUtils.loadTexture( "" );
var imgMaterial = new THREE.MeshBasicMaterial( {
map : imgTexture
} );
var geometry = new THREE.PlaneBufferGeometry(1920*2, 1080*2,1,1);
var plane = new THREE.Mesh(geometry, imgMaterial);
scene.add(plane);
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = -1000;
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
function render() {
mesh.rotation.z -= 0.001; renderer.render(scene,camera);
}
(function animate() {
requestAnimationFrame( animate );
render();
})();
$(document).ready(function() { setTimeout(function(){ $('body').addClass('loaded'); }, 3000); }); </script> </body> </html> -->
<!DOCTYPE html>
My First Bootstrap Page
Resize this responsive page to see the effect!
Column 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...