Difference between revisions of "Template:Marburg"

Line 16: Line 16:
 
list-style-type:none;
 
list-style-type:none;
 
list-style-image:none;
 
list-style-image:none;
 +
line-height: unset;
 
}
 
}
 
li {
 
li {
Line 85: Line 86:
 
width: 100%;
 
width: 100%;
 
height: 80px;
 
height: 80px;
 +
line-height: 80px;
 +
font-size: 18px;
 
text-align: center;
 
text-align: center;
 
background-color:rgba(170,170,170,0.9);
 
background-color:rgba(170,170,170,0.9);
Line 90: Line 93:
 
text-align: center;
 
text-align: center;
 
z-index: 10;
 
z-index: 10;
 +
transition: height 0.5s ease-in-out, line-height 0.5s ease-in-out, font-size 0.5s ease-in-out;
 
}
 
}
−
#h_wrapper {
+
.header_wrapper {
 
display: inline-block;
 
display: inline-block;
 
height: 100%;
 
height: 100%;
 +
text-align: left;
 
}
 
}
−
 
+
.shrink {
−
#h_logo {
+
height: 60px;
 +
line-height: 60px;
 +
font-size: 16px;
 +
}
 +
.header_logo {
 
position: absolute;
 
position: absolute;
 
height: 100%;
 
height: 100%;
−
width: 167px;
 
 
color:white;
 
color:white;
 
font-weight: bold;
 
font-weight: bold;
 
font-size:32px;
 
font-size:32px;
−
line-height: 80px;
 
 
animation: logo_fadeIn 1.0s ease-in-out;
 
animation: logo_fadeIn 1.0s ease-in-out;
 +
z-index: 1;
 
}
 
}
−
#burger {
+
.burger {
 
display: none;
 
display: none;
 
position: absolute;
 
position: absolute;
−
        width: 30px;
+
width: 23px;
−
height: 30px;
+
height: 23px;
−
        top: calc(100% / 2 - 15px);
+
  top: calc(100% / 2 - 11.5px);
 
left: 15px;
 
left: 15px;
 
opacity: 0.65;
 
opacity: 0.65;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
−
background-size: cover;
+
background-size: contain;
 
background-position: center;
 
background-position: center;
−
background-image: url(https://static.igem.org/mediawiki/2018/0/0e/T--Marburg--burger.svg);
+
background-image: url(img/burger.svg);
 
cursor:pointer;
 
cursor:pointer;
 
}
 
}
−
@keyframes logo_fadeIn { from { opacity: 0; margin-left: -50px; } to { opacity: 1; margin-left: 0px; }}
 
  
 +
.menu_wrapper {
 +
opacity: 1;
 +
animation: menu_fadeIn 1s ease-in-out;
 +
}
 +
 +
@keyframes logo_fadeIn { from { opacity: 0; margin-left: -50px; } to { opacity: 1; margin-left: 0px; }}
 +
@keyframes menu_fadeIn { from { opacity: 0; } to { opacity: 1.0; } }
 
/* - - - - - - -  DROP DOWN - - - - - - - */
 
/* - - - - - - -  DROP DOWN - - - - - - - */
  
Line 129: Line 143:
 
padding: 0;
 
padding: 0;
 
height: 100%;
 
height: 100%;
−
font-size: 18px;
 
 
font-weight: bold;
 
font-weight: bold;
 
}
 
}
Line 144: Line 157:
 
float: left;
 
float: left;
 
height: 100%;
 
height: 100%;
−
line-height: 80px;
 
 
list-style-type: none;
 
list-style-type: none;
 
transition: background-color 0.2s ease-in-out;
 
transition: background-color 0.2s ease-in-out;
Line 150: Line 162:
 
.menu li a {
 
.menu li a {
 
display: block;
 
display: block;
−
color:black;
+
color:#3b3b3b;
−
        text-decoration: none;
+
  text-decoration: none;
 
padding: 0 15px 0 15px !important;
 
padding: 0 15px 0 15px !important;
 
}
 
}
Line 159: Line 171:
 
}
 
}
  
 +
.menu li:focus-within ul {
 +
visibility: visible;
 +
  max-height: 700px;
 +
opacity: 1.0;
 +
}
 
.menu li:hover ul {
 
.menu li:hover ul {
 
visibility: visible;
 
visibility: visible;
−
  max-height: 700px;
+
  max-height: 700px;
 
opacity: 1.0;
 
opacity: 1.0;
 
}
 
}
Line 273: Line 290:
 
}
 
}
  
 +
/* - - - - - - -  SCROLL - - - - - - - */
 +
.btn_scroll_top {
 +
position: fixed;
 +
font-weight: bold;
 +
color:darkgray;
 +
width: 45px;
 +
height: 45px;
 +
right: 40px;
 +
bottom: 115px;
 +
background-image: url("img/icon/scroll_up.png");
 +
background-position: center;
 +
background-size: contain;
 +
cursor:pointer;
 +
transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
 +
transition-timing-function: ease-in-out;
 +
z-index: 10;
 +
}
 +
 +
.btn_scroll_enabled {
 +
opacity: 0.5;
 +
visibility: visible;
 +
transform: translateY(10px);
 +
}
 +
.btn_scroll_enabled:hover {
 +
opacity: 0.35;
 +
transform:scale(1.05) translateY(10px);
 +
}
 +
.btn_scroll_disabled {
 +
opacity: 0;
 +
visibility: hidden;
 +
transform: translateY(-10px);
 +
}
  
 
/* - - - - - - -  FOOTER - - - - - - - */
 
/* - - - - - - -  FOOTER - - - - - - - */
Line 278: Line 327:
 
width: 100%;
 
width: 100%;
 
height: 100px;
 
height: 100px;
−
margin-bottom: -19px;
 
 
background-color:rgb(180,180,180);
 
background-color:rgb(180,180,180);
 +
margin-bottom: -19px;
 
text-align: center;
 
text-align: center;
 
}
 
}
−
 
+
.footer_wrapper {
−
#f_wrapper {
+
 
position: relative;
 
position: relative;
 +
display:inline-block;
 
   max-width: 900px;
 
   max-width: 900px;
 
height: 100px;
 
height: 100px;
−
display:inline-block;
 
−
text-align: left;
 
 
margin-bottom: -4px;
 
margin-bottom: -4px;
 +
text-align: left;
 
}
 
}
−
#f_social {
+
.footer_social {
 
float:right;
 
float:right;
 
}
 
}
Line 320: Line 368:
 
}
 
}
 
.menu >li>a{
 
.menu >li>a{
−
background-color: gray;
+
background-color: rgba(150,150,150, 0.9);
−
border-bottom: 2px solid rgb(50,50,50);
+
    line-height: 2.85em;
 
}
 
}
−
.menu>li>ul{
+
.menu>li>ul{}
−
border-bottom: 2px solid rgb(50,50,50);
+
.menu >li>a{
 +
background-color: rgba(150,150,150, 0.9);
 +
    line-height: 2.85em;
 
}
 
}
 
.menu li ul {
 
.menu li ul {
 
position: relative;
 
position: relative;
 
visibility: visible;
 
visibility: visible;
−
max-height: unset;box-shadow: none;
+
max-height: unset;
 +
box-shadow: none;
 
opacity: 1.0;
 
opacity: 1.0;
 
}
 
}
−
        .menu li:hover {
+
.menu li ul a {
 +
line-height: 2.5em;
 +
}
 +
.menu li:hover {
 
background-color: unset;
 
background-color: unset;
 
}
 
}
 
.menu li ul li a:hover {
 
.menu li ul li a:hover {
−
background-color: unset;
+
background-color:unset;
 
}
 
}
 
.menu_wrapper {
 
.menu_wrapper {
Line 342: Line 396:
 
position: absolute;
 
position: absolute;
 
left:0;
 
left:0;
−
top:60px;
+
top:40px;
−
height: calc(100vh - 60px);
+
height: calc(100vh - 40px);
 
width: 100%;
 
width: 100%;
 
overflow-y: auto;
 
overflow-y: auto;
 +
font-size:1.1em;
 +
animation: none;
 
}
 
}
−
header {
+
  header {
−
height: 60px;
+
height: 40px;
 
}
 
}
−
#h_logo {
+
.header_logo {
−
margin-left: -84px;
+
transform: translateX(-50%);
−
line-height: 60px;
+
font-size:27px;
 +
line-height: 40px;
 
}
 
}
−
#canvas {
+
.header_logo {
−
display:none;
+
−
}
+
−
#h_logo {
+
 
animation: none;
 
animation: none;
 
top:0;
 
top:0;
 
left:50%;
 
left:50%;
 
}
 
}
−
#h_wrapper {
+
.header_wrapper {
 
width: 100%;
 
width: 100%;
−
}
 
−
article {
 
−
margin-top: 60px;
 
 
}
 
}
 
}
 
}
−
 
−
 
 
/* - - - - - - - - - - - - - - - */
 
/* - - - - - - - - - - - - - - - */
−
 
  
 
</style>
 
</style>
Line 379: Line 427:
 
// MOBILE
 
// MOBILE
 
var mobile = false;
 
var mobile = false;
−
var burger = $("#burger");
+
var burger = $(".burger");
 +
var header = $("header");
 
var menu = $(".menu_wrapper");
 
var menu = $(".menu_wrapper");
  
Line 392: Line 441:
 
burger.show();
 
burger.show();
 
mobile = true;
 
mobile = true;
 +
ResetParallax();
 +
$(header).removeClass("shrink");
 
if(menu.is(":visible")) menu.hide();
 
if(menu.is(":visible")) menu.hide();
 
} else {
 
} else {
Line 401: Line 452:
 
});
 
});
 
 
 +
$(window).resize(function(){
 +
    if(!mobile){
 +
    Update($(document).scrollTop());
 +
    }
 +
});
 +
 
burger.click(function(){
 
burger.click(function(){
 
if(menu.is(":visible")){
 
if(menu.is(":visible")){
Line 411: Line 468:
 
});
 
});
  
−
// ORDER FIX
+
// SCROLL STUFF
−
$("footer").insertAfter("main");
+
var btn_scroll = $("#btn_scroll_top");
 +
var btn_scroll_visible = false;
 +
$(btn_scroll).click(function(e){
 +
    $('html, body').stop().animate({ scrollTop: 0 }, 500);
 +
    e.preventDefault();
 +
});
  
−
// BACKGROUND
 
−
/*var canvas = document.getElementById("canvas");
 
−
var c = canvas.getContext("2d");
 
−
var time = Date.now(), last = time, deltaTime = 0;
 
  
−
canvas.width = document.body.clientWidth;
+
var isScrolling = false;
−
canvas.height = document.body.clientHeight;
+
var lastY = -1;
  
−
function loop(){
+
$(window).scroll(function() { isScrolling = true; });
−
requestAnimationFrame(loop);
+
 
−
canvas.width = document.body.clientWidth;
+
window.requestAnimationFrame(Render);
−
canvas.height = document.body.clientHeight;
+
function Render(){
−
c.clearRect(0, 0, c.width, c.height);
+
    var y = $(document).scrollTop();
−
update();
+
    if(lastY != y && isScrolling){
−
time = Date.now();
+
        lastY = y;
−
deltaTime = (time - last) * 0.01;
+
        isScrolling = false;
−
last = time;
+
        Update(lastY);
 +
    }
 +
    window.requestAnimationFrame(Render);
 
}
 
}
 +
/*for(var i = 0; i < sections.length; i++){
 +
var section = sections[i];
 +
section.hole.element = $("#hole_"+i);
 +
for(var j = 0; j < 5; j++){
 +
var layer = $("#layer_"+i+"_"+j);
 +
layer.css({'background-image':'url('+'img/layers/1/'+(4-j)+'.png)'});
 +
section.hole.layers.push({element:layer});
 +
}
 +
}*/
 +
// init cutout elements
 +
var cutouts = [];
  
 +
$(".cutout").each(function(index) {
 +
  var cutout = {element:$(this), inside:false, dir:$(this).attr('dir'), aspect:$(this).attr('aspect'), layers:[], offset:$(this).attr('offset')};
 +
  $(this).children('.layer').each(function(i) {
 +
  $(this).css({'background-image':'url('+'img/layers/'+cutout.dir+'/'+(i)+'.png)'});
 +
    cutout.layers.push({element:$(this)});
 +
});
 +
cutout.element.css({"padding-bottom":(cutout.aspect*100)+"%"});
 +
cutouts.push(cutout);
 +
});
  
−
var circles = [];
+
// header state
 +
var shrinkHeader = true;
  
−
for(var i = 0; i < 20; i++){
+
// parallax backgrounds
−
var circle = {};
+
//var logoWrapper = $(".logo_wrapper");
−
circle.x = rnd(0, canvas.width);
+
 
−
circle.y = rnd(0, canvas.height);
+
function ResetParallax(){
−
circle.r = rnd(10, 100);
+
for(var i = 0; i < cutouts.length; i++){
−
circle.offx = rnd(2,25) * (rnd(0,2) == 1 ? -1 : 1)*0.1;
+
var cutout = cutouts[i];
−
circle.offy = rnd(2,25) * (rnd(0,2) == 1 ? -1 : 1)*0.1;
+
cutout.element.find('img').removeClass("select");
−
circle.offp = rnd(0, 100);
+
for(var j = 0; j < cutout.layers.length-1; j++){
−
circle.color = "rgb("+rnd(0,255)+", " + rnd(0,255)+", " + rnd(0,255) + ")";
+
var layer = cutout.layers[j];
−
circles.push(circle);
+
layer.element.css({"transform":"translateY(0px)"});
 +
}
 +
}
 
}
 
}
  
−
function update(){
+
function Update(y){
−
for(var i = 0; i < circles.length; i++){
+
if(lastY > 400){
−
var s = circles[i];
+
if(!btn_scroll_visible){
−
s.x += s.offx * deltaTime;
+
btn_scroll.removeClass('btn_scroll_disabled').addClass('btn_scroll_enabled');
−
s.y += s.offy * deltaTime;
+
btn_scroll_visible = true;
−
if(s.x < 0) {
+
−
s.x = 0;
+
−
s.offx *= -1;
+
 
}
 
}
−
if(s.x > canvas.width){
+
} else {
−
s.x = canvas.width;
+
if(btn_scroll_visible){
−
s.offx *= -1;
+
btn_scroll.removeClass('btn_scroll_enabled').addClass('btn_scroll_disabled');
−
}
+
btn_scroll_visible = false;
−
if(s.y < 0) {
+
−
s.y = 0;
+
−
s.offy *= -1;
+
−
}
+
−
if(s.y > canvas.height){
+
−
s.y = canvas.height;
+
−
s.offy *= -1;
+
 
}
 
}
 +
}
  
−
drawCircle(s.x, s.y, s.r + (1+Math.sin(s.offp+time*0.001))*10, "rgba(50,50,50,0.25)");
+
if(!mobile && lastY < 612){
 +
//logoWrapper.css({'background-position':'center '+y*0.2+'px'});
 
}
 
}
−
}
 
  
−
 
+
if(y > 0 && !mobile){
−
function drawCircle(x, y, r, color){
+
    if(shrinkHeader){
−
c.beginPath();
+
shrinkHeader = false;
−
c.arc(x, y, r,0,2*Math.PI);
+
    $(header).addClass("shrink");
−
c.fillStyle = color;
+
}
−
//c.fill();
+
}
−
c.strokeStyle = color;
+
else {
−
c.stroke();
+
shrinkHeader = true;
 +
$(header).removeClass("shrink");
 +
}
 +
var mid = y + window.innerHeight / 2;
 +
for(var i = 0; i < cutouts.length; i++){
 +
var cutout = cutouts[i];
 +
if(isVisible(cutout.element)){
 +
var pos = cutout.element.position();
 +
if(mid > pos.top && mid < (pos.top + cutout.element.outerHeight())){
 +
if(!cutout.inside){
 +
cutout.element.find('img').addClass("select");
 +
cutout.inside = true;
 +
}
 +
} else {
 +
if(cutout.inside){
 +
cutout.element.find('img').removeClass("select");
 +
cutout.inside = false;
 +
}
 +
}
 +
if(!mobile){
 +
for(var j = 0; j < cutout.layers.length-1; j++){
 +
var layer = cutout.layers[j];
 +
var scale = layer.element.outerHeight() / 951.5;
 +
var strength = 1-((j-1) / 5.0);
 +
var _y = ((y+cutout.offset*scale)*0.2) * strength;
 +
layer.element.css({"transform":"translateY("+_y+"px)"});
 +
}
 +
}
 +
}
 +
}
 
}
 
}
  
−
function rnd(min, max) {
+
function isVisible(e){
−
    return Math.floor(Math.random() * (max - min + 1) ) + min;
+
var etop = e.offset().top;
 +
var ebottom = etop + e.outerHeight();
 +
var vbottom = lastY + $(window).height();
 +
return ebottom > lastY && etop < vbottom;
 
}
 
}
  
−
loop();*/
 
 
});
 
});
 
</script>
 
</script>
−
<canvas id="canvas"></canvas>
 
 
<header>
 
<header>
−
<div id="h_wrapper">
+
<div class="header_wrapper">
−
<div id="h_logo"><span style="color:black">VIBRI</span><span style="color:rgb(155,255,0)">GENS</span></div>
+
<a href="#" class="header_logo">
−
<div id="burger"></div>
+
<span style="color:#3b3b3b">VIBRI</span><span style="color:rgb(155,255,0)">GENS</span>
−
<div class="menu_wrapper">
+
</a>
−
<ul class="menu" id="menu">
+
<div class="burger"></div>
 +
<div class="menu_wrapper" role="navigation" aria-label="Main Menu">
 +
<ul class="menu">
 
<li><a href="#">Team ▾</a>
 
<li><a href="#">Team ▾</a>
 
<ul>
 
<ul>
Line 547: Line 653:
  
 
</header>
 
</header>
−
<footer>
+
<div class="btn_scroll_top btn_scroll_disabled"></div>
−
<div id="f_wrapper">
+
−
<div id="f_social">
+
−
<a href="https://twitter.com/iGEMmarburg2018" target="_blank"><img src="https://static.igem.org/mediawiki/2018/2/20/T--Marburg--icon_twitter.png"></a>
+
−
<a href="https://www.facebook.com/iGEMMarburg2018/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/6/6d/T--Marburg--icon_facebook.png"></a>
+
−
<a href="https://www.instagram.com/igem.marburg.2018/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/7/79/T--Marburg--icon_instagram.png"></a>
+
−
</div>
+
−
</div>
+
−
</footer>
+
 
<main>
 
<main>
  
 
 
 
</html>
 
</html>

Revision as of 00:57, 4 October 2018