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

Line 10: Line 10:
 
<cfheader name="X-XSS-Protection" value="1">
 
<cfheader name="X-XSS-Protection" value="1">
  
−
<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 rel="stylesheet" type="text/css" href="animate.css" />
−
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
+
<script src="viewportchecker.js"></script>
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- We also need jQuery -->
 +
 
  
 
<script>
 
<script>
  
−
AOS.init({
+
jQuery(document).ready(function() {
−
  duration: 1200,
+
    jQuery('.post').addClass("hidden").viewportChecker({
−
})
+
        classToAdd: 'visible animated fadeIn',
 +
        offset: 100
 +
      });
 +
});
  
 
</script>
 
</script>
  
 
<style>
 
<style>
−
      * {
+
.hidden{
−
  box-sizing: border-box;
+
    opacity:0;
 
}
 
}
−
 
+
.visible{
−
.item {
+
    opacity:1;
−
  width: 200px;
+
−
  height: 200px;
+
−
  margin: 50px auto;
+
−
  padding-top: 75px;
+
−
  background: #ccc;
+
−
  text-align: center;
+
−
  color: #FFF;
+
−
  font-size: 3em;
+
 
}
 
}
  
Line 41: Line 38:
  
 
</head>
 
</head>
−
       
+
<br>
−
<div class="item" data-aos="fade-up">1</div>
+
</br>    
−
<div class="item" data-aos="fade-down">2</div>
+
<br>
−
<div class="item" data-aos="fade-right">3</div>
+
</br>  
−
<div class="item" data-aos="fade-left">4</div>
+
<br>
−
 
+
</br>  
−
<div class="item" data-aos="zoom-in">5</div>
+
<br>
−
<div class="item" data-aos="zoom-out">6</div>
+
</br>  
−
 
+
<br>
−
<div class="item" data-aos="slide-up">7</div>
+
</br>  
−
 
+
<br>
−
<div class="item" data-aos="flip-up">8</div>
+
</br>  
−
<div class="item" data-aos="flip-down">9</div>
+
<br>
−
<div class="item" data-aos="flip-right">10</div>
+
</br>  
−
<div class="item" data-aos="flip-left">11</div>
+
<br>
 +
</br>   
 +
<br>
 +
</br>   
 +
<br>
 +
</br>   
 +
<br>
 +
</br>   
 +
<br>
 +
</br> 
 +
  <br>
 +
</br>   
 +
<br>
 +
</br>   
 +
<br>
 +
</br>   
 +
 
 +
<div class="container">
 +
    <div class="post"> test </div>
 +
    <div class="post"> test </div>
 +
    <div class="post"> test  </div>
 +
    <div class="post"> test </div>
 +
    <div class="post"> test </div>
 +
    <div class="post"> test </div>
 +
</div>
  
  

Revision as of 06:39, 26 October 2017
































test
test
test
test
test
test