Difference between revisions of "Team:BGU Israel"

Line 204: Line 204:
 
   padding-bottom: calc(10rem - 56px);
 
   padding-bottom: calc(10rem - 56px);
 
   background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 
   background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
−
width:100%;
+
min-height: 600px;
−
        overflow: hidden;
+
  background-position: center center;
−
    min-height: 700px;  
+
  -webkit-background-size: cover;
−
    /* Create the parallax scrolling effect */
+
  -moz-background-size: cover;
−
    background-attachment: fixed;
+
  -o-background-size: cover;
−
    background-position: center;
+
  background-size: cover;
−
    background-repeat: no-repeat;
+
}
−
     background-size: cover;
+
      .parallax-window {
 +
    min-height: 700px;
 +
     background: transparent;
 
}
 
}
−
 
 
       #abstract p, #abstract ol {
 
       #abstract p, #abstract ol {
 
           text-align: justify;
 
           text-align: justify;
Line 233: Line 234:
 
   border-radius: 100px;
 
   border-radius: 100px;
 
}
 
}
 +
 
#myBtn:hover {
 
#myBtn:hover {
 
   background-color: #555;
 
   background-color: #555;
Line 261: Line 263:
 
  }
 
  }
 
     }
 
     }
−
     #video {
+
     .gray-section {
 
         background-color:#ededed;
 
         background-color:#ededed;
 
     }
 
     }
−
 
+
    .sub-page-header {
 +
          padding-top: 10rem;
 +
  padding-bottom: calc(10rem - 56px);
 +
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 +
height:200px !important;
 +
  background-position: top center;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
    }
 
     </style>
 
     </style>
 
</head>
 
</head>
 
<body id="myPage"  data-spy="scroll" data-target=".navbar" data-offset="60">
 
<body id="myPage"  data-spy="scroll" data-target=".navbar" data-offset="60">
 
     <div id="top"></div>
 
     <div id="top"></div>
−
     <button id="myBtn" href="#top" title="To Top">
+
     <a id="myBtn" class="button" href="#top" title="To Top">
 
     <span class="glyphicon glyphicon-chevron-up"></span>
 
     <span class="glyphicon glyphicon-chevron-up"></span>
−
   </button>
+
   </a>
  
 
<nav id="mainMenu" class="navbar navbar-default navbar-fixed-top">
 
<nav id="mainMenu" class="navbar navbar-default navbar-fixed-top">
Line 334: Line 346:
 
   </div>
 
   </div>
 
</nav>
 
</nav>
−
   <header class="masthead text-center">
+
   <header class="sub-page-header text-center">
 
       <div class="container my-auto">
 
       <div class="container my-auto">
 +
          <h1>Description</h1>
 
       </div>
 
       </div>
 
     </header>
 
     </header>
  
 +
<script>
 +
   
 +
</script>
 
<!-- Container (About Section) -->
 
<!-- Container (About Section) -->
−
<div id="abstract" class="container-fluid text-center">
+
    <style>
−
   <div class="row">
+
    #cf {
−
<div class="col-sm-8 col-sm-offset-2">
+
   position:relative;
−
    <h1>Abstract</h1>
+
  height:250px;
−
      <p style="margin:0px !important; padding:0!important;"  class="mb-4 justified animated fadeInRight">Recent research studies of Amyotrophic Lateral Sclerosis (ALS) suggest that brain cells that have become toxic, directly contribute to the progression of the disease. These cells change their gene expression pattern and possess distinguishing genetic markers. In addition, they drive the death of other cells in the brain among them the motor neurons. <br><br>
+
  width:250px;
−
Our objective, as the BGU-IGEM team OriginALS, is to prolong survival of ALS patients via a novel genetic engineering approach. In order to reach this objective, we combine two separate strategies as our therapeutic approach: </p>
+
  margin:0 auto;
−
              <ol class="mb-4 justified animated fadeInRight">
+
}
−
                <li> We identify and selectively eliminate only the toxic cells. In order to identify and target the toxic-cells only, we use distinguishing markers that are unique only to them.</li>
+
 
−
                <li>We prevent the generation of new toxic cells by genetically targeting specific molecules that generate the toxic cells.</li>
+
#cf img {
−
              </ol>
+
  position:absolute;
−
              <p   class="mb-4 justified animated fadeInRight">
+
  left:0;
−
In conclusion, our approach combines an apoptotic destruction of toxic cells with the prevention of the formation of new toxic cells, thus aiming to significantly reduce the occurrence of toxic cells in the central neuronal system (CNS), which is aimed at a significant deceleration of the progression rate of ALS.</p>
+
  -webkit-transition: opacity 1s ease-in-out;
 +
  -moz-transition: opacity 1s ease-in-out;
 +
  -o-transition: opacity 1s ease-in-out;
 +
  transition: opacity 1s ease-in-out;
 +
    height:250px;
 +
   width:250px;
 +
}
  
 +
#cf img.top:hover {
 +
  opacity:0;
 +
}
 +
 
 +
       
 +
</style>
 +
    <div id="container">
 +
    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
 +
    <!-- Indicators -->
 +
    <ol class="carousel-indicators">
 +
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
      <li data-target="#myCarousel" data-slide-to="1"></li>
 +
      <li data-target="#myCarousel" data-slide-to="2"></li>
 +
    </ol>
 +
 +
    <!-- Wrapper for slides -->
 +
    <div class="carousel-inner" role="listbox">
 +
      <div class="item active">
 +
        <div class="row">
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
       
 
</div>
 
</div>
−
      
+
</div>
 +
<div class="col-sm-3">
 +
     <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
   
 +
</div>
 +
</div>
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
    </div>
 +
      </div>
 +
      <div class="item">
 +
        <div class="row">
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
       
 +
</div>
 +
</div>
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
   
 +
</div>
 +
</div>
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
    </div>
 +
      </div>
 +
      <div class="item">
 +
        <div class="row">
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
       
 +
</div>
 +
</div>
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
   
 +
</div>
 +
</div>
 +
<div class="col-sm-3">
 +
    <div id="cf">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
    </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!-- Left and right controls -->
 +
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 +
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 +
      <span class="sr-only">Previous</span>
 +
    </a>
 +
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 +
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 +
      <span class="sr-only">Next</span>
 +
    </a>
 
   </div>
 
   </div>
 
</div>
 
</div>
−
<div id="video" class="container-fluid text-center">
+
<div id="abstract" class="container text-center">
 +
 +
</div>
 +
<div id="video" class="container-fluid text-center gray-section">
 
   <div class="row">
 
   <div class="row">
 
<div class="col-sm-8 col-sm-offset-2">
 
<div class="col-sm-8 col-sm-offset-2">
 
     <h1>Long Story Short</h1>
 
     <h1>Long Story Short</h1>
−
    <!---
+
    
−
   <video width="100%"  controls>
+
−
<source src="https://static.igem.org/mediawiki/2018/f/fe/IGEM_Human_Practices.mp4" type="video/mp4">
+
−
</video>
+
−
--->
+
−
    <iframe style="width:100%; height:auto;" src="https://www.youtube.com/embed/qyAFAlu17CE?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+
 
</div>
 
</div>
 
      
 
      
Line 450: Line 580:
 
})
 
})
 
</script>
 
</script>
−
<script type="text/javascript">
 
−
    /*!
 
−
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
 
−
* @copyright 2016 PixelCog, Inc.
 
−
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 
−
*/
 
  
−
;(function ( $, window, document, undefined ) {
 
−
 
−
  // Polyfill for requestAnimationFrame
 
−
  // via: https://gist.github.com/paulirish/1579671
 
−
 
−
  (function() {
 
−
    var lastTime = 0;
 
−
    var vendors = ['ms', 'moz', 'webkit', 'o'];
 
−
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 
−
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
 
−
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
 
−
    }
 
−
 
−
    if (!window.requestAnimationFrame)
 
−
      window.requestAnimationFrame = function(callback) {
 
−
        var currTime = new Date().getTime();
 
−
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
 
−
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
 
−
          timeToCall);
 
−
        lastTime = currTime + timeToCall;
 
−
        return id;
 
−
      };
 
−
 
−
    if (!window.cancelAnimationFrame)
 
−
      window.cancelAnimationFrame = function(id) {
 
−
        clearTimeout(id);
 
−
      };
 
−
  }());
 
−
 
−
 
−
  // Parallax Constructor
 
−
 
−
  function Parallax(element, options) {
 
−
    var self = this;
 
−
 
−
    if (typeof options == 'object') {
 
−
      delete options.refresh;
 
−
      delete options.render;
 
−
      $.extend(this, options);
 
−
    }
 
−
 
−
    this.$element = $(element);
 
−
 
−
    if (!this.imageSrc && this.$element.is('img')) {
 
−
      this.imageSrc = this.$element.attr('src');
 
−
    }
 
−
 
−
    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
 
−
 
−
    if (positions.length < 1) {
 
−
      positions.push('center');
 
−
    }
 
−
    if (positions.length == 1) {
 
−
      positions.push(positions[0]);
 
−
    }
 
−
 
−
    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
 
−
      positions = [positions[1], positions[0]];
 
−
    }
 
−
 
−
    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
 
−
    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
 
−
 
−
    self.positionX = positions[0];
 
−
    self.positionY = positions[1];
 
−
 
−
    if (this.positionX != 'left' && this.positionX != 'right') {
 
−
      if (isNaN(parseInt(this.positionX))) {
 
−
        this.positionX = 'center';
 
−
      } else {
 
−
        this.positionX = parseInt(this.positionX);
 
−
      }
 
−
    }
 
−
 
−
    if (this.positionY != 'top' && this.positionY != 'bottom') {
 
−
      if (isNaN(parseInt(this.positionY))) {
 
−
        this.positionY = 'center';
 
−
      } else {
 
−
        this.positionY = parseInt(this.positionY);
 
−
      }
 
−
    }
 
−
 
−
    this.position =
 
−
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
 
−
      this.positionY + (isNaN(this.positionY)? '' : 'px');
 
−
 
−
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
 
−
      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
 
−
        this.$element.css({
 
−
          backgroundImage: 'url(' + this.imageSrc + ')',
 
−
          backgroundSize: 'cover',
 
−
          backgroundPosition: this.position
 
−
        });
 
−
      }
 
−
      return this;
 
−
    }
 
−
 
−
    if (navigator.userAgent.match(/(Android)/)) {
 
−
      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
 
−
        this.$element.css({
 
−
          backgroundImage: 'url(' + this.imageSrc + ')',
 
−
          backgroundSize: 'cover',
 
−
          backgroundPosition: this.position
 
−
        });
 
−
      }
 
−
      return this;
 
−
    }
 
−
 
−
    this.$mirror = $('<div />').prependTo(this.mirrorContainer);
 
−
 
−
    var slider = this.$element.find('>.parallax-slider');
 
−
    var sliderExisted = false;
 
−
 
−
    if (slider.length == 0)
 
−
      this.$slider = $('<img />').prependTo(this.$mirror);
 
−
    else {
 
−
      this.$slider = slider.prependTo(this.$mirror)
 
−
      sliderExisted = true;
 
−
    }
 
−
 
−
    this.$mirror.addClass('parallax-mirror').css({
 
−
      visibility: 'hidden',
 
−
      zIndex: this.zIndex,
 
−
      position: 'fixed',
 
−
      top: 0,
 
−
      left: 0,
 
−
      overflow: 'hidden'
 
−
    });
 
−
 
−
    this.$slider.addClass('parallax-slider').one('load', function() {
 
−
      if (!self.naturalHeight || !self.naturalWidth) {
 
−
        self.naturalHeight = this.naturalHeight || this.height || 1;
 
−
        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
 
−
      }
 
−
      self.aspectRatio = self.naturalWidth / self.naturalHeight;
 
−
 
−
      Parallax.isSetup || Parallax.setup();
 
−
      Parallax.sliders.push(self);
 
−
      Parallax.isFresh = false;
 
−
      Parallax.requestRender();
 
−
    });
 
−
 
−
    if (!sliderExisted)
 
−
      this.$slider[0].src = this.imageSrc;
 
−
 
−
    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
 
−
      this.$slider.trigger('load');
 
−
    }
 
−
 
−
  }
 
−
 
−
 
−
  // Parallax Instance Methods
 
−
 
−
  $.extend(Parallax.prototype, {
 
−
    speed:    0.2,
 
−
    bleed:    0,
 
−
    zIndex:  -100,
 
−
    iosFix:  true,
 
−
    androidFix: true,
 
−
    position: 'center',
 
−
    overScrollFix: false,
 
−
    mirrorContainer: 'body',
 
−
 
−
    refresh: function() {
 
−
      this.boxWidth        = this.$element.outerWidth();
 
−
      this.boxHeight      = this.$element.outerHeight() + this.bleed * 2;
 
−
      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
 
−
      this.boxOffsetLeft  = this.$element.offset().left;
 
−
      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
 
−
 
−
      var winHeight = Parallax.winHeight;
 
−
      var docHeight = Parallax.docHeight;
 
−
      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
 
−
      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
 
−
      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
 
−
      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
 
−
      var margin;
 
−
 
−
      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
 
−
        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
 
−
        this.imageHeight  = imageHeightMin;
 
−
        this.offsetBaseTop = imageOffsetMin;
 
−
 
−
        margin = this.imageWidth - this.boxWidth;
 
−
 
−
        if (this.positionX == 'left') {
 
−
          this.offsetLeft = 0;
 
−
        } else if (this.positionX == 'right') {
 
−
          this.offsetLeft = - margin;
 
−
        } else if (!isNaN(this.positionX)) {
 
−
          this.offsetLeft = Math.max(this.positionX, - margin);
 
−
        } else {
 
−
          this.offsetLeft = - margin / 2 | 0;
 
−
        }
 
−
      } else {
 
−
        this.imageWidth    = this.boxWidth;
 
−
        this.imageHeight  = this.boxWidth / this.aspectRatio | 0;
 
−
        this.offsetLeft    = 0;
 
−
 
−
        margin = this.imageHeight - imageHeightMin;
 
−
 
−
        if (this.positionY == 'top') {
 
−
          this.offsetBaseTop = imageOffsetMin;
 
−
        } else if (this.positionY == 'bottom') {
 
−
          this.offsetBaseTop = imageOffsetMin - margin;
 
−
        } else if (!isNaN(this.positionY)) {
 
−
          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
 
−
        } else {
 
−
          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
 
−
        }
 
−
      }
 
−
    },
 
−
 
−
    render: function() {
 
−
      var scrollTop    = Parallax.scrollTop;
 
−
      var scrollLeft  = Parallax.scrollLeft;
 
−
      var overScroll  = this.overScrollFix ? Parallax.overScroll : 0;
 
−
      var scrollBottom = scrollTop + Parallax.winHeight;
 
−
 
−
      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
 
−
        this.visibility = 'visible';
 
−
        this.mirrorTop = this.boxOffsetTop  - scrollTop;
 
−
        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
 
−
        this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
 
−
      } else {
 
−
        this.visibility = 'hidden';
 
−
      }
 
−
 
−
      this.$mirror.css({
 
−
        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
 
−
        visibility: this.visibility,
 
−
        height: this.boxHeight,
 
−
        width: this.boxWidth
 
−
      });
 
−
 
−
      this.$slider.css({
 
−
        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
 
−
        position: 'absolute',
 
−
        height: this.imageHeight,
 
−
        width: this.imageWidth,
 
−
        maxWidth: 'none'
 
−
      });
 
−
    }
 
−
  });
 
−
 
−
 
−
  // Parallax Static Methods
 
−
 
−
  $.extend(Parallax, {
 
−
    scrollTop:    0,
 
−
    scrollLeft:  0,
 
−
    winHeight:    0,
 
−
    winWidth:    0,
 
−
    docHeight:    1 << 30,
 
−
    docWidth:    1 << 30,
 
−
    sliders:      [],
 
−
    isReady:      false,
 
−
    isFresh:      false,
 
−
    isBusy:      false,
 
−
 
−
    setup: function() {
 
−
      if (this.isReady) return;
 
−
 
−
      var self = this;
 
−
 
−
      var $doc = $(document), $win = $(window);
 
−
 
−
      var loadDimensions = function() {
 
−
        Parallax.winHeight = $win.height();
 
−
        Parallax.winWidth  = $win.width();
 
−
        Parallax.docHeight = $doc.height();
 
−
        Parallax.docWidth  = $doc.width();
 
−
      };
 
−
 
−
      var loadScrollPosition = function() {
 
−
        var winScrollTop  = $win.scrollTop();
 
−
        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
 
−
        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
 
−
        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
 
−
        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
 
−
        Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
 
−
      };
 
−
 
−
      $win.on('resize.px.parallax load.px.parallax', function() {
 
−
          loadDimensions();
 
−
          self.refresh();
 
−
          Parallax.isFresh = false;
 
−
          Parallax.requestRender();
 
−
        })
 
−
        .on('scroll.px.parallax load.px.parallax', function() {
 
−
          loadScrollPosition();
 
−
          Parallax.requestRender();
 
−
        });
 
−
 
−
      loadDimensions();
 
−
      loadScrollPosition();
 
−
 
−
      this.isReady = true;
 
−
 
−
      var lastPosition = -1;
 
−
 
−
      function frameLoop() {
 
−
        if (lastPosition == window.pageYOffset) {  // Avoid overcalculations
 
−
          window.requestAnimationFrame(frameLoop);
 
−
          return false;
 
−
        } else lastPosition = window.pageYOffset;
 
−
 
−
        self.render();
 
−
        window.requestAnimationFrame(frameLoop);
 
−
      }
 
−
 
−
      frameLoop();
 
−
    },
 
−
 
−
    configure: function(options) {
 
−
      if (typeof options == 'object') {
 
−
        delete options.refresh;
 
−
        delete options.render;
 
−
        $.extend(this.prototype, options);
 
−
      }
 
−
    },
 
−
 
−
    refresh: function() {
 
−
      $.each(this.sliders, function(){ this.refresh(); });
 
−
      this.isFresh = true;
 
−
    },
 
−
 
−
    render: function() {
 
−
      this.isFresh || this.refresh();
 
−
      $.each(this.sliders, function(){ this.render(); });
 
−
    },
 
−
 
−
    requestRender: function() {
 
−
      var self = this;
 
−
      self.render();
 
−
      self.isBusy = false;
 
−
    },
 
−
    destroy: function(el){
 
−
      var i,
 
−
          parallaxElement = $(el).data('px.parallax');
 
−
      parallaxElement.$mirror.remove();
 
−
      for(i=0; i < this.sliders.length; i+=1){
 
−
        if(this.sliders[i] == parallaxElement){
 
−
          this.sliders.splice(i, 1);
 
−
        }
 
−
      }
 
−
      $(el).data('px.parallax', false);
 
−
      if(this.sliders.length === 0){
 
−
        $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
 
−
        this.isReady = false;
 
−
        Parallax.isSetup = false;
 
−
      }
 
−
    }
 
−
  });
 
−
 
−
 
−
  // Parallax Plugin Definition
 
−
 
−
  function Plugin(option) {
 
−
    return this.each(function () {
 
−
      var $this = $(this);
 
−
      var options = typeof option == 'object' && option;
 
−
 
−
      if (this == window || this == document || $this.is('body')) {
 
−
        Parallax.configure(options);
 
−
      }
 
−
      else if (!$this.data('px.parallax')) {
 
−
        options = $.extend({}, $this.data(), options);
 
−
        $this.data('px.parallax', new Parallax(this, options));
 
−
      }
 
−
      else if (typeof option == 'object')
 
−
      {
 
−
        $.extend($this.data('px.parallax'), options);
 
−
      }
 
−
      if (typeof option == 'string') {
 
−
        if(option == 'destroy'){
 
−
            Parallax.destroy(this);
 
−
        }else{
 
−
          Parallax[option]();
 
−
        }
 
−
      }
 
−
    });
 
−
  }
 
−
 
−
  var old = $.fn.parallax;
 
−
 
−
  $.fn.parallax            = Plugin;
 
−
  $.fn.parallax.Constructor = Parallax;
 
−
 
−
 
−
  // Parallax No Conflict
 
−
 
−
  $.fn.parallax.noConflict = function () {
 
−
    $.fn.parallax = old;
 
−
    return this;
 
−
  };
 
−
 
−
 
−
  // Parallax Data-API
 
−
 
−
  $( function () {
 
−
    $('[data-parallax="scroll"]').parallax();
 
−
  });
 
−
 
−
}(jQuery, window, document));
 
−
 
 
−
    </script>
 
 
     <script>
 
     <script>
 
// When the user scrolls down 20px from the top of the document, show the button
 
// When the user scrolls down 20px from the top of the document, show the button

Revision as of 15:59, 29 July 2018

OriginALS

<!DOCTYPE html> OriginALS

Description

Long Story Short

  • Ben-Gurion University of the Negev Ben Gurion 1, Beer Sheva 8410501, Israel
  • Second item
  • Third item
  • First item
  • Second item
  • Third item
  • First item
  • Second item
  • Third item
  • Third item