|
|
| (96 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | {{BGU_Israel}} | | {{BGU_Israel}} |
| − | <html> | + | <div id="homePage"> |
| − | <head>
| + | {{Template:BGU_Israel/header}} |
| − |
| + | </div> |
| − | <title>OriginALS</title>
| + | <html lang="en"> |
| − | <meta charset="utf-8">
| + | <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | <header class="img-responsive masthead text-center"> |
| − | <link type="text/css" rel="stylesheet" href="style.css">
| + | |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
| + | |
| − | <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
| + | |
| − | <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
| + | |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
| + | |
| − | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
| + | |
| − | <style>
| + | |
| − | body {
| + | |
| − | font: 400 15px Segoe UI !important;
| + | |
| − | line-height: 1.8;
| + | |
| − | color: #818181;
| + | |
| − | }
| + | |
| − | h1 {
| + | |
| − | font-size: 32px!important;
| + | |
| − | font-family: Segoe UI Light!important;
| + | |
| − | text-transform: uppercase;
| + | |
| − | color: #303030;
| + | |
| − | font-weight: 600;
| + | |
| − | margin-bottom: 30px !important;
| + | |
| − | }
| + | |
| − | h4 {
| + | |
| − | font-size: 19px;
| + | |
| − | line-height: 1.375em;
| + | |
| − | color: #303030;
| + | |
| − | font-weight: 400;
| + | |
| − | margin-bottom: 30px;
| + | |
| − | }
| + | |
| − | p, ol {
| + | |
| − | font-size: 16px !important;
| + | |
| − | padding:10px;
| + | |
| − | color:#010101 !important;
| + | |
| − | }
| + | |
| − | .jumbotron {
| + | |
| − | background-color: #f4511e;
| + | |
| − | color: #fff;
| + | |
| − | padding: 100px 25px;
| + | |
| − | font-family: Montserrat, sans-serif;
| + | |
| − | }
| + | |
| − | .container-fluid {
| + | |
| − | padding: 60px 50px;
| + | |
| − | }
| + | |
| − | .bg-grey {
| + | |
| − | background-color: #f6f6f6;
| + | |
| − | }
| + | |
| − | .logo-small {
| + | |
| − | color: #f4511e;
| + | |
| − | font-size: 50px;
| + | |
| − | }
| + | |
| − | .logo {
| + | |
| − | color: #f4511e;
| + | |
| − | font-size: 200px;
| + | |
| − | }
| + | |
| − | .thumbnail {
| + | |
| − | padding: 0 0 15px 0;
| + | |
| − | border: none;
| + | |
| − | border-radius: 0;
| + | |
| − | }
| + | |
| − | .thumbnail img {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | }
| + | |
| − | .carousel-control.right, .carousel-control.left {
| + | |
| − | background-image: none;
| + | |
| − | color: #f4511e;
| + | |
| − | }
| + | |
| − | .carousel-indicators li {
| + | |
| − | border-color: #f4511e;
| + | |
| − | }
| + | |
| − | .carousel-indicators li.active {
| + | |
| − | background-color: #f4511e;
| + | |
| − | }
| + | |
| − | .item h4 {
| + | |
| − | font-size: 19px;
| + | |
| − | line-height: 1.375em;
| + | |
| − | font-weight: 400;
| + | |
| − | font-style: italic;
| + | |
| − | margin: 70px 0;
| + | |
| − | }
| + | |
| − | .item span {
| + | |
| − | font-style: normal;
| + | |
| − | }
| + | |
| − | .panel {
| + | |
| − | border: 1px solid #f4511e;
| + | |
| − | border-radius:0 !important;
| + | |
| − | transition: box-shadow 0.5s;
| + | |
| − | }
| + | |
| − | .panel:hover {
| + | |
| − | box-shadow: 5px 0px 40px rgba(0,0,0, .2);
| + | |
| − | }
| + | |
| − | .panel-footer .btn:hover {
| + | |
| − | border: 1px solid #f4511e;
| + | |
| − | background-color: #fff !important;
| + | |
| − | color: #f4511e;
| + | |
| − | }
| + | |
| − | .panel-heading {
| + | |
| − | color: #fff !important;
| + | |
| − | background-color: #f4511e !important;
| + | |
| − | padding: 25px;
| + | |
| − | border-bottom: 1px solid transparent;
| + | |
| − | border-top-left-radius: 0px;
| + | |
| − | border-top-right-radius: 0px;
| + | |
| − | border-bottom-left-radius: 0px;
| + | |
| − | border-bottom-right-radius: 0px;
| + | |
| − | }
| + | |
| − | .panel-footer {
| + | |
| − | background-color: white !important;
| + | |
| − | }
| + | |
| − | .panel-footer h3 {
| + | |
| − | font-size: 32px;
| + | |
| − | }
| + | |
| − | .panel-footer h4 {
| + | |
| − | color: #aaa;
| + | |
| − | font-size: 14px;
| + | |
| − | }
| + | |
| − | .panel-footer .btn {
| + | |
| − | margin: 15px 0;
| + | |
| − | background-color: #f4511e;
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | .navbar {
| + | |
| − | margin-bottom: 10px; !important;
| + | |
| − | background-color: #fff !important;
| + | |
| − | z-index: 9999!important;
| + | |
| − | border: 0 !important;
| + | |
| − | text-transform:uppercase !important;
| + | |
| − | border-radius: 0 !important;
| + | |
| − | font-family: 'Segoe UI Light'!important;
| + | |
| − | font-weight: 600!important;
| + | |
| − | color:#000!important;
| + | |
| − | padding-top:20px;
| + | |
| − | }
| + | |
| − | .navbar li a, .navbar .navbar-brand {
| + | |
| − | color: #000 !important;
| + | |
| − | }
| + | |
| − | .navbar-nav li a:hover, .navbar-nav li.active a {
| + | |
| − | color: #0186ac !important;
| + | |
| − | background-color: #fff !important;
| + | |
| − | }
| + | |
| − | .navbar-default .navbar-toggle {
| + | |
| − | border-color: transparent;
| + | |
| − | color: #fff !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slideanim {visibility:hidden;}
| + | |
| − | .slide {
| + | |
| − | animation-name: slide;
| + | |
| − | -webkit-animation-name: slide;
| + | |
| − | animation-duration: 1s;
| + | |
| − | -webkit-animation-duration: 1s;
| + | |
| − | visibility: visible;
| + | |
| − | }
| + | |
| − | @keyframes slide {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(70%);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0%);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-webkit-keyframes slide {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(70%);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0%);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media screen and (max-width: 768px) {
| + | |
| − | .col-sm-4 {
| + | |
| − | text-align: center;
| + | |
| − | margin: 25px 0;
| + | |
| − | }
| + | |
| − | .btn-lg {
| + | |
| − | width: 100%;
| + | |
| − | margin-bottom: 35px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media screen and (max-width: 480px) {
| + | |
| − | .logo {
| + | |
| − | font-size: 150px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | header.masthead {
| + | |
| − | 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');
| + | |
| − | min-height: 600px;
| + | |
| − | background-position: center center;
| + | |
| − | -webkit-background-size: cover;
| + | |
| − | -moz-background-size: cover;
| + | |
| − | -o-background-size: cover;
| + | |
| − | background-size: cover;
| + | |
| − | } | + | |
| − | .parallax-window {
| + | |
| − | min-height: 700px;
| + | |
| − | background: transparent;
| + | |
| − | } | + | |
| − | #abstract p, #abstract ol {
| + | |
| − | text-align: justify;
| + | |
| − | }
| + | |
| − | #myBtn {
| + | |
| − | display: none;
| + | |
| − |
| + | |
| − | position: fixed;
| + | |
| − | bottom: 20px;
| + | |
| − | right: 20px;
| + | |
| − | z-index: 99;
| + | |
| − | font-size: 16px;
| + | |
| − | border: none;
| + | |
| − | outline: none;
| + | |
| − | background-color: #0186ac;
| + | |
| − | color: white;
| + | |
| − | cursor: pointer;
| + | |
| − | padding: 12px 15px 12px 15px;
| + | |
| − | border-radius: 100px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #myBtn:hover {
| + | |
| − | background-color: #555;
| + | |
| − | }
| + | |
| − | footer {
| + | |
| − | background-color:#262626;
| + | |
| − | color:#fff !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − | </head> | + | |
| − | <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> | + | |
| − | <div id="top"></div>
| + | |
| − | <a id="myBtn" href="#top" title="To Top">
| + | |
| − | <span class="glyphicon glyphicon-chevron-up"></span>
| + | |
| − | </a> | + | |
| − | | + | |
| − | <nav class="navbar navbar-default navbar-fixed-top">
| + | |
| − | <div class="container">
| + | |
| − | <div class="navbar-header">
| + | |
| − | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
| + | |
| − | <span class="icon-bar"></span>
| + | |
| − | <span class="icon-bar"></span>
| + | |
| − | <span class="icon-bar"></span>
| + | |
| − | </button>
| + | |
| − | <a class="navbar-brand" href="#myPage">Logo</a>
| + | |
| − | </div>
| + | |
| − | <div class="collapse navbar-collapse" id="myNavbar">
| + | |
| − | <ul class="nav navbar-nav navbar-right">
| + | |
| − | <li><a href="index.html">Home</a></li>
| + | |
| − | <li><a href="#top">Team</a></li>
| + | |
| − | <li><a href="#portfolio">Parts</a></li>
| + | |
| − | <li><a href="#pricing">Practices</a></li>
| + | |
| − | <li><a href="#contact">Arrtibutions</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </nav>
| + | |
| − | <header class="masthead text-center">
| + | |
| | <div class="container my-auto"> | | <div class="container my-auto"> |
| | </div> | | </div> |
| | </header> | | </header> |
| | | | |
| − | <!-- Container (About Section) -->
| + | <div id="abstract" class="bg-white text-center"> |
| − | <div id="abstract" class="container-fluid text-center"> | + | |
| | <div class="row"> | | <div class="row"> |
| − | <div class="col-sm-8 col-sm-offset-2"> | + | |
| − | <h1>Abstract</h1> | + | </div> |
| − | <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>
| + | <div class="col-sm-8"> |
| | + | <h1>What we are all about</h1> |
| | + | </div> |
| | + | |
| | + | <div class="col-sm-4 display"> |
| | + | <img src="https://static.igem.org/mediawiki/2018/5/51/T--BGU_Israel--home_char.png" !important class="img-responsive"> |
| | + | <br/> |
| | + | <a href="https://2018.igem.org/Team:BGU_Israel/Description" class="btn btn-info" role="button" >Learn More</a> |
| | + | </div> |
| | + | |
| | + | <div class="col-sm-8"> |
| | + | <p class="mb-4 justified">Amyotrophic Lateral Sclerosis (ALS), also known as Lou Gehrig's disease, is a devastating neurodegenerative disease that affects motor neurons in the central nervous system. Recent research studies of 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> |
| | 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> | | 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> |
| − | <ol class="mb-4 justified animated fadeInRight"> | + | <ol class="justified"> |
| | <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 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> | | <li>We prevent the generation of new toxic cells by genetically targeting specific molecules that generate the toxic cells.</li> |
| | </ol> | | </ol> |
| − | <p class="mb-4 justified animated fadeInRight"> | + | <p class="mb-4 justified"> |
| | 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> | | 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> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| | + | </div> |
| | + | <div id="video" class="container-fluid text-center"> |
| | + | <div class="row"> |
| | + | <div class="col-sm-8 col-sm-offset-2"> |
| | + | <h1>Long Story Short</h1> |
| | + | |
| | + | <video width="100%" height="100%" controls> |
| | + | <source src="https://static.igem.org/mediawiki/2018/8/84/T--BGU_Israel--OriginALS_animation.mp4" type="video/mp4"> |
| | + | </video> |
| | </div> | | </div> |
| | | | |
| | </div> | | </div> |
| | </div> | | </div> |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="contact"></div>
| |
| − |
| |
| − | <footer class="container-fluid text-center">
| |
| − |
| |
| − | </footer>
| |
| − |
| |
| | <script> | | <script> |
| − | $(document).ready(function(){
| + | document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| − | // Add smooth scrolling to all links in navbar + footer link
| + | anchor.addEventListener('click', function (e) { |
| − | $(".navbar a, #myBtn[href='#top']").on('click', function(event) {
| + | e.preventDefault(); |
| − | // Make sure this.hash has a value before overriding default behavior
| + | |
| − | if (this.hash !== "") {
| + | |
| − | // Prevent default anchor click behavior
| + | |
| − | event.preventDefault();
| + | |
| | | | |
| − | // Store hash
| + | document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| − | var hash = this.hash;
| + | behavior: 'smooth' |
| − | | + | |
| − | // Using jQuery's animate() method to add smooth page scroll
| + | |
| − | // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
| + | |
| − | $('html, body').animate({
| + | |
| − | scrollTop: $(hash).offset().top | + | |
| − | }, 500, function(){
| + | |
| − |
| + | |
| − | // Add hash (#) to URL when done scrolling (default click behavior)
| + | |
| − | window.location.hash = hash;
| + | |
| − | });
| + | |
| − | } // End if
| + | |
| − | });
| + | |
| − |
| + | |
| − | $(window).scroll(function() {
| + | |
| − | $(".slideanim").each(function(){
| + | |
| − | var pos = $(this).offset().top;
| + | |
| − | | + | |
| − | var winTop = $(window).scrollTop();
| + | |
| − | if (pos < winTop + 600) {
| + | |
| − | $(this).addClass("slide");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | })
| + | |
| − | </script>
| + | |
| − | <script>
| + | |
| − | /*!
| + | |
| − | * 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>
| + | |
| − | // When the user scrolls down 20px from the top of the document, show the button
| + | |
| − | window.onscroll = function() {scrollFunction()};
| + | |
| − | | + | |
| − | function scrollFunction() {
| + | |
| − | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
| + | |
| − | document.getElementById("myBtn").style.display = "block";
| + | |
| − | } else {
| + | |
| − | document.getElementById("myBtn").style.display = "none";
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| | </script> | | </script> |
| | </body> | | </body> |
| | </html> | | </html> |
| | + | {{Template:BGU_Israel/footer}} |
