Difference between revisions of "Team:Penn/Overview"

Line 3: Line 3:
 
<body>
 
<body>
 
<style type="text/css">
 
<style type="text/css">
−
@import "compass/css3";
+
@mixin center(){
−
 
+
   -webkit-transform: translate(-50%,-50%);
−
h1 {
+
      -ms-transform: translate(-50%,-50%);
−
   font-size: 4rem;
+
          transform: translate(-50%,-50%);
−
  font-family: 'Open Sans';
+
    left:50%;
−
  font-weight: 900;
+
    top:50%;
−
  text-align: center;
+
−
  margin-top: 3rem;
+
−
  text-transform: uppercase;
+
−
 
+
−
  animation: background-move 10s infinite;
+
−
 
+
−
  background: url(http://blog.spoongraphics.co.uk/wp-content/uploads/2012/retro-pattern/triangle-pattern.jpg);
+
−
  -webkit-background-clip: text;
+
−
  -webkit-text-fill-color: transparent;
+
 
}
 
}
  
−
@keyframes background-move {
 
  
−
  0% {
+
@import url(http://fonts.googleapis.com/css?family=Raleway:400,,800,900);
−
    background-position: 0% 0%;
+
html{
−
  }
+
   width:100%;
−
 
+
   height: 100%;
−
  25% {
+
−
    background-position: 5% 10%;
+
−
   }
+
−
 
+
−
  50% {
+
−
    background-position: 15% 15%;
+
−
   }
+
−
 
+
−
  75% {
+
−
    background-position: 10% 5%;
+
−
  }
+
−
 
+
−
  100% {
+
−
    background-position: 0% 0%;
+
−
  }
+
 
}
 
}
−
 
+
body{
−
@font-face {
+
  background: -webkit-linear-gradient(rgb(235, 236, 231), rgb(255, 255, 255));
−
   font-family: 'Open Sans';
+
  background: linear-gradient(rgb(235, 236, 231), rgb(255, 255, 255));
−
   font-style: normal;
+
  margin: 0;
−
   font-weight: 400;
+
  width: 100%;
−
   src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
+
  height: 100%;
 +
   font-family: 'Raleway', sans-serif;
 +
}
 +
.container{
 +
  position:absolute;
 +
  @include center();
 +
}
 +
.title{
 +
   font-weight: 800;
 +
  color: transparent;
 +
   font-size:120px;
 +
   background: url("http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
 +
  background-position: 40% 50%;
 +
  -webkit-background-clip: text;
 +
  position:relative;
 +
  text-align:center;
 +
  line-height:90px;
 +
  letter-spacing: -8px;
 +
}
 +
.subtitle{
 +
  display: block;
 +
  text-align: center;
 +
  text-transform: uppercase;
 +
  padding-top:10px;
 
}
 
}
 
</style>
 
</style>
−
<h1>Overview</h1>
+
<script type="text/javascript">
 +
$(document).ready(function(){
 +
  var mouseX, mouseY;
 +
  var ww = $( window ).width();
 +
  var wh = $( window ).height();
 +
  var traX, traY;
 +
  $(document).mousemove(function(e){
 +
    mouseX = e.pageX;
 +
    mouseY = e.pageY;
 +
    traX = ((4 * mouseX) / 570) + 40;
 +
    traY = ((4 * mouseY) / 570) + 50;
 +
    console.log(traX);
 +
    $(".title").css({"background-position": traX + "%" + traY + "%"});
 +
  });
 +
});
 +
 
 +
</script>
 
</body>
 
</body>
 +
<!-- If you don't see it u probably are using a browser not based on webkit, so leave IE and grab anything else (Y) -->
 +
<!-- UPDATE: works in Chrome & Safari, not Firefox. To solve that you could use an SVG insted of pure text. -->
 +
 +
<div class="container">
 +
  <div class="title">OVERVIEW</div>
 +
  <div class="subtitle"> language of light: A biological analog to the optocoupler </div>
 +
</div>
 
</html>
 
</html>

Revision as of 01:31, 29 August 2015

OVERVIEW
language of light: A biological analog to the optocoupler