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

Line 15: Line 15:
 
<script>
 
<script>
  
−
var $animation_elements = $('.animation-element');
+
function showImages(el) {
−
var $window = $(window);
+
    var windowHeight = jQuery( window ).height();
 +
    $(el).each(function(){
 +
        var thisPos = $(this).offset().top;
  
−
function check_if_in_view() {
+
        var topOfWindow = $(window).scrollTop();
−
  var window_height = $window.height();
+
        if (topOfWindow + windowHeight - 200 > thisPos ) {
−
  var window_top_position = $window.scrollTop();
+
            $(this).addClass("fadeIn");
−
  var window_bottom_position = (window_top_position + window_height);
+
        }
−
 
+
     });
−
  $.each($animation_elements, function() {
+
−
    var $element = $(this);
+
−
    var element_height = $element.outerHeight();
+
−
    var element_top_position = $element.offset().top;
+
−
    var element_bottom_position = (element_top_position + element_height);
+
−
 
+
−
    //check to see if this current container is within viewport
+
−
    if ((element_bottom_position >= window_top_position) &&
+
−
      (element_top_position <= window_bottom_position)) {
+
−
      $element.addClass('in-view');
+
−
    } else {
+
−
      $element.removeClass('in-view');
+
−
     }
+
−
  });
+
 
}
 
}
  
−
$window.on('scroll resize', check_if_in_view);
+
// if the image in the window of browser when the page is loaded, show that image
−
$window.trigger('scroll');
+
$(document).ready(function(){
 +
    showImages('.star');
 +
});
  
 +
// if the image in the window of browser when scrolling the page, show that image
 +
$(wi
  
 
</script>
 
</script>
Line 49: Line 41:
 
<style>
 
<style>
  
−
body {
+
.star {
−
  font-size: 16px;
+
    visibility: hidden;
−
  font-family: 'Open Sans', sans-serif;
+
−
  font-weight: 400;
+
−
  background: #efefef;
+
−
  line-height: 170%;
+
 
}
 
}
  
−
strong,
+
.fadeIn {
−
b {
+
    -webkit-animation: animat_show 0.8s;
−
  font-weight: 600
+
    animation: animat_show 0.8s;
 +
    visibility: visible !important;
 
}
 
}
  
−
h1,
+
@-webkit-keyframes animat_show{
−
h2,
+
    0%{opacity:0}
−
h3,
+
    100%{opacity:1}
−
h4,
+
−
h5,
+
−
h6 {
+
−
  font-weight: 300;
+
−
  line-height: 150%;
+
−
}
+
−
 
+
−
i.fa {
+
−
  color: #333;
+
−
}
+
−
 
+
−
*,
+
−
*:before,
+
−
*:after {
+
−
  box-sizing: border-box;
+
−
  -moz-box-sizing: border-box;
+
−
  -webkit-box-sizing: border-box;
+
−
}
+
−
/*clearfixes*/
+
−
 
+
−
.cf:before,
+
−
.cf:after {
+
−
  content: " ";
+
−
  display: table;
+
−
}
+
−
 
+
−
.cf:after {
+
−
  clear: both;
+
−
}
+
−
 
+
−
.main-container {
+
−
  background: #fff;
+
−
  max-width: 1000px;
+
−
  margin: 25px 25px auto;
+
−
  position: relative;
+
−
}
+
−
 
+
−
.container {
+
−
  position: relative;
+
−
  padding: 25px;
+
−
}
+
−
 
+
−
.container:last-of-type {
+
−
  padding-top: 0px;
+
−
}
+
−
/*animation element*/
+
−
 
+
−
.animation-element {
+
−
  position: relative;
+
−
  width: 30%;
+
−
  margin: 0% 1.33 2.66% 1.33%;
+
−
  float: left;
+
−
}
+
−
/*3 grid layout*/
+
−
 
+
−
.animation-element:nth-of-type(3n-2) {
+
−
  width: 31.5%;
+
−
  margin: 0% 1.375% 2.75% 0%;
+
−
  clear: left;
+
−
}
+
−
 
+
−
.animation-element:nth-of-type(3n-1) {
+
−
  width: 31.5%;
+
−
  margin: 0% 1.375% 2.75% 1.375%;
+
−
}
+
−
 
+
−
.animation-element:nth-of-type(3n-0) {
+
−
  width: 31.5%;
+
−
  margin: 0% 0% 2.75% 1.375%;
+
−
  clear: right;
+
−
}
+
−
/*bounce up animation for the subject*/
+
−
 
+
−
.bounce-up .subject {
+
−
  opacity: 0;
+
−
  -moz-transition: all 700ms ease-out;
+
−
  -webkit-transition: all 700ms ease-out;
+
−
  -o-transition: all 700ms ease-out;
+
−
  transition: all 700ms ease-out;
+
−
  -moz-transform: translate3d(0px, 200px, 0px);
+
−
  -webkit-transform: translate3d(0px, 200px, 0px);
+
−
  -o-transform: translate(0px, 200px);
+
−
  -ms-transform: translate(0px, 200px);
+
−
  transform: translate3d(0px, 200, 0px);
+
−
  -webkit-backface-visibility: hidden;
+
−
  -moz-backface-visibility: hidden;
+
−
  backface-visibility: hidden;
+
−
}
+
−
 
+
−
.bounce-up.in-view .subject {
+
−
  opacity: 1;
+
−
  -moz-transform: translate3d(0px, 0px, 0px);
+
−
  -webkit-transform: translate3d(0px, 0px, 0px);
+
−
  -o-transform: translate(0px, 0px);
+
−
  -ms-transform: translate(0px, 0px);
+
−
  transform: translate3d(0px, 0px, 0px);
+
−
}
+
−
 
+
−
.subject {
+
−
  float: left;
+
−
  width: 100%;
+
−
  margin: 0% 1.33% 2.66% 1.33%;
+
−
  background: #F5F5F5;
+
−
  padding: 15px;
+
−
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
+
−
  border: solid 1px #EAEAEA;
+
−
}
+
−
 
+
−
.subject:hover,
+
−
.subject:active {
+
−
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
+
−
}
+
−
 
+
−
.subject .header {
+
−
  margin: 8px 0px;
+
−
}
+
−
 
+
−
.subject .header .date,
+
−
.subject .header .category {
+
−
  margin: 0px;
+
−
  clear: none;
+
−
  width: 50%;
+
−
}
+
−
 
+
−
.subject .header .date i,
+
−
.subject .header .category i {
+
−
  margin-right: 5px;
+
−
  color: #333;
+
−
  -moz-transition: all 400ms linear;
+
−
  -webkit-transition: all 400ms linear;
+
−
  -o-transition: all 400ms linear;
+
−
  transition: all 400ms linear;
+
−
}
+
−
 
+
−
.subject .header .date {
+
−
  float: left;
+
−
  text-align: left;
+
−
}
+
−
 
+
−
.subject .header .category {
+
−
  float: right;
+
−
  text-align: right;
+
−
}
+
−
/*subject icon at top*/
+
−
 
+
−
.subject .icon {
+
−
  position: absolute;
+
−
  top: -20px;
+
−
  left: 50%;
+
−
  left: calc(50% - 20px);
+
−
}
+
−
 
+
−
.subject .icon i {
+
−
  width: 40px;
+
−
  height: 40px;
+
−
  color: rgb(255, 255, 255);
+
−
  font-size: 150%;
+
−
  border-radius: 50%;
+
−
  text-align: center;
+
−
  padding: 7px;
+
−
}
+
−
/*Category color / icon color*/
+
−
 
+
−
.subject .category-color {
+
−
  height: 7px;
+
−
  position: absolute;
+
−
  top: 0px;
+
−
  left: 0px;
+
−
  width: 100%;
+
−
}
+
−
 
+
−
.subject.design .category-color,
+
−
.subject.design .icon i {
+
−
  background: #c0392b;
+
−
}
+
−
 
+
−
.subject.development .category-color,
+
−
.subject.development .icon i {
+
−
  background: #16a085;
+
−
}
+
−
 
+
−
.subject.photography .category-color,
+
−
.subject.photography .icon i {
+
−
  background: #2980b9;
+
−
}
+
−
/*hovering over subject*/
+
−
 
+
−
.subject.development:hover .header i {
+
−
  color: #16a085;
+
−
}
+
−
 
+
−
.subject.design:hover .header i {
+
−
  color: #c0392b;
+
−
}
+
−
 
+
−
.subject.photography:hover .header i {
+
−
  color: #2980b9;
+
−
}
+
−
 
+
−
.subject .title {
+
−
  margin: 12px 0px;
+
−
  border-bottom: dashed 1px #ccc;
+
−
  padding-bottom: 10px;
+
−
}
+
−
 
+
−
.subject .content {
+
−
  margin-bottom: 8px;
+
−
}
+
−
 
+
−
.subject .enrole {
+
−
  position: relative;
+
−
  color: #333;
+
−
  padding: 5px 12px;
+
−
  cursor: pointer;
+
−
  float: right;
+
−
  display: inline-block;
+
−
  border: solid 1px #ccc;
+
−
  -moz-transition: all 400ms linear;
+
−
  -webkit-transition: all 400ms linear;
+
−
  -o-transition: all 400ms linear;
+
−
  transition: all 400ms linear;
+
−
}
+
−
 
+
−
.subject .enrole:hover,
+
−
.subject .enrole:active {
+
−
  background: #222;
+
−
  color: #fff;
+
−
}
+
−
/*media queries for small devices*/
+
−
 
+
−
@media screen and (max-width: 678px) {
+
−
  .main-container {
+
−
    margin: 20px 15px;
+
−
  }
+
−
  .animation-element,
+
−
  .animation-element:nth-of-type(3n-1),
+
−
  .animation-element:nth-of-type(3n-2),
+
−
  .animation-element:nth-of-type(3n-0) {
+
−
    width: 100%;
+
−
    margin: 0px 0px 30px 0px;
+
−
  }
+
−
  .subject .header .date,
+
−
  .subject .header .category {
+
−
    width: 100%;
+
−
    margin-bottom: 10px;
+
−
    text-align: center;
+
−
  }
+
 
}
 
}
 
</style>
 
</style>
Line 320: Line 62:
  
  
−
<br>
+
<div style="height: 750px;"></div>
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
<br>
+
−
</br>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="main-container">
+
−
  <div class="container">
+
−
    <h1>Fade up from the bottom</h1>
+
−
    <p>This animation will focus on fade in and up an element when it comes into the focus of the viewer. </p>
+
−
  </div>
+
−
  <div class="container">
+
−
    <h2>
+
−
Course and Subjects <i class="fa fa-comment"></i></h2>
+
−
    <p>Here are our latest subjects that we are currently offering</p>
+
−
    <p>We supply a wide range of topics, including development, design, photography and everything in-between</p>
+
−
  </div>
+
−
  <div class="container cf">
+
−
    <!-- Course 1 -->
+
−
    <div class="animation-element bounce-up cf">
+
−
      <div class="subject development">
+
−
        <div class="category-color"></div>
+
−
        <div class="icon"><i class="fa fa-cogs"></i></div>
+
−
        <div class="header cf">
+
−
          <h4 class="date"><i class="fa fa-calendar-o"></i> April, 2015</h4>
+
−
          <h4 class="category"><i class="fa fa-folder-o"></i> Development</h4>
+
−
        </div>
+
−
        <h3 class="title">Fundamentals of C++ Development</h3>
+
−
        <div class="content">An introductory class on C++. This course will outline the basic elements required to understand development...</div>
+
−
        <div class="enrole">Enrole</div>
+
−
      </div>
+
−
    </div>
+
−
    <!-- Course 2 -->
+
−
    <div class="animation-element bounce-up cf">
+
−
      <div class="subject design">
+
−
        <div class="category-color"></div>
+
−
        <div class="icon"><i class="fa fa-pencil"></i></div>
+
−
        <div class="header cf">
+
−
          <h4 class="date"><i class="fa fa-calendar-o"></i> April, 2015</h4>
+
−
          <h4 class="category"><i class="fa fa-folder-o"></i> Design</h4>
+
−
        </div>
+
−
        <h3 class="title">Introduction to design </h3>
+
−
        <div class="content">Learn the basics of design and how to adapt them to your wordflow. This course covers an outline of Photoshop and...</div>
+
−
        <div class="enrole">Enrole</div>
+
−
      </div>
+
−
    </div>
+
−
    <!-- Course 3 -->
+
−
    <div class="animation-element bounce-up">
+
−
      <div class="subject photography">
+
−
        <div class="category-color"></div>
+
−
        <div class="icon"><i class="fa fa-camera"></i></div>
+
−
        <div class="header cf">
+
−
          <h4 class="date"><i class="fa fa-calendar-o"></i> May, 2015</h4>
+
−
          <h4 class="category"><i class="fa fa-folder-o"></i> Photography</h4>
+
−
        </div>
+
−
        <h3 class="title">Macro Photography Essentials </h3>
+
−
        <div class="content">This topic will contain all of the neseccary elements you will need to dive head first into taking stunning macro photography...</div>
+
−
        <div class="enrole">Enrole</div>
+
−
      </div>
+
−
    </div>
+
−
    <!-- Course 4 -->
+
−
    <div class="animation-element bounce-up cf">
+
−
      <div class="subject design">
+
−
        <div class="category-color"></div>
+
−
        <div class="icon"><i class="fa fa-pencil"></i></div>
+
−
        <div class="header cf">
+
−
          <h4 class="date"><i class="fa fa-calendar-o"></i> June, 2015</h4>
+
−
          <h4 class="category"><i class="fa fa-folder-o"></i> Design</h4>
+
−
        </div>
+
−
        <h3 class="title">Designing for the web</h3>
+
−
        <div class="content">In this course we will look into specific design techniques and adapt them for use on the web. This will include...</div>
+
−
        <div class="enrole">Enrole</div>
+
−
      </div>
+
−
    </div>
+
−
    <!-- Course 5 -->
+
−
    <div class="animation-element bounce-up cf">
+
−
      <div class="subject development">
+
−
        <div class="category-color"></div>
+
−
        <div class="icon"><i class="fa fa-cogs"></i></div>
+
−
        <div class="header cf">
+
−
          <h4 class="date"><i class="fa fa-calendar-o"></i> June, 2015</h4>
+
−
          <h4 class="category"><i class="fa fa-folder-o"></i> Development</h4>
+
−
        </div>
+
−
        <h3 class="title">Objective C# and iOS Development</h3>
+
−
        <div class="content">Thoughout this topic you will learn how to build responsive, fast and simple iOS apps. This topic is for an inermetidate...</div>
+
−
        <div class="enrole">Enrole</div>
+
−
      </div>
+
−
    </div>
+
−
    <!-- Course 6 -->
+
−
    <div class="animation-element bounce-up cf">
+
−
      <div class="subject development">
+
−
        <div class="category-color"></div>
+
−
        <div class="icon"><i class="fa fa-cogs"></i></div>
+
−
        <div class="header cf">
+
−
          <h4 class="date"><i class="fa fa-calendar-o"></i> June, 2015</h4>
+
−
          <h4 class="category"><i class="fa fa-folder-o"></i> Development</h4>
+
−
        </div>
+
−
        <h3 class="title">Javascript and jQuery</h3>
+
−
        <div class="content">The modern web is moving more and more towards dynamic interfaces. In this course you will learn how to use JavaScript and jQuery...</div>
+
−
        <div class="enrole">Enrole</div>
+
−
      </div>
+
−
    </div>
+
−
    <!-- Course 7 -->
+
−
    <div class="animation-element bounce-up">
+
−
      <div class="subject photography">
+
−
        <div class="category-color"></div>
+
−
        <div class="icon"><i class="fa fa-camera"></i></div>
+
−
        <div class="header cf">
+
−
          <h4 class="date"><i class="fa fa-calendar-o"></i> July, 2015</h4>
+
−
          <h4 class="category"><i class="fa fa-folder-o"></i> Photography</h4>
+
−
        </div>
+
−
        <h3 class="title">Street Photography for beginners</h3>
+
−
        <div class="content">Learn about the techniques and tools you can implement to improve your street photography. Including element such as shutter speed and ...</div>
+
−
        <div class="enrole">Enrole</div>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
</body>
+
  
 +
<img src="http://4.bp.blogspot.com/-ueMDJccHj5Q/Tlh-m4ISE9I/AAAAAAAAAZA/11wQ_oD6PCc/s400/Nature-Wallpapers-7.jpg" class="star" />
 +
 
 +
<div style="height: 750px;"></div>
 +
   
 +
<img src="https://thumbs.dreamstime.com/x/abstract-nature-22528221.jpg" class="star" />
 +
 
 +
<div style="height: 750px;"></div>
 +
   
 +
<img src="https://thumbs.dreamstime.com/x/abstract-nature-22528221.jpg" class="star"  />
  
 
</html>
 
</html>

Revision as of 06:18, 26 October 2017