|
|
(228 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| {{BGU_Israel}} | | {{BGU_Israel}} |
− | <!DOCTYPE html>
| + | {{Template:BGU_Israel/header}} |
| <html lang="en"> | | <html lang="en"> |
| <head> | | <head> |
| | | |
− | <title>OriginALS</title>
| + | </head> |
− | <meta charset="utf-8">
| + | <body> |
− | <meta name="viewport" content="width=device-width, initial-scale=1"> | + | |
− | <link type="text/css" rel="stylesheet" href="style.css">
| + | <header style="background-image:url('https://static.igem.org/mediawiki/2018/1/13/T--BGU_Israel--orange_subhead.png')!important;" class="sub-page-header text-center"> |
− | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
| + | <div class="container my-auto"> |
− | <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
| + | <h1 class="animated fadeInUp">Meet our Team</h1> |
− | <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
| + | </div> |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
| + | </header> |
− | <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: capitalize;
| + | |
− | color: #303030;
| + | |
− | font-weight: 600;
| + | |
− | margin-bottom: 20px !important;
| + | |
− |
| + | |
− | }
| + | |
− | h4 {
| + | |
− | font-size: 19px;
| + | |
− | line-height: 1.375em;
| + | |
− | color: #303030;
| + | |
− | font-weight: 400;
| + | |
− | margin-bottom: 30px;
| + | |
− | }
| + | |
− | p, ol {
| + | |
− | font-size: 16px !important;
| + | |
− |
| + | |
− | 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:#ededed;
| + | <style> |
− | color:#000;
| + | .bg-grey, #team-photos { |
− | padding: 60px 50px;
| + | margin-top:0 !important; |
− | }
| + | |
− | .bg-white {
| + | |
− | background-color:#fff;
| + | |
− | color:#000;
| + | |
− | padding: 60px 50px;
| + | |
− | }
| + | |
− | .bg-dark {
| + | |
− | background-color:#262626;
| + | |
− | color:#fff !important;
| + | |
− | padding: 60px 50px;
| + | |
− | }
| + | |
− | .bg-dark p, .bg-dark h1 {
| + | |
− | color:#fff !important;
| + | |
− |
| + | |
− | }
| + | |
− | .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:10px;
| + | |
− | }
| + | |
− | .navbar-brand {
| + | |
− | padding: 0px;
| + | |
| } | | } |
− | .navbar-brand>img {
| + | #team-photos .thumbnail { |
− | height: 100%;
| + | margin:0 15px; |
− | padding: 0 0 10px 20px;
| + | padding-bottom:0; |
− | width: auto;
| + | background-color:#ededed; |
| + | } |
| + | #team-photos .thumbnail img { |
| + | margin:0; |
| + | padding:0; |
| } | | } |
− | .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;}
| + | #team-photos .thumbnail .caption { |
− | .slide {
| + | background-color:#333; |
− | animation-name: slide;
| + | position:relative; |
− | -webkit-animation-name: slide;
| + | color:#fff !important; |
− | animation-duration: 1s;
| + | margin-top:0 !important; |
− | -webkit-animation-duration: 1s;
| + | padding:0; |
− | visibility: visible;
| + | height:70px; |
− | }
| + | overflow:hidden; |
− | @keyframes slide {
| + | -webkit-transition: height 0.5s ease-out, background-color 0.5s; |
− | 0% { | + | transition: height 0.5s ease-out, background-color 0.5s; |
− | opacity: 0;
| + | } |
− | transform: translateY(70%);
| + | #team-photos .thumbnail .caption:after { |
− | } | + | background-color:#ededed; |
− | 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 {
| + | #team-photos .thumbnail .caption h3 { |
− | padding-top: 10rem;
| + | font-family:'Segoe UI Light'; |
− | padding-bottom: calc(10rem - 56px);
| + | text-transform:uppercase; |
− | background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
| + | font-weight:600; |
− | width:100%;
| + | font-size:18px; |
− | overflow: hidden;
| + | margin-top:0 !important; |
− | min-height: 700px; | + | padding:15px 0 0 0; |
− | /* Create the parallax scrolling effect */ | + | |
− | background-attachment: fixed;
| + | |
− | background-position: center; | + | |
− | background-repeat: no-repeat; | + | |
− | background-size: cover; | + | |
| | | |
| } | | } |
− | .parallax-window {
| + | #team-photos .thumbnail .caption h5 { |
− | min-height: 700px; | + | font-family:'Segoe UI Light'; |
− | background: transparent; | + | font-size:16px; |
| + | font-weight: bold; |
| + | margin-top:0 !important; |
| + | padding:5px 0 5px 0; |
| + | |
| } | | } |
− | #abstract p, #abstract ol {
| + | #team-photos .thumbnail .caption p { |
− | text-align: justify;
| + | font-family:'Segoe UI'; |
− | }
| + | font-size:14px; |
− | #myBtn {
| + | font-weight:400 !important; |
− | display: none;
| + | margin-top:0 !important; |
− |
| + | color:#fff !important; |
− | position: fixed;
| + | padding:5px 12px 5px 12px; |
− | 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;
| + | |
| } | | } |
| + | #team-photos .thumbnail .caption:hover { |
| + | background-color:#0186ac !important; |
| + | height:200px !important; |
| + | -webkit-transition: height 0.5s ease-in, background-color 0.5s; |
| + | transition: height 0.5s ease-in, background-color 0.5s; |
| + | } |
| + | @media screen and (max-width: 600px){ |
| + | #team-photos .thumbnail { |
| + | margin-top:20px; |
| + | } |
| + | } |
| + | .arrow-right { |
| + | -ms-transform: rotate(90deg); /* IE 9 */ |
| + | -webkit-transform: rotate(90deg); /* Safari 3-8 */ |
| + | transform: rotate(90deg); |
| + | margin-top: 70% |
| | | |
− | #myBtn:hover {
| + | } |
− | background-color: #555;
| + | .arrow-right img, .arrow-left img { |
| + | width:30px; |
| + | } |
| + | .arrow-left{ |
| + | -ms-transform: rotate(270deg); /* IE 9 */ |
| + | -webkit-transform: rotate(270deg); /* Safari 3-8 */ |
| + | transform: rotate(270deg); |
| + | margin-top: 70% |
| } | | } |
| | | |
− | .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
| + | .arrowdown { |
− | background: #fff !important;
| + | margin-left:42%; |
− | color:#0186ac !important;
| + | width: 0; |
− | }
| + | height: 0; |
− | .navbar-right .dropdown-menu {
| + | border-left: 15px solid transparent; |
− |
| + | border-right: 15px solid transparent; |
− | }
| + | background-color:#ededed; |
− | @media screen and (min-width: 600px) {
| + | border-top: 20px solid #333; |
− | .dropdown:hover .dropdown-menu {
| + | |
− | display: block;
| + | } |
− | margin-top: 0;
| + | |
− | color:#fff;
| + | |
| + | #thumb:hover #arrow-daniel { |
| + | background-color:#ededed !important; |
| } | | } |
− | #mainMenu .dropdown-menu {
| |
− | border:0 !important;
| |
− | right:auto !important;
| |
− | border-radius: 0 !important;
| |
− | text-transform: capitalize;
| |
− | font-size:18px;
| |
− | }
| |
− | #mainMenu .dropdown-menu li:hover {
| |
− | color:#0186ac !important;
| |
− | background: transparent;
| |
− | }
| |
− | }
| |
− | .gray-section {
| |
− | 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;
| |
− |
| |
− | /* Create the parallax scrolling effect */
| |
− | background-attachment: fixed;
| |
− | background-position: top center;
| |
− | background-repeat: no-repeat;
| |
− | background-size: cover;
| |
− | }
| |
− | </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 id="mainMenu" 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="index.html"><img src="https://static.igem.org/mediawiki/2018/3/32/T--BGU_Israel--logo_colored.png"></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 class="dropdown">
| |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Project
| |
− | </a>
| |
− | <ul class="dropdown-menu pull-right">
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/Description ">Description</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/Design">Design</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/Results">Results</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Protocols">Protocols</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Notebook">Notebook</a></li>
| |
− |
| |
− | </ul>
| |
− | </li>
| |
− | <li class="dropdown">
| |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Team
| |
− | </a>
| |
− | <ul class="dropdown-menu pull-right">
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/Team">Members</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/Collaborations">Collaborations</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li class="dropdown">
| |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Parts
| |
− | </a>
| |
− | <ul class="dropdown-menu pull-right">
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/Parts">Team Parts</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/BasicParts ">Basic Parts</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/PartImprovement">Part Improvement</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/PartCollection">Part Collection</a></li>
| |
− | </ul>
| |
− | </li>
| |
| | | |
− | <li class="dropdown">
| |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Practices
| |
| | | |
− | </a>
| |
− | <ul class="dropdown-menu pull-right">
| |
− | <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSConference">ALS Conference</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSFunding">Funding Race</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_Israel/InterLab">InterLab</a></li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/EthicsAndSafety">Ethics and Safty</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Attributions">Attributions</a></li>
| |
− | <!--<li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Achievments">Achievments</a></li>-->
| |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− | </nav>
| |
− | <header class="sub-page-header text-center">
| |
− | <div class="container my-auto">
| |
− | <h1>Integrated Human Practices</h1>
| |
− | </div>
| |
− | </header>
| |
| | | |
| + | |
| + | |
| + | |
| + | |
| + | |
| + | #sup-photos .thumbnail { |
| + | margin:0 15px; |
| + | padding-bottom:0; |
| + | background-color:#ededed; |
| + | } |
| + | #tsup-photos .thumbnail img { |
| + | margin:0; |
| + | padding:0; |
| + | } |
| + | |
| + | #sup-photos .thumbnail .caption { |
| + | background-color:#333; |
| + | position:relative; |
| + | color:#fff !important; |
| + | margin-top:0 !important; |
| + | padding:0; |
| + | height:85px; |
| + | overflow:hidden; |
| + | } |
| + | |
| + | #sup-photos .thumbnail .caption h3 { |
| + | font-family:'Segoe UI Light'; |
| + | text-transform:uppercase; |
| + | font-weight:600; |
| + | font-size:18px; |
| + | margin-top:0 !important; |
| + | padding:15px 0 0 0; |
| + | |
| + | } |
| + | #sup-photos .thumbnail .caption h5 { |
| + | font-family:'Segoe UI light'; |
| + | font-size:16px; |
| + | |
| + | margin-top:0 !important; |
| + | padding:5px 0 5px 0; |
| + | |
| + | } |
| + | #sup-photos .thumbnail .caption p { |
| + | font-family:'Segoe UI'; |
| + | font-size:14px; |
| + | font-weight:400 !important; |
| + | margin-top:0 !important; |
| + | color:#fff !important; |
| + | padding:5px 12px 5px 12px; |
| + | |
| + | } |
| + | |
| + | |
| + | </style> |
| <!-- Container (About Section) --> | | <!-- Container (About Section) --> |
− | <div id="abstract" class="container-fluid text-center">
| |
− | <div class="row">
| |
− | <div class="col-sm-8 col-sm-offset-2">
| |
| | | |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">It all began in the summer of 2017, the newly recruited iGEM-BGU team was tasked with choosing a topic for our iGEM project. Many ideas were proposed but one idea resonated with us. Liat Tsoran, one of our team members, told us her personal story. Liat’s father, Nir Tsoran, was diagnosed with ALS when Liat was only eleven years old. For seven years (longer than the average patient’s survival rate), Liat witnessed her father’s health, deteriorates from a fully functional adult to a man trapped inside his body. Throughout his ordeal, Nir did not let his disease prevent him from being an exemplary father and advocate. He served as the CEO of IsrALS, an Israeli non-profit organization committed to supporting ALS patients, their families, and promoting ALS research in Israel. Nir took this budding non-profit and the very small Israeli ALS scientific community and turned it into an influential strong local movement. Since her father’s diagnosis, Liat has been dedicating her life to understanding the disease and hopes, to one day contribute to finding a cure. Once we heard Liat’s story, the whole team enlisted to join her efforts. We suddenly understood that the “Ice Bucket Challenge” was not just a fun activity but a necessary step in bringing awareness to a devastating disease which has not received the exposure required to promote significant research for a cure.
| + | <div id="team-photos" class="bg-grey"> |
− | </p> | + | <div class="container"> |
− | </div>
| + | <div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> |
− | </div> | + | |
− | </div>
| + | |
| | | |
| + | <!-- MorP--> |
| + | <div class="carousel-inner" role="listbox"> |
| + | <div class="item active" style="background:#ededed!important"> |
| + | <div class="row"> |
| + | <div class="col-sm-6 col-md-4"> |
| + | <div id="thumb" class="thumbnail"> |
| + | <img src="https://static.igem.org/mediawiki/2018/0/00/T--BGU_Israel--team_morp_color.jpg" alt="..."> |
| + | <div id="caption-daniel" class="caption"> |
| + | <h3>Mor Pasi</h3> |
| + | <h5>Team Leader<h5> |
| + | <p style="text-align:left!important;font-size:14px!important"> |
| + | <u>Degree</u>: Biotechnology engineering<br/> |
| + | <u>Super name</u>: Plasmida<br/> |
| + | <u>Power</u>: Uses the Plasmids of Justice to introduce a bit of logic into each cell that dares to confront her.<br/></p> |
| + | </div> |
| + | |
| + | </div> |
| + | </div> |
| + | <!-- Liat --> |
| + | <div class="col-sm-6 col-md-4"> |
| + | <div class="thumbnail"> |
| + | <img src="https://static.igem.org/mediawiki/2018/7/76/T--BGU_Israel--team_lia_color.jpg" alt="..."> |
| + | <div class="caption"> |
| + | <h3>Liat Tsoran</h3> |
| + | <h5>Project Idea<h5> |
| + | <p style="text-align:left!important;font-size:14px!important"> |
| + | <u>Degree</u>: Biology<br/> |
| + | <u>Super name</u>: Glia-girl<br/> |
| + | <u>Power</u>: Can telepathically control all the nervous system cells of her enemies – she will blow your mind.</p> |
| + | </div> |
| + | |
| + | </div> |
| + | </div> |
| | | |
− | <div class="bg-grey"> | + | <!-- Nitzan --> |
− | <div class="container text-center"> | + | <div class="col-sm-6 col-md-4"> |
− | <div class="row"> | + | <div class="thumbnail"> |
− | <h1>Efrat Carmy</h1> | + | <img src="https://static.igem.org/mediawiki/2018/e/e6/T--BGU_Israel--team_nit_color.jpg" alt="..."> |
− | <div class="col-sm-7"> | + | <div class="caption"> |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">One of our first steps when delving into this area of research was meeting with Efrat Carmi, CEO of IsrALS, who had inherited the position from Liat’s father. From this discussion we understood the gravity of this disease, how it decimates a person’s life in a rapid and irreversible way. How ALS research and awareness was, until recently, marginalized due to the rarity of the disease and the small size of the patients population (due to the disease’ aggressiveness). We heard about the challenges of finding a cure for a disease which is only 10% familial, leaving the other 90% of patients even further from a cure. From this important meeting we drew a few conclusions crucial to the development of our project: that there is a need for a general approach which will cover the whole patients population and the significance of a therapy which would (to any degree) lengthen patient survival and quality of life, regardless of the origin of the disease. Throughout this conversation we also understood the sensitivity of the matter to the patients and their loved ones. The necessity in exploring and presenting our ideas in a way that does not give false hope. These core principles guided us throughout our research and when delivering our message to ALS patients and the general public.
| + | <h3>Nitzan Keidar</h3> |
− | </p> | + | <h5>Promotor assays<h5> |
− |
| + | <p style="text-align:left!important;font-size:14px!important"> |
− | </div> | + | <u>Degree</u>: Biology<br/> |
− | <div class="col-sm-5">
| + | <u>Super name</u>: UV woman<br/> |
− | <img src="dark-lab.jpg" class="img-responsive" alt="Responsive image">
| + | <u>Power</u>: Her eyes radiate UV rays that can sterilize any surface in a blink of an eye and give a great suntan.</p> |
− |
| + | |
| </div> | | </div> |
− | | + | |
| + | </div> |
| </div> | | </div> |
− | </div> | + | </div> |
− | </div>
| + | </div> |
− | <div class="bg-white">
| + | |
− | <div class="container text-center">
| + | |
− | <div class="row">
| + | |
− | <h1>Adrian</h1> | + | |
− | <div class="col-sm-5">
| + | |
− | <img src="dark-lab.jpg" class="img-responsive">
| + | |
− | </div> | + | |
| | | |
− | <div class="col-sm-7"> | + | <!-- MorS --> |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">Next step was to thoroughly review available scientific information. Along with an in-depth review of the of the scientific literature we met with Dr. Adrian Israelson, PI of an ALS lab at Ben-Gurion university. Adrian described the budding interest in focusing on glial cells in ALS research. He has also described the unsuccessful attempts made to return the reactive Astrocytes to their healthy form. We identified that a focus on the microglia cells as relevant to our desire to develop a therapy applicable to all ALS cases, familial and sporadic alike! </p> | + | <div class="item" style="background:#ededed!important"> |
− | </div> | + | <div class="row"> |
− | </div> | + | <div class="col-sm-6 col-md-4"> |
− | </div> | + | <div class="thumbnail"> |
− | </div> | + | <img src="https://static.igem.org/mediawiki/2018/e/e7/T--BGU_Israel--team_mors_color.jpg" alt="..."> |
| + | <div class="caption"> |
| + | <h3>Mor Sela</h3> |
| + | <h5>Astrocyte Activation<h5> |
| + | <p style="text-align:left!important;font-size:14px!important"> |
| + | <u>Degree</u>: Chemistry <br/> |
| + | <u>Super name</u>: Reagenta<br/> |
| + | <u>Power</u>: Chemistry superhero! She can make reagents and solution from thin air and uses them for her advantage.</p> |
| + | </div> |
| + | |
| + | </div> |
| + | </div> |
| | | |
| + | <!-- Ori --> |
| + | <div class="col-sm-6 col-md-4"> |
| + | <div class="thumbnail"> |
| + | <img src="https://static.igem.org/mediawiki/2018/a/af/T--BGU_Israel--team_ori_color.jpg" alt="..."> |
| + | <div class="caption"> |
| + | <h3>Ori tulchinsky</h3> |
| + | <h5>Virus Infections<h5> |
| + | <p style="text-align:left!important;font-size:14px!important"> |
| + | <u>Degree</u>: Medicine<br/> |
| + | <u>Super name</u>: Virio<br/> |
| + | <u>Power</u>: Evil genius who uses engineered viruses that allow him to infect innocent people and control their thoughts</p> |
| + | </div> |
| + | |
| + | </div> |
| + | </div> |
| | | |
− | <div class="bg-grey"> | + | <!-- Daniel --> |
− | <div class="container text-center"> | + | <div class="col-sm-6 col-md-4"> |
− | <div class="row"> | + | <div class="thumbnail"> |
− | <h1>Boomerang</h1> | + | <img src="https://static.igem.org/mediawiki/2018/b/b2/T--BGU_Israel--team_dan_color.jpg" alt="..."> |
− | <div class="col-sm-7"> | + | <div class="caption"> |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">At this point we focused our interest on the Microglia and Astrocyte cells. Through our reading we identified the NFkB pathway as a target for cytokine knockdown in Microglia. However, we still needed to figure out how to tackle the reactive Astrocytes. As currently there is no way to reverse reactive astrocytes state to their resting state. The only viable option seemed to be to kill the reactive astrocyte cells. With this idea in mind, we were reminded of the 2015 BGU-iGEM project, Boomerang. This team used a double-plasmid system delivered by viruses in order to specifically target and kill cancer cells. The system answered many of our needs. It provided specificity by splitting the CasperCas9 enzyme and the gRNA components onto two different plasmids. We gave this plan an extra boost by choosing viruses which specifically infect only our target cells. At this point we had a concrete work plan! However, we still had reservations about approaching brain cells like cancer cells, unwanted cells we wish to kill. On top of this, we were concerned about suggesting the use of viruses in a therapy for humans. </p>
| + | <h3>Daniel Deitch</h3> |
− |
| + | <h5>Designer<h5> |
− | </div> | + | <p style="text-align:left!important;font-size:14px!important"> |
− | <div class="col-sm-5">
| + | <u>Degree</u>: Biology-Psychology<br/> |
− | <img src="dark-lab.jpg" class="img-responsive" alt="Responsive image">
| + | <u>Super name</u>: Agar Boi<br/> |
− |
| + | <u>Power</u>: A powerful superhero that can shoot hot agarose from its hands, when its cools, the criminals get stuck in the gel!</p> |
| </div> | | </div> |
− | | + | |
| + | </div> |
| </div> | | </div> |
− | </div> | + | </div> |
− | </div> | + | </div> |
| | | |
− | <div class="bg-white">
| + | <!-- Avital --> |
− | <div class="container text-center"> | + | <div class="item" style="background:#ededed!important"> |
− | <div class="row">
| + | <div class="row"> |
− | <h1>Dr. Perry Nisen</h1>
| + | <div class="col-sm-6 col-md-4"> |
− | <div class="col-sm-5">
| + | <div class="thumbnail"> |
− | <img src="dark-lab.jpg" class="img-responsive">
| + | <img src="https://static.igem.org/mediawiki/2018/a/a3/T--BGU_Israel--team_avi_color.jpg" alt="..."> |
− | </div> | + | <div class="caption"> |
| + | <h3>Avital Bailen</h3> |
| + | <h5>Human Practices<h5> |
| + | <p style="text-align:left!important;font-size:14px!important"> |
| + | <u>Degree</u>: Biology<br/> |
| + | <u>Super name</u>: Falcon girl<br/> |
| + | <u>Power</u>: A talented sniper who uses her Falcon rifle to hit a target from miles. Specializes in 50 ml rounds.</p> |
| + | </div> |
| + | |
| + | </div> |
| + | </div> |
| | | |
− | <div class="col-sm-7"> | + | <!-- Sagi --> |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">Luckily, we met with Dr. Perry Nisen, a member of the Board of Directors of Teva Pharmaceuticals. Dr. Nisen is an expert in neurodegenerative disease and a leader in the pharmaceutical industry. We presented our hypothesis and research plan to Dr. Nisen and then discussed our misgivings. An in-depth discussion regarding ethical dilemmas concerning genetic engineering, virus delivery, and the risk in killing central nervous system (CNS) cells led us to the following conclusions: Although genetic engineering is currently controversial, iGEM and Synthetic Biology aim to harness this technology for human advancements. Exploring these methods is the only way to make them safe and viable. We concluded that currently virus delivery is not ideal or accepted for drug delivery, however in the research phase it will give us a better chance of reaching proof of concept. Finally, although killing CNS cells may sound drastic, ALS is a fatal, aggressive disease. The benefits must be weighed against the risks. We believe that prolonging ALS patients’ survival indeed justifies this risk.
| + | <div class="col-sm-6 col-md-4"> |
− | </p>
| + | <div class="thumbnail"> |
− | </div>
| + | <img src="https://static.igem.org/mediawiki/2018/8/81/T--BGU_Israel--team_sag_color.jpg" alt="..."> |
− | </div>
| + | <div class="caption"> |
− | </div>
| + | <h3>Sagi Angel</h3> |
− | </div>
| + | <h5>Social Media<h5> |
− | | + | <p style="text-align:left!important;font-size:14px!important"> |
− | <div class="bg-grey">
| + | <u>Degree</u>: Biotechnology engineering<br/> |
− | <div class="container text-center">
| + | <u>Super name</u>: Incubato<br/> |
− | <div class="row"> | + | <u>Power</u>: With the amazing power of heating things to exactly 37C and to vibrate his hands at 240 rpm.</p> |
− | <h1>ALS race and IGEM on the bar</h1> | + | |
− | <div class="col-sm-7"> | + | |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">From this point we were ready to enter the lab phase of our project. In addition, we began planning our human practice activities. As we were aware of how sensitive it may be to present preliminary research to ALS patients and their families, we decided against presenting our project to this community. Rather, we would show our support through volunteering and participating in the annual isrALS fundraising race. Still we felt strongly about promoting awareness about ALS and Synthetic Biology. We realized that science, specifically synthetic biology projects, can only be implemented efficiently if there is a public support. Therefore, the first step is to promote awareness and understanding of such a project. This is why we hosted “iGEM on the Bar”. We invited our peers, colleagues, and the public to an evening at a local pub, with a small entrance fee, where we presented our project and invited our guests to donate or join the annual ALS race. All proceeds from this event were donated to the ALS community. </p>
| + | |
− |
| + | |
− | </div> | + | |
− | <div class="col-sm-5">
| + | |
− | <img src="dark-lab.jpg" class="img-responsive" alt="Responsive image">
| + | |
− |
| + | |
| </div> | | </div> |
− | | + | |
| + | </div> |
| </div> | | </div> |
− | </div> | + | <!-- Einan --> |
− | </div> | + | <div class="col-sm-6 col-md-4"> |
| + | <div class="thumbnail"> |
| + | <img src="https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--team_ein_color.jpg" alt="..."> |
| + | <div class="caption"> |
| + | <h3>Einan Farhi</h3> |
| + | <h5>Transfections<h5> |
| + | <p style="text-align:left!important;font-size:14px!important"> |
| + | <u>Degree</u>: Biology<br/> |
| + | <u>Super name</u>: Articleman<br/> |
| + | <u>Power</u>: Remember every article he touches and uses the knowledge he earn to outwit his opponents.</p> |
| + | </div> |
| + | |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
| + | <!-- Left and right controls --> |
| + | <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> |
| + | <div class="arrow-left"> |
| + | <img src="https://static.igem.org/mediawiki/2018/0/0d/T--BGU_Israel--team_arrow_dark.png"> |
| + | </img></div> |
| + | |
| + | </a> |
| + | <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> |
| + | <div class="arrow-right"> |
| + | <img src="https://static.igem.org/mediawiki/2018/0/0d/T--BGU_Israel--team_arrow_dark.png"> |
| + | </img></div> |
| | | |
− | <div class="bg-white">
| + | </a> |
− | <div class="container text-center">
| + | </div> |
− | <div class="row"> | + | |
− | <h1>ALS conference</h1>
| + | |
− | <div class="col-sm-5">
| + | |
− | <img src="dark-lab.jpg" class="img-responsive">
| + | |
− | </div>
| + | |
− | | + | |
− | <div class="col-sm-7">
| + | |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">As we mentioned previously, the community of ALS research labs in Israel was very limited until recently. Still, as this is a small country, the budding community is still rather small, yet impressive. We were touched by how this community embraced us when we began our project. Any lab we talked to was more than happy to help point us in the right direction, teach us new tools, or provide access to equipment. We were compelled to do something in return, so we organized the annual ALS Research Conference at the Ben-Gurion University of the Negev (our University). The conference was a great success! Not only did we hear from the leading experts in ALS research, we were able to present our project for the first time in a scientific setting. Our presentation received encouraging responses. The community seemed truly excited by our idea and the questions we received were not about the viability of the idea, rather they were insightful thoughts regarding research methods. Many researchers offered their inputs and assistance to aid us in proceeding with our project. One of these researchers, was Dr. Dinorah Friedmann-Morvinski from Tel-Aviv University.
| + | |
− | </p>
| + | |
| </div> | | </div> |
| </div> | | </div> |
Line 486: |
Line 351: |
| </div> | | </div> |
| | | |
− | <div class="bg-grey">
| |
− | <div class="container text-center">
| |
− | <div class="row">
| |
− | <h1>Dino</h1>
| |
− | <div class="col-sm-7">
| |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">Around the time of convention, we faced a major lab roadblock. We were having trouble infecting our cells with the plasmids we had designed, due to their size and the sensitivity of the CNS cell lines. Without the ability to insert our plasmids, we had no way of implementing our system. This is when Dr. Friedmann stepped in. Dr. Friedmann heard about our struggles and offered a project-saving solution. Her research group works with plasmids which implement knockdown of genes in the NFkB pathway and delivers these plasmids with viruses. Dr. Friedman was instrumental in teaching us infection techniques and providing us with plasmids from her lab. This collaboration meant, that even if we did not succeed in implementing our designed plasmids before the competition, we would still be able to achieve a proof of concept.
| |
− | </p>
| |
− |
| |
− | </div>
| |
− | <div class="col-sm-5">
| |
− | <img src="dark-lab.jpg" class="img-responsive" alt="Responsive image">
| |
− |
| |
− | </div>
| |
− |
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
| | | |
| <div class="bg-white"> | | <div class="bg-white"> |
| <div class="container text-center"> | | <div class="container text-center"> |
| <div class="row"> | | <div class="row"> |
− | <h1>host a group of high-school </h1> | + | <h1>Supervisors</h1> |
− | | + | |
− | <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">Our project would not have succeeded without our Human Practices. Our goals and implementation were all a result of involvement in the communities around us and sharing our ideas through discussions with experts. Science cannot proceed unaided and cannot succeed without public support. As a final gesture, we were delighted to host a group of high-school students in our lab. We had a great time explaining to them about iGEM, our project, and our lab. Although we ourselves as undergraduate students are only at the beginning of our scientific careers, it was wonderful to transfer the knowledge we have gathered to a new generation.
| + | |
− | <br><br><br></p>
| + | |
| | | |
| </div> | | </div> |
− | <div class="row"> | + | <div id="sup-photos" class="row"> |
− | <div class="col-sm-4"> | + | <div class="col-sm-3"> |
− | <img src="dark-lab.jpg" class="img-responsive">
| + | <div class="thumbnail"> |
− | <h3>title</h3> | + | <img src="https://static.igem.org/mediawiki/2018/f/f1/T--BGU_Israel--team_lital.png" alt="..."> |
− | <p>lorem ipsum bf fd kdfdfkdflsdf</p> | + | <div class="caption"> |
| + | <h3>PROF. LITAL ALFONTA</h3> |
| + | <h5><b>Principal Investigator</b><h5><br/><br/> |
| </div> | | </div> |
− | <div class="col-sm-4">
| |
− | <img src="dark-lab.jpg" class="img-responsive">
| |
− | <h3>title</h3>
| |
− | <p>lorem ipsum bf fd kdfdfkdflsdf</p>
| |
| </div> | | </div> |
− | <div class="col-sm-4">
| |
− | <img src="dark-lab.jpg" class="img-responsive">
| |
− | <h3>title</h3>
| |
− | <p>lorem ipsum bf fd kdfdfkdflsdf</p>
| |
| </div> | | </div> |
− |
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
| | | |
| | | |
− | <style>
| |
− | .footer-list {
| |
− | list-style: none;
| |
− | color:#fff;
| |
− | }
| |
− | .footer-list-item {
| |
− | padding:20px 0 20px 0 !important;
| |
− | border-bottom: 1px solid #fff;
| |
− | }
| |
− | .footer-list .footer-list-item:last-child {
| |
− | border:0;
| |
− | }
| |
− | .container-fluid {
| |
− | padding: 60px 50px;
| |
− | }
| |
| | | |
− | .bg-grey { | + | <div class="col-sm-3"> |
− | background-color:#ededed;
| + | <div class="thumbnail"> |
− | color:#000;
| + | <img src="https://static.igem.org/mediawiki/2018/a/af/T--BGU_Israel--team_ramon.png" alt="..."> |
− | padding: 60px 50px;
| + | <div class="caption"> |
− | }
| + | <h3>Dr. Ramon Birnbaum</h3> |
− | .bg-white {
| + | <h5><b>Principal Investigator</b><h5><br/><br/> |
− | background-color:#fff;
| + | </div> |
− | color:#000;
| + | </div> |
− | padding: 60px 50px;
| + | </div> |
− | }
| + | |
− | .bg-dark {
| + | |
− | background-color:#262626;
| + | |
− |
| + | |
− | padding: 60px 50px;
| + | |
− | }
| + | |
− | .bg-dark h1 { | + | |
− | color:#fff !important;
| + | |
− |
| + | |
− | }
| + | |
− | footer.bg-dark p {
| + | |
− | color:#ededed !important; | + | |
− | }
| + | |
− | .social-icons {
| + | |
− | display: inline; | + | |
− | height:20px; | + | |
− | width:20px; | + | |
− | margin-right:10px; | + | |
− | }
| + | |
| | | |
− | </style> | + | <div class="col-sm-3"> |
| + | <div class="thumbnail"> |
| + | <img src="https://static.igem.org/mediawiki/2018/7/74/T--BGU_Israel--team_dror.png" alt="..."> |
| + | <div class="caption"> |
| + | <h3>Dror Aizik</h3> |
| + | <h5><b>Instructor</b><h5><br/><br/> |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
− | <footer class="bg-dark">
| + | <div class="col-sm-3"> |
− | <div class="container my-auto">
| + | <div class="thumbnail"> |
− | <div class="row">
| + | <img src="https://static.igem.org/mediawiki/2018/3/34/T--BGU_Israel--team_eden.png" alt="..."> |
− | <div class="col-md-4"> | + | <div class="caption"> |
− | <h3>About OrignALS</h3>
| + | <h3>Eden Ozer</h3> |
− | <p><br>Established in 2006, EchoSense Ltd. develops innovative ultrasound Doppler systems for the diagnosis and monitoring of cardiac and pulmonary diseases. EchoSense delivers a fast,reliable and non-invasive method of diagnosis and our technology has undergone successful clinical trials in the United States, Europe and Israel. The Echosense research and development center is based in Haifa, Israel.</p>
| + | <h5><b>Instructor</b><h5><br/><br/> |
− | <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/f/f0/T--BGU_Israel--originals_white.png" width="50%">
| + | </div> |
− |
| + | </div> |
− | <img class="img-responsive" src="">
| + | |
− | </div>
| + | |
− | <div class="col-md-4">
| + | |
− | <ul class="footer-list">
| + | |
− | <h3>Keep in Touch</h3>
| + | |
− |
| + | |
− | <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/3/3c/T--BGU_Israel--facebook.png" > @iGEMBGU</li>
| + | |
− | <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/e/e9/T--BGU_Israel--instagram.png" >@igem_2018_bgu</li>
| + | |
− | <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/2/26/T--BGU_Israel--twitter.jpg" > @originalsbgu</li>
| + | |
− | <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/8/83/T--BGU_Israel--email.png" > bgu_israel@gmail.com</li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="col-md-4">
| + | |
− | <ul class="footer-list">
| + | |
− | <h3>Address</h3>
| + | |
− | <li class="footer-list-item">Ben-Gurion University of the Negev<br>
| + | |
− | Ben Gurion 1, Beer Sheva 8410501, Israel</li>
| + | |
− |
| + | |
− | <li class="footer-list-item"><img class="responsive-img" src="https://static.igem.org/mediawiki/2018/a/a5/T--BGU_Israel--bgu_white.png"></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− |
| + | |
− | </div> | + | |
| </div> | | </div> |
− | </footer>
| |
| | | |
− | <script>
| + | </div> |
− | $(document).ready(function(){
| + | </div> |
− | // Add smooth scrolling to all links in navbar + footer link
| + | </div> |
− | $(".navbar a, #myBtn[href='#top']").on('click', function(event) {
| + | |
− | // Make sure this.hash has a value before overriding default behavior | + | |
− | if (this.hash !== "") {
| + | |
− | // Prevent default anchor click behavior
| + | |
− | event.preventDefault();
| + | |
− | | + | |
− | // Store hash
| + | |
− | var hash = this.hash;
| + | |
− | | + | |
− | // 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 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>
| + | |
− | // When the user scrolls down 20px from the top of the document, show the button
| + | |
− | $(window).scroll(function() {
| + | |
− | if ($(this).scrollTop() > 20) {
| + | |
− | $('#myBtn').fadeIn(400);
| + | |
− | } else {
| + | |
− | $('#myBtn').fadeOut(400);
| + | |
− | }
| + | |
− | });
| + | |
| | | |
− | </script>
| |
| </body> | | </body> |
| </html> | | </html> |
| + | {{Template:BGU_Israel/footer}} |