|
|
| Line 19: |
Line 19: |
| | color: #818181; | | 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;
| |
| − | 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; | | border-radius: 0; |
| | } | | } |
| Line 93: |
Line 32: |
| | .carousel-indicators li { | | .carousel-indicators li { |
| | border-color: #f4511e; | | border-color: #f4511e; |
| | + | position:relative; |
| | + | left:-57%; |
| | + | text-align:left; |
| | + | |
| | } | | } |
| | .carousel-indicators li.active { | | .carousel-indicators li.active { |
| | background-color: #f4511e; | | background-color: #f4511e; |
| | + | position:relative; |
| | + | left:-57%; |
| | + | text-align:left; |
| | + | |
| | } | | } |
| | .item h4 { | | .item h4 { |
| Line 218: |
Line 165: |
| | } | | } |
| | | | |
| − | header.masthead {
| + | header.masthead { |
| | padding-top: 10rem; | | padding-top: 10rem; |
| | padding-bottom: calc(10rem - 56px); | | padding-bottom: calc(10rem - 56px); |
| | background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg'); | | background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg'); |
| − | width:100%;
| + | min-height: 600px; |
| − | overflow: hidden;
| + | background-position: center center; |
| − | min-height: 700px;
| + | -webkit-background-size: cover; |
| − | /* Create the parallax scrolling effect */
| + | -moz-background-size: cover; |
| − | background-attachment: fixed;
| + | -o-background-size: cover; |
| − | background-position: center;
| + | background-size: cover; |
| − | background-repeat: no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − |
| + | |
| | } | | } |
| − | .parallax-window {
| + | @media only screen and (max-device-width: 1366px) { |
| − | min-height: 700px; | + | .parallax { |
| − | background: transparent; | + | background-attachment: scroll; |
| | + | } |
| | } | | } |
| | #abstract p, #abstract ol { | | #abstract p, #abstract ol { |
| Line 259: |
Line 204: |
| | background-color: #555; | | background-color: #555; |
| | } | | } |
| − | | + | footer { |
| | + | background-color:#262626; |
| | + | color:#fff !important; |
| | + | } |
| | .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { | | .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { |
| | background: #fff !important; | | background: #fff !important; |
| Line 267: |
Line 215: |
| | | | |
| | } | | } |
| − | @media screen and (min-width: 600px) {
| + | #mainMenu .dropdown-menu { |
| − | .dropdown:hover .dropdown-menu { | + | |
| − | display: block;
| + | |
| − | margin-top: 0;
| + | |
| − | color:#fff;
| + | |
| − | }
| + | |
| − | #mainMenu .dropdown-menu {
| + | |
| | border:0 !important; | | border:0 !important; |
| | right:auto !important; | | right:auto !important; |
| Line 280: |
Line 222: |
| | font-size:18px; | | font-size:18px; |
| | } | | } |
| − | #mainMenu .dropdown-menu li:hover {
| + | @media screen and (min-width: 600px) { |
| − | color:#0186ac !important;
| + | .dropdown:hover .dropdown-menu { |
| − | background: transparent;
| + | display: block; |
| − | }
| + | margin-top: 0; |
| | + | color:#fff; |
| | + | } |
| | } | | } |
| | .gray-section { | | .gray-section { |
| | background-color:#ededed; | | background-color:#ededed; |
| | } | | } |
| − | .sub-page-header {
| + | .sub-page-header { |
| | padding-top: 10rem; | | padding-top: 10rem; |
| | padding-bottom: calc(10rem - 56px); | | padding-bottom: calc(10rem - 56px); |
| Line 304: |
Line 248: |
| | <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> | | <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> |
| | <div id="top"></div> | | <div id="top"></div> |
| − | <a id="myBtn" href="#top" title="To Top"> | + | <a id="myBtn" class="button" href="#top" title="To Top"> |
| | <span class="glyphicon glyphicon-chevron-up"></span> | | <span class="glyphicon glyphicon-chevron-up"></span> |
| | </a> | | </a> |
| | + | |
| | <nav id="mainMenu" class="navbar navbar-default navbar-fixed-top"> | | <nav id="mainMenu" class="navbar navbar-default navbar-fixed-top"> |
| | <div class="container"> | | <div class="container"> |
| Line 370: |
Line 315: |
| | <header class="sub-page-header text-center"> | | <header class="sub-page-header text-center"> |
| | <div class="container my-auto"> | | <div class="container my-auto"> |
| − | <h1>Meet the Team</h1> | + | <h1>Team</h1> |
| | </div> | | </div> |
| | </header> | | </header> |
| | | | |
| | + | <script> |
| | + | |
| | + | </script> |
| | <!-- Container (About Section) --> | | <!-- Container (About Section) --> |
| | <style> | | <style> |
| Line 588: |
Line 536: |
| | </div> | | </div> |
| | | | |
| − | <div class="bg-white"> | + | <!-- Left and right controls --> |
| − | <div class="container text-center"> | + | <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> |
| | + | <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> |
| | + | <span class="sr-only">Previous</span> |
| | + | </a> |
| | + | <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> |
| | + | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> |
| | + | <span class="sr-only">Next</span> |
| | + | </a> |
| | + | </div> |
| | + | </div> |
| | + | <div id="abstract" class="container text-center"> |
| | + | |
| | + | </div> |
| | + | <div id="video" class="container-fluid text-center gray-section"> |
| | <div class="row"> | | <div class="row"> |
| − | <h1>host a group of high-school </h1>
| + | <div class="col-sm-8 col-sm-offset-2"> |
| − | | + | <h1>Long Story Short</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> |
| − | <div class="row">
| |
| − | <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 class="col-sm-4">
| |
| − | <img src="dark-lab.jpg" class="img-responsive">
| |
| − | <h3>title</h3>
| |
| − | <p>lorem ipsum bf fd kdfdfkdflsdf</p>
| |
| − | </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> | | <style> |
| | .footer-list { | | .footer-list { |
| | list-style: none; | | list-style: none; |
| − | color:#fff; | + | color:#a5a5a5; |
| | } | | } |
| | .footer-list-item { | | .footer-list-item { |
| | padding:20px 0 20px 0 !important; | | padding:20px 0 20px 0 !important; |
| − | border-bottom: 1px solid #fff; | + | border-bottom: 1px solid #a5a5a5; |
| | } | | } |
| | .footer-list .footer-list-item:last-child { | | .footer-list .footer-list-item:last-child { |
| | border:0; | | 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> | | </style> |
| | | | |
| − | <footer class="bg-dark"> | + | <footer class="container-fluid"> |
| − | <div class="container my-auto">
| + | |
| | <div class="row"> | | <div class="row"> |
| | <div class="col-md-4"> | | <div class="col-md-4"> |
| − | <h3>About OrignALS</h3>
| + | <ul class="footer-list"> |
| − | <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>
| + | <li class="footer-list-item">Ben-Gurion University of the Negev |
| − | <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/f/f0/T--BGU_Israel--originals_white.png" width="50%">
| + | Ben Gurion 1, Beer Sheva 8410501, Israel</li> |
| − |
| + | <li class="footer-list-item">Second item</li> |
| − | <img class="img-responsive" src="">
| + | <li class="footer-list-item">Third item</li> |
| | + | </ul> |
| | </div> | | </div> |
| | <div class="col-md-4"> | | <div class="col-md-4"> |
| | <ul class="footer-list"> | | <ul class="footer-list"> |
| − | <h3>Keep in Touch</h3>
| + | <li class="footer-list-item">First item</li> |
| − |
| + | <li class="footer-list-item">Second item</li> |
| − | <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">Third item</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> | | </ul> |
| | </div> | | </div> |
| | <div class="col-md-4"> | | <div class="col-md-4"> |
| | <ul class="footer-list"> | | <ul class="footer-list"> |
| − | <h3>Address</h3>
| + | <li class="footer-list-item">First item</li> |
| − | <li class="footer-list-item">Ben-Gurion University of the Negev<br> | + | <li class="footer-list-item">Second item</li> |
| − | Ben Gurion 1, Beer Sheva 8410501, Israel</li>
| + | <li class="footer-list-item">Third item</li> |
| − | | + | <li class="footer-list-item">Third item</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> | | </ul> |
| | </div> | | </div> |
| | | | |
| | </div> | | </div> |
| − | </div>
| |
| | </footer> | | </footer> |
| | | | |
| Line 736: |
Line 638: |
| | }) | | }) |
| | </script> | | </script> |
| − | <script type="text/javascript">
| |
| − | /*!
| |
| − | * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
| |
| − | * @copyright 2016 PixelCog, Inc.
| |
| − | * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
| |
| − | */
| |
| | | | |
| − | ;(function ( $, window, document, undefined ) {
| |
| − |
| |
| − | // Polyfill for requestAnimationFrame
| |
| − | // via: https://gist.github.com/paulirish/1579671
| |
| − |
| |
| − | (function() {
| |
| − | var lastTime = 0;
| |
| − | var vendors = ['ms', 'moz', 'webkit', 'o'];
| |
| − | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
| |
| − | window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
| |
| − | window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
| |
| − | }
| |
| − |
| |
| − | if (!window.requestAnimationFrame)
| |
| − | window.requestAnimationFrame = function(callback) {
| |
| − | var currTime = new Date().getTime();
| |
| − | var timeToCall = Math.max(0, 16 - (currTime - lastTime));
| |
| − | var id = window.setTimeout(function() { callback(currTime + timeToCall); },
| |
| − | timeToCall);
| |
| − | lastTime = currTime + timeToCall;
| |
| − | return id;
| |
| − | };
| |
| − |
| |
| − | if (!window.cancelAnimationFrame)
| |
| − | window.cancelAnimationFrame = function(id) {
| |
| − | clearTimeout(id);
| |
| − | };
| |
| − | }());
| |
| − |
| |
| − |
| |
| − | // Parallax Constructor
| |
| − |
| |
| − | function Parallax(element, options) {
| |
| − | var self = this;
| |
| − |
| |
| − | if (typeof options == 'object') {
| |
| − | delete options.refresh;
| |
| − | delete options.render;
| |
| − | $.extend(this, options);
| |
| − | }
| |
| − |
| |
| − | this.$element = $(element);
| |
| − |
| |
| − | if (!this.imageSrc && this.$element.is('img')) {
| |
| − | this.imageSrc = this.$element.attr('src');
| |
| − | }
| |
| − |
| |
| − | var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
| |
| − |
| |
| − | if (positions.length < 1) {
| |
| − | positions.push('center');
| |
| − | }
| |
| − | if (positions.length == 1) {
| |
| − | positions.push(positions[0]);
| |
| − | }
| |
| − |
| |
| − | if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
| |
| − | positions = [positions[1], positions[0]];
| |
| − | }
| |
| − |
| |
| − | if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
| |
| − | if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
| |
| − |
| |
| − | self.positionX = positions[0];
| |
| − | self.positionY = positions[1];
| |
| − |
| |
| − | if (this.positionX != 'left' && this.positionX != 'right') {
| |
| − | if (isNaN(parseInt(this.positionX))) {
| |
| − | this.positionX = 'center';
| |
| − | } else {
| |
| − | this.positionX = parseInt(this.positionX);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | if (this.positionY != 'top' && this.positionY != 'bottom') {
| |
| − | if (isNaN(parseInt(this.positionY))) {
| |
| − | this.positionY = 'center';
| |
| − | } else {
| |
| − | this.positionY = parseInt(this.positionY);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | this.position =
| |
| − | this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
| |
| − | this.positionY + (isNaN(this.positionY)? '' : 'px');
| |
| − |
| |
| − | if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
| |
| − | if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
| |
| − | this.$element.css({
| |
| − | backgroundImage: 'url(' + this.imageSrc + ')',
| |
| − | backgroundSize: 'cover',
| |
| − | backgroundPosition: this.position
| |
| − | });
| |
| − | }
| |
| − | return this;
| |
| − | }
| |
| − |
| |
| − | if (navigator.userAgent.match(/(Android)/)) {
| |
| − | if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
| |
| − | this.$element.css({
| |
| − | backgroundImage: 'url(' + this.imageSrc + ')',
| |
| − | backgroundSize: 'cover',
| |
| − | backgroundPosition: this.position
| |
| − | });
| |
| − | }
| |
| − | return this;
| |
| − | }
| |
| − |
| |
| − | this.$mirror = $('<div />').prependTo(this.mirrorContainer);
| |
| − |
| |
| − | var slider = this.$element.find('>.parallax-slider');
| |
| − | var sliderExisted = false;
| |
| − |
| |
| − | if (slider.length == 0)
| |
| − | this.$slider = $('<img />').prependTo(this.$mirror);
| |
| − | else {
| |
| − | this.$slider = slider.prependTo(this.$mirror)
| |
| − | sliderExisted = true;
| |
| − | }
| |
| − |
| |
| − | this.$mirror.addClass('parallax-mirror').css({
| |
| − | visibility: 'hidden',
| |
| − | zIndex: this.zIndex,
| |
| − | position: 'fixed',
| |
| − | top: 0,
| |
| − | left: 0,
| |
| − | overflow: 'hidden'
| |
| − | });
| |
| − |
| |
| − | this.$slider.addClass('parallax-slider').one('load', function() {
| |
| − | if (!self.naturalHeight || !self.naturalWidth) {
| |
| − | self.naturalHeight = this.naturalHeight || this.height || 1;
| |
| − | self.naturalWidth = this.naturalWidth || this.width || 1;
| |
| − | }
| |
| − | self.aspectRatio = self.naturalWidth / self.naturalHeight;
| |
| − |
| |
| − | Parallax.isSetup || Parallax.setup();
| |
| − | Parallax.sliders.push(self);
| |
| − | Parallax.isFresh = false;
| |
| − | Parallax.requestRender();
| |
| − | });
| |
| − |
| |
| − | if (!sliderExisted)
| |
| − | this.$slider[0].src = this.imageSrc;
| |
| − |
| |
| − | if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
| |
| − | this.$slider.trigger('load');
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // Parallax Instance Methods
| |
| − |
| |
| − | $.extend(Parallax.prototype, {
| |
| − | speed: 0.2,
| |
| − | bleed: 0,
| |
| − | zIndex: -100,
| |
| − | iosFix: true,
| |
| − | androidFix: true,
| |
| − | position: 'center',
| |
| − | overScrollFix: false,
| |
| − | mirrorContainer: 'body',
| |
| − |
| |
| − | refresh: function() {
| |
| − | this.boxWidth = this.$element.outerWidth();
| |
| − | this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
| |
| − | this.boxOffsetTop = this.$element.offset().top - this.bleed;
| |
| − | this.boxOffsetLeft = this.$element.offset().left;
| |
| − | this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
| |
| − |
| |
| − | var winHeight = Parallax.winHeight;
| |
| − | var docHeight = Parallax.docHeight;
| |
| − | var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
| |
| − | var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
| |
| − | var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
| |
| − | var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
| |
| − | var margin;
| |
| − |
| |
| − | if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
| |
| − | this.imageWidth = imageHeightMin * this.aspectRatio | 0;
| |
| − | this.imageHeight = imageHeightMin;
| |
| − | this.offsetBaseTop = imageOffsetMin;
| |
| − |
| |
| − | margin = this.imageWidth - this.boxWidth;
| |
| − |
| |
| − | if (this.positionX == 'left') {
| |
| − | this.offsetLeft = 0;
| |
| − | } else if (this.positionX == 'right') {
| |
| − | this.offsetLeft = - margin;
| |
| − | } else if (!isNaN(this.positionX)) {
| |
| − | this.offsetLeft = Math.max(this.positionX, - margin);
| |
| − | } else {
| |
| − | this.offsetLeft = - margin / 2 | 0;
| |
| − | }
| |
| − | } else {
| |
| − | this.imageWidth = this.boxWidth;
| |
| − | this.imageHeight = this.boxWidth / this.aspectRatio | 0;
| |
| − | this.offsetLeft = 0;
| |
| − |
| |
| − | margin = this.imageHeight - imageHeightMin;
| |
| − |
| |
| − | if (this.positionY == 'top') {
| |
| − | this.offsetBaseTop = imageOffsetMin;
| |
| − | } else if (this.positionY == 'bottom') {
| |
| − | this.offsetBaseTop = imageOffsetMin - margin;
| |
| − | } else if (!isNaN(this.positionY)) {
| |
| − | this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
| |
| − | } else {
| |
| − | this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
| |
| − | }
| |
| − | }
| |
| − | },
| |
| − |
| |
| − | render: function() {
| |
| − | var scrollTop = Parallax.scrollTop;
| |
| − | var scrollLeft = Parallax.scrollLeft;
| |
| − | var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
| |
| − | var scrollBottom = scrollTop + Parallax.winHeight;
| |
| − |
| |
| − | if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
| |
| − | this.visibility = 'visible';
| |
| − | this.mirrorTop = this.boxOffsetTop - scrollTop;
| |
| − | this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
| |
| − | this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
| |
| − | } else {
| |
| − | this.visibility = 'hidden';
| |
| − | }
| |
| − |
| |
| − | this.$mirror.css({
| |
| − | transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
| |
| − | visibility: this.visibility,
| |
| − | height: this.boxHeight,
| |
| − | width: this.boxWidth
| |
| − | });
| |
| − |
| |
| − | this.$slider.css({
| |
| − | transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
| |
| − | position: 'absolute',
| |
| − | height: this.imageHeight,
| |
| − | width: this.imageWidth,
| |
| − | maxWidth: 'none'
| |
| − | });
| |
| − | }
| |
| − | });
| |
| − |
| |
| − |
| |
| − | // Parallax Static Methods
| |
| − |
| |
| − | $.extend(Parallax, {
| |
| − | scrollTop: 0,
| |
| − | scrollLeft: 0,
| |
| − | winHeight: 0,
| |
| − | winWidth: 0,
| |
| − | docHeight: 1 << 30,
| |
| − | docWidth: 1 << 30,
| |
| − | sliders: [],
| |
| − | isReady: false,
| |
| − | isFresh: false,
| |
| − | isBusy: false,
| |
| − |
| |
| − | setup: function() {
| |
| − | if (this.isReady) return;
| |
| − |
| |
| − | var self = this;
| |
| − |
| |
| − | var $doc = $(document), $win = $(window);
| |
| − |
| |
| − | var loadDimensions = function() {
| |
| − | Parallax.winHeight = $win.height();
| |
| − | Parallax.winWidth = $win.width();
| |
| − | Parallax.docHeight = $doc.height();
| |
| − | Parallax.docWidth = $doc.width();
| |
| − | };
| |
| − |
| |
| − | var loadScrollPosition = function() {
| |
| − | var winScrollTop = $win.scrollTop();
| |
| − | var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
| |
| − | var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
| |
| − | Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
| |
| − | Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
| |
| − | Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
| |
| − | };
| |
| − |
| |
| − | $win.on('resize.px.parallax load.px.parallax', function() {
| |
| − | loadDimensions();
| |
| − | self.refresh();
| |
| − | Parallax.isFresh = false;
| |
| − | Parallax.requestRender();
| |
| − | })
| |
| − | .on('scroll.px.parallax load.px.parallax', function() {
| |
| − | loadScrollPosition();
| |
| − | Parallax.requestRender();
| |
| − | });
| |
| − |
| |
| − | loadDimensions();
| |
| − | loadScrollPosition();
| |
| − |
| |
| − | this.isReady = true;
| |
| − |
| |
| − | var lastPosition = -1;
| |
| − |
| |
| − | function frameLoop() {
| |
| − | if (lastPosition == window.pageYOffset) { // Avoid overcalculations
| |
| − | window.requestAnimationFrame(frameLoop);
| |
| − | return false;
| |
| − | } else lastPosition = window.pageYOffset;
| |
| − |
| |
| − | self.render();
| |
| − | window.requestAnimationFrame(frameLoop);
| |
| − | }
| |
| − |
| |
| − | frameLoop();
| |
| − | },
| |
| − |
| |
| − | configure: function(options) {
| |
| − | if (typeof options == 'object') {
| |
| − | delete options.refresh;
| |
| − | delete options.render;
| |
| − | $.extend(this.prototype, options);
| |
| − | }
| |
| − | },
| |
| − |
| |
| − | refresh: function() {
| |
| − | $.each(this.sliders, function(){ this.refresh(); });
| |
| − | this.isFresh = true;
| |
| − | },
| |
| − |
| |
| − | render: function() {
| |
| − | this.isFresh || this.refresh();
| |
| − | $.each(this.sliders, function(){ this.render(); });
| |
| − | },
| |
| − |
| |
| − | requestRender: function() {
| |
| − | var self = this;
| |
| − | self.render();
| |
| − | self.isBusy = false;
| |
| − | },
| |
| − | destroy: function(el){
| |
| − | var i,
| |
| − | parallaxElement = $(el).data('px.parallax');
| |
| − | parallaxElement.$mirror.remove();
| |
| − | for(i=0; i < this.sliders.length; i+=1){
| |
| − | if(this.sliders[i] == parallaxElement){
| |
| − | this.sliders.splice(i, 1);
| |
| − | }
| |
| − | }
| |
| − | $(el).data('px.parallax', false);
| |
| − | if(this.sliders.length === 0){
| |
| − | $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
| |
| − | this.isReady = false;
| |
| − | Parallax.isSetup = false;
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − |
| |
| − |
| |
| − | // Parallax Plugin Definition
| |
| − |
| |
| − | function Plugin(option) {
| |
| − | return this.each(function () {
| |
| − | var $this = $(this);
| |
| − | var options = typeof option == 'object' && option;
| |
| − |
| |
| − | if (this == window || this == document || $this.is('body')) {
| |
| − | Parallax.configure(options);
| |
| − | }
| |
| − | else if (!$this.data('px.parallax')) {
| |
| − | options = $.extend({}, $this.data(), options);
| |
| − | $this.data('px.parallax', new Parallax(this, options));
| |
| − | }
| |
| − | else if (typeof option == 'object')
| |
| − | {
| |
| − | $.extend($this.data('px.parallax'), options);
| |
| − | }
| |
| − | if (typeof option == 'string') {
| |
| − | if(option == 'destroy'){
| |
| − | Parallax.destroy(this);
| |
| − | }else{
| |
| − | Parallax[option]();
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | var old = $.fn.parallax;
| |
| − |
| |
| − | $.fn.parallax = Plugin;
| |
| − | $.fn.parallax.Constructor = Parallax;
| |
| − |
| |
| − |
| |
| − | // Parallax No Conflict
| |
| − |
| |
| − | $.fn.parallax.noConflict = function () {
| |
| − | $.fn.parallax = old;
| |
| − | return this;
| |
| − | };
| |
| − |
| |
| − |
| |
| − | // Parallax Data-API
| |
| − |
| |
| − | $( function () {
| |
| − | $('[data-parallax="scroll"]').parallax();
| |
| − | });
| |
| − |
| |
| − | }(jQuery, window, document));
| |
| − |
| |
| − | </script>
| |
| | <script> | | <script> |
| | // When the user scrolls down 20px from the top of the document, show the button | | // When the user scrolls down 20px from the top of the document, show the button |
<!DOCTYPE html>
