|
|
| Line 3: |
Line 3: |
| | <html lang="en"> | | <html lang="en"> |
| | <head> | | <head> |
| − |
| |
| − | <title>OriginALS</title>
| |
| − | <meta charset="utf-8">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <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;
| |
| − | }
| |
| − | ul{
| |
| − | margin:0;
| |
| − | padding:0 20px;
| |
| − | }
| |
| − | ul li {
| |
| − | padding:0;
| |
| − | margin:10px 0;
| |
| − | }
| |
| − | h1 {
| |
| − | font-size: 32px!important;
| |
| − | font-family: Segoe UI Light!important;
| |
| − | text-transform: capitalize;
| |
| − | 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;
| |
| − |
| |
| − | 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;
| |
| − | color:#000;
| |
| − | padding: 60px 50px;
| |
| − | }
| |
| − | .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 {
| |
| − | height: 100%;
| |
| − | padding: 0 0 10px 20px;
| |
| − | width: auto;
| |
| − | }
| |
| − | .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');
| |
| − | width:100%;
| |
| − | overflow: hidden;
| |
| − | min-height: 700px;
| |
| − | /* Create the parallax scrolling effect */
| |
| − | background-attachment: fixed;
| |
| − | background-position: center;
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: cover;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-device-width: 1366px) {
| |
| − | .masthead {
| |
| − | background-attachment: scroll;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #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;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
| |
| − | background: #fff !important;
| |
| − | color:#0186ac !important;
| |
| − | }
| |
| − | .navbar-right .dropdown-menu {
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media screen and (min-width: 600px) {
| |
| − | .dropdown:hover .dropdown-menu {
| |
| − | display: block;
| |
| − | margin-top: 0;
| |
| − | color:#fff;
| |
| − | }
| |
| − | #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;
| |
| − | }
| |
| − | }
| |
| − | #video {
| |
| − | background-color:#ededed;
| |
| − | }
| |
| − |
| |
| − | </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>
| |
| − | <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="masthead text-center">
| |
| − | <div class="container my-auto">
| |
| − | </div>
| |
| − | </header>
| |
| | | | |
| | <!-- Container (About Section) --> | | <!-- Container (About Section) --> |
| Line 410: |
Line 39: |
| | </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 {
| |
| − | background-color:#ededed;
| |
| − | color:#000;
| |
| − | padding: 60px 50px;
| |
| − | }
| |
| − | .bg-white {
| |
| − | background-color:#fff;
| |
| − | color:#000;
| |
| − | padding: 60px 50px;
| |
| − | }
| |
| − | .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>
| |
| | | | |
| | <footer class="bg-dark"> | | <footer class="bg-dark"> |
| Line 491: |
Line 75: |
| | </footer> | | </footer> |
| | | | |
| − | <script>
| |
| − | $(document).ready(function(){
| |
| − | // Add smooth scrolling to all links in navbar + footer link
| |
| − | $(".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> |
<!DOCTYPE html>