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

Line 15: Line 15:
 
<script>
 
<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");     }   });  });
+
$(function() {
 +
   var $elements = $('.animateBlock.notAnimated'); //contains all elements of nonAnimated class
 +
   var $window = $(window);
 +
  $window.on('scroll', function(e) {
 +
    $elements.each(function(i, elem) { //loop through each element
 +
       if ($(this).hasClass('animated')) // check if already animated
 +
        return;
 +
      animateMe($(this));
 +
    });
 +
  });
 +
});
 +
 
 +
function animateMe(elem) {
 +
  var winTop = $(window).scrollTop(); // calculate distance from top of window
 +
  var winBottom = winTop + $(window).height();
 +
  var elemTop = $(elem).offset().top; // element distance from top of page
 +
  var elemBottom = elemTop + $(elem).height();
 +
   if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
 +
    // exchange classes if element visible
 +
    $(elem).removeClass('notAnimated').addClass('animated');
 +
   }
 +
}
  
  
Line 24: Line 45:
 
<style>
 
<style>
 
* {
 
* {
−
   -moz-box-sizing: border-box;
+
   margin: 0;
−
   -webkit-box-sizing: border-box;
+
   padding: 0;
−
  box-sizing: border-box;
+
 
}
 
}
  
−
section {
+
html {
−
   background: #eee;
+
  overflow-y: scroll;
−
   max-width: 600px;
+
}
 +
 
 +
body {
 +
   background: #f0f0f0;
 +
  color: #000;
 +
}
 +
 
 +
img {
 +
  border: 0;
 +
   max-width: 100%;
 +
}
 +
 
 +
#wrapper {
 +
  display: block;
 +
  width: 750px;
 
   margin: 0 auto;
 
   margin: 0 auto;
−
   padding: 20px;
+
   padding-top: 30px;
−
   overflow: hidden;
+
   padding-bottom: 45px;
 
}
 
}
  
−
.module {
+
.rightAlign {
−
   width: 48%;
+
   float: right;
−
  min-height: 200px;
+
}
−
  background: white;
+
 
−
  position: relative;
+
.leftAlign {
 
   float: left;
 
   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;
+
.animateBlock {
 +
  margin-top: 20px;
 +
  display: inline-block;
 +
  opacity: 0;
 +
  filter: alpha(opacity=0);
 +
   position: relative;
 +
  -webkit-transition: all .55s ease-in;
 +
  -moz-transition: all .55s ease-in;
 +
  -ms-transition: all .55s ease-in;
 +
  -o-transition: all .55s ease-in;
 +
  transition: all .55s ease-in;
 
}
 
}
  
−
body {
+
.animateBlock.left {
−
   background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blurry-blue.jpg);
+
   left: -20%;
−
  background-size: cover;
+
−
  padding: 30px;
+
 
}
 
}
  
−
.come-in {
+
.animateBlock.right {
−
   transform: translateY(150px);
+
   right: -20%;
−
  animation: come-in 0.8s ease forwards;
+
 
}
 
}
  
−
.come-in:nth-child(odd) {
+
.left.animated {
−
   animation-duration: 0.6s;
+
   left: 0%;
 +
  opacity: 1;
 +
  filter: alpha(opacity=100);
 
}
 
}
  
−
.already-visible {
+
.right.animated {
−
   transform: translateY(0);
+
   right: 0%;
−
   animation: none;
+
   opacity: 1;
 +
  filter: alpha(opacity=100);
 
}
 
}
  
−
@keyframes come-in {
+
#Txt {
−
   to {
+
   width: 300px;
−
    transform: translateY(0);
+
  padding-left: 15px;
−
   }
+
  padding-top: 12px;
 +
  text-align: center;
 +
}
 +
 
 +
.clearfix:after {
 +
  content: ".";
 +
  display: block;
 +
  clear: both;
 +
  visibility: hidden;
 +
  line-height: 0;
 +
   height: 0;
 +
}
 +
 
 +
.clearfix {
 +
  display: inline-block;
 +
}
 +
 
 +
html[xmlns] .clearfix {
 +
  display: block;
 +
}
 +
 
 +
* html .clearfix {
 +
  height: 1%;
 
}
 
}
  
Line 84: Line 146:
 
<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>
+
<div id="wrapper">
 +
  <img src="http://placehold.it/750x300" />
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus, augue ac maximus auctor, dui elit ornare libero, at maximus sem mauris lacinia eros. Pellentesque turpis dolor, aliquet eu eros vitae, congue volutpat orci. Nullam vel vulputate
 +
    odio. Sed vestibulum felis vel convallis consequat. Cras a lacinia ante.
 +
  </p>
 +
  <div class="notAnimated animateBlock leftAlign left">
 +
    <img src="http://placehold.it/382x152" alt="apple devices">
 +
  </div>
 +
  <div id="Txt" class="notAnimated animateBlock rightAlign right">
 +
    <h3>Lorem ipsum</h3>
 +
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus, augue ac maximus auctor, dui elit ornare libero, at maximus sem mauris lacinia eros. Pellentesque turpis dolor, aliquet eu eros vitae, congue volutpat orci. Nullam vel vulputate
 +
      odio. Sed vestibulum felis vel convallis consequat. Cras a lacinia ante.
 +
    </p>
 +
  </div>
 +
  <div class="notAnimated animateBlock right">
 +
    <img src="http://placehold.it/750x400" alt="white iphone flat ui">
 +
  </div>
 +
</div>
 +
<!-- wrapper -->
  
 
</body>
 
</body>

Revision as of 05:58, 26 October 2017


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus, augue ac maximus auctor, dui elit ornare libero, at maximus sem mauris lacinia eros. Pellentesque turpis dolor, aliquet eu eros vitae, congue volutpat orci. Nullam vel vulputate odio. Sed vestibulum felis vel convallis consequat. Cras a lacinia ante.

apple devices

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus, augue ac maximus auctor, dui elit ornare libero, at maximus sem mauris lacinia eros. Pellentesque turpis dolor, aliquet eu eros vitae, congue volutpat orci. Nullam vel vulputate odio. Sed vestibulum felis vel convallis consequat. Cras a lacinia ante.

white iphone flat ui