Difference between revisions of "Team:William and Mary/Results"

Line 12: Line 12:
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
<link href="https://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet">
 +
 +
<script>
 +
 +
(function($) {  /**  * Copyright 2012, Digital Fusion  * Licensed under the MIT license.  * http://teamdf.com/jquery-plugins/license/  *  * @author Sam Sehnert  * @desc A small plugin that checks whether elements are within  *    the user visible viewport of a web browser.  *    only accounts for vertical position, not horizontal.  */  $.fn.visible = function(partial) {          var $t            = $(this),          $w            = $(window),          viewTop      = $w.scrollTop(),          viewBottom    = viewTop + $w.height(),          _top          = $t.offset().top,          _bottom      = _top + $t.height(),          compareTop    = partial === true ? _bottom : _top,          compareBottom = partial === true ? _top : _bottom;        return ((compareBottom <= viewBottom) && (compareTop >= viewTop));  };    })(jQuery);var win = $(window);var allMods = $(".module");allMods.each(function(i, el) {  var el = $(el);  if (el.visible(true)) {    el.addClass("already-visible");  } });win.scroll(function(event) {    allMods.each(function(i, el) {    var el = $(el);    if (el.visible(true)) {      el.addClass("come-in");    }  });  });
 +
 +
 +
</script>
 +
 +
  
 
<style>
 
<style>
−
      body {
+
* {
−
        font-family: 'News Cycle', sans-serif;
+
  -moz-box-sizing: border-box;
−
        font-size: 13px;
+
  -webkit-box-sizing: border-box;
−
      }
+
  box-sizing: border-box;
 +
}
 +
 
 +
section {
 +
  background: #eee;
 +
  max-width: 600px;
 +
  margin: 0 auto;
 +
  padding: 20px;
 +
  overflow: hidden;
 +
}
 +
 
 +
.module {
 +
  width: 48%;
 +
  min-height: 200px;
 +
  background: white;
 +
  position: relative;
 +
  float: left;
 +
  padding: 20px;
 +
  margin-right: 4%;
 +
  margin-bottom: 4%;
 +
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 +
}
 +
.module:nth-child(even) {
 +
  margin-right: 0;
 +
}
 +
 
 +
body {
 +
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blurry-blue.jpg);
 +
  background-size: cover;
 +
  padding: 30px;
 +
}
 +
 
 +
.come-in {
 +
  transform: translateY(150px);
 +
  animation: come-in 0.8s ease forwards;
 +
}
 +
 
 +
.come-in:nth-child(odd) {
 +
  animation-duration: 0.6s;
 +
}
 +
 
 +
.already-visible {
 +
  transform: translateY(0);
 +
  animation: none;
 +
}
 +
 
 +
@keyframes come-in {
 +
  to {
 +
    transform: translateY(0);
 +
  }
 +
}
  
 
</style>
 
</style>
Line 25: Line 84:
 
<body>
 
<body>
  
−
 
+
<section>    <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div></section>
  
 
</body>
 
</body>

Revision as of 05:56, 26 October 2017