Difference between revisions of "Team:Marburg"

Line 3: Line 3:
 
<html>
 
<html>
 
   <style>
 
   <style>
 +
.glitch {
 +
  position: relative;
 +
  color: white;
 +
  font-size: 4em;
 +
  letter-spacing: .5em;
 +
  /* Animation provies a slight random skew. Check bottom of doc
 +
  for more information on how to random skew. */
 +
  animation: glitch-skew 1s infinite linear alternate-reverse;
 +
}
 +
.glitch::before {
 +
  content: attr(data-text);
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  left: 2px;
 +
  text-shadow: -2px 0 #ff00c1;
 +
  /* Creates an initial clip for our glitch. This works in
 +
  a typical top,right,bottom,left fashion and creates a mask
 +
  to only show a certain part of the glitch at a time. */
 +
  clip: rect(44px, 450px, 56px, 0);
 +
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
 +
  with an alternating animation to keep things fresh. */
 +
  animation: glitch-anim 5s infinite linear alternate-reverse;
 +
}
 +
.glitch::after {
 +
  content: attr(data-text);
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  left: -2px;
 +
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
 +
  animation: glitch-anim2 1s infinite linear alternate-reverse;
 +
}
 +
 +
/* Creates an animation with 20 steaps. For each step, it calculates
 +
a percentage for the specific step. It then generates a random clip
 +
box to be used for the random glitch effect. Also adds a very subtle
 +
skew to change the 'thickness' of the glitch.*/
 +
@keyframes glitch-anim {
 +
  0% {
 +
    clip: rect(43px, 9999px, 85px, 0);
 +
    transform: skew(0.57deg);
 +
  }
 +
  5% {
 +
    clip: rect(77px, 9999px, 66px, 0);
 +
    transform: skew(0.15deg);
 +
  }
 +
  10% {
 +
    clip: rect(47px, 9999px, 42px, 0);
 +
    transform: skew(0.88deg);
 +
  }
 +
  15% {
 +
    clip: rect(91px, 9999px, 73px, 0);
 +
    transform: skew(0.3deg);
 +
  }
 +
  20% {
 +
    clip: rect(72px, 9999px, 52px, 0);
 +
    transform: skew(0.46deg);
 +
  }
 +
  25% {
 +
    clip: rect(7px, 9999px, 90px, 0);
 +
    transform: skew(0.11deg);
 +
  }
 +
  30% {
 +
    clip: rect(13px, 9999px, 58px, 0);
 +
    transform: skew(0.11deg);
 +
  }
 +
  35% {
 +
    clip: rect(36px, 9999px, 19px, 0);
 +
    transform: skew(0.57deg);
 +
  }
 +
  40% {
 +
    clip: rect(47px, 9999px, 25px, 0);
 +
    transform: skew(0.92deg);
 +
  }
 +
  45% {
 +
    clip: rect(40px, 9999px, 47px, 0);
 +
    transform: skew(0.39deg);
 +
  }
 +
  50% {
 +
    clip: rect(14px, 9999px, 72px, 0);
 +
    transform: skew(0.94deg);
 +
  }
 +
  55% {
 +
    clip: rect(27px, 9999px, 13px, 0);
 +
    transform: skew(0.5deg);
 +
  }
 +
  60% {
 +
    clip: rect(96px, 9999px, 71px, 0);
 +
    transform: skew(0.83deg);
 +
  }
 +
  65% {
 +
    clip: rect(67px, 9999px, 39px, 0);
 +
    transform: skew(0.24deg);
 +
  }
 +
  70% {
 +
    clip: rect(8px, 9999px, 22px, 0);
 +
    transform: skew(0.52deg);
 +
  }
 +
  75% {
 +
    clip: rect(83px, 9999px, 41px, 0);
 +
    transform: skew(0.6deg);
 +
  }
 +
  80% {
 +
    clip: rect(28px, 9999px, 92px, 0);
 +
    transform: skew(0.89deg);
 +
  }
 +
  85% {
 +
    clip: rect(29px, 9999px, 23px, 0);
 +
    transform: skew(0.7deg);
 +
  }
 +
  90% {
 +
    clip: rect(90px, 9999px, 26px, 0);
 +
    transform: skew(0.75deg);
 +
  }
 +
  95% {
 +
    clip: rect(73px, 9999px, 35px, 0);
 +
    transform: skew(0.29deg);
 +
  }
 +
  100% {
 +
    clip: rect(74px, 9999px, 39px, 0);
 +
    transform: skew(1deg);
 +
  }
 +
}
 +
@keyframes glitch-anim2 {
 +
  0% {
 +
    clip: rect(98px, 9999px, 61px, 0);
 +
    transform: skew(0.63deg);
 +
  }
 +
  5% {
 +
    clip: rect(78px, 9999px, 5px, 0);
 +
    transform: skew(0.78deg);
 +
  }
 +
  10% {
 +
    clip: rect(67px, 9999px, 67px, 0);
 +
    transform: skew(0.19deg);
 +
  }
 +
  15% {
 +
    clip: rect(61px, 9999px, 86px, 0);
 +
    transform: skew(0.76deg);
 +
  }
 +
  20% {
 +
    clip: rect(70px, 9999px, 12px, 0);
 +
    transform: skew(0.22deg);
 +
  }
 +
  25% {
 +
    clip: rect(14px, 9999px, 36px, 0);
 +
    transform: skew(0.83deg);
 +
  }
 +
  30% {
 +
    clip: rect(32px, 9999px, 99px, 0);
 +
    transform: skew(0.96deg);
 +
  }
 +
  35% {
 +
    clip: rect(58px, 9999px, 60px, 0);
 +
    transform: skew(0.39deg);
 +
  }
 +
  40% {
 +
    clip: rect(47px, 9999px, 41px, 0);
 +
    transform: skew(0.45deg);
 +
  }
 +
  45% {
 +
    clip: rect(40px, 9999px, 8px, 0);
 +
    transform: skew(0.76deg);
 +
  }
 +
  50% {
 +
    clip: rect(60px, 9999px, 62px, 0);
 +
    transform: skew(0.47deg);
 +
  }
 +
  55% {
 +
    clip: rect(86px, 9999px, 86px, 0);
 +
    transform: skew(0.1deg);
 +
  }
 +
  60% {
 +
    clip: rect(98px, 9999px, 34px, 0);
 +
    transform: skew(0.2deg);
 +
  }
 +
  65% {
 +
    clip: rect(38px, 9999px, 31px, 0);
 +
    transform: skew(0.66deg);
 +
  }
 +
  70% {
 +
    clip: rect(5px, 9999px, 1px, 0);
 +
    transform: skew(0.22deg);
 +
  }
 +
  75% {
 +
    clip: rect(26px, 9999px, 45px, 0);
 +
    transform: skew(0.04deg);
 +
  }
 +
  80% {
 +
    clip: rect(1px, 9999px, 56px, 0);
 +
    transform: skew(0.45deg);
 +
  }
 +
  85% {
 +
    clip: rect(51px, 9999px, 31px, 0);
 +
    transform: skew(0.7deg);
 +
  }
 +
  90% {
 +
    clip: rect(30px, 9999px, 6px, 0);
 +
    transform: skew(0.95deg);
 +
  }
 +
  95% {
 +
    clip: rect(57px, 9999px, 97px, 0);
 +
    transform: skew(0.01deg);
 +
  }
 +
  100% {
 +
    clip: rect(80px, 9999px, 54px, 0);
 +
    transform: skew(0.97deg);
 +
  }
 +
}
 +
@keyframes glitch-skew {
 +
  0% {
 +
    transform: skew(-4deg);
 +
  }
 +
  10% {
 +
    transform: skew(4deg);
 +
  }
 +
  20% {
 +
    transform: skew(0deg);
 +
  }
 +
  30% {
 +
    transform: skew(-4deg);
 +
  }
 +
  40% {
 +
    transform: skew(4deg);
 +
  }
 +
  50% {
 +
    transform: skew(3deg);
 +
  }
 +
  60% {
 +
    transform: skew(0deg);
 +
  }
 +
  70% {
 +
    transform: skew(5deg);
 +
  }
 +
  80% {
 +
    transform: skew(1deg);
 +
  }
 +
  90% {
 +
    transform: skew(5deg);
 +
  }
 +
  100% {
 +
    transform: skew(3deg);
 +
  }
 +
}
 +
 
     .as_hero {
 
     .as_hero {
 
       position: relative;
 
       position: relative;
Line 264: Line 514:
 
               <div class="column"></div>
 
               <div class="column"></div>
 
               <div class="column" style="color: white; display: flex; align-items: center;">
 
               <div class="column" style="color: white; display: flex; align-items: center;">
−
                 <div>
+
                 <div class="glitch">
 
                   <p style="font-size: 4em; line-height: 1em;">Fastest.</p>
 
                   <p style="font-size: 4em; line-height: 1em;">Fastest.</p>
 
                   <p style="font-size: 4em; line-height: 1em;">Phototrophic.</p>
 
                   <p style="font-size: 4em; line-height: 1em;">Phototrophic.</p>

Revision as of 16:23, 4 September 2019

Fastest.

Phototrophic.

Organism.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.