Difference between revisions of "Team:Tianjin/Templates/MaterialTheme"

Line 17: Line 17:
 
<!-- Navbar will come here -->
 
<!-- Navbar will come here -->
  
−
<nav class="navbar navbar-info" role="navigation">
+
<nav class="navbar navbar-info" role="navigation" id="TeamTianjinNavbar">
 
<div class="container-fluid">
 
<div class="container-fluid">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
Line 67: Line 67:
 
<div class="navbarRightPic"><img class="img-responsive" src="https://static.igem.org/mediawiki/2016/5/51/TestLOGOofTeamTianjin.png" alt="LOGO" width="128"></div>
 
<div class="navbarRightPic"><img class="img-responsive" src="https://static.igem.org/mediawiki/2016/5/51/TestLOGOofTeamTianjin.png" alt="LOGO" width="128"></div>
 
<!-- end navbar -->
 
<!-- end navbar -->
 +
        <div class="wrapper">
 +
            <div class="section section-header">
 +
                <div class="parallax full-image">
 +
                    <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/1/1e/TeamTianjin_BG_Test.jpg" alt="TeamTianjin Back Ground">
 +
                    <div class="container">
 +
                        <div class="content">
 +
                            <h1>Team Tianjin</h1>
 +
                            <div class="separator-container">
 +
                                <div class="separator line-separator">∎</div>
 +
                            </div>
 +
                            <h5>Plastic tastes good  --- <i>E.Coli</i></h5>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <a href="" data-scroll="true" data-id="#whoWeAre" class="scroll-arrow -xs -sm">
 +
                <i class="fa fa-angle-down"></i>
 +
                </a>
 +
            </div>
 +
            <div class="section section-we-are-1" id="whoWeAre">
 +
                <div class="text-area">
 +
                    <div class="container">
 +
                        <div class="row">
 +
                            <div class="title" id="animationTest">
 +
                                <h2>About Creative Tim</h2>
 +
                                <div class="separator-container">
 +
                                    <div class="separator line-separator">∎</div>
 +
                                </div>
 +
                                <p class="large">
 +
                                    Creative Tim is a startup that creates design tools that make the web development process faster and easier. We love the web and care deeply for how users interact with a digital product. We power businesses and individuals to create better looking web projects around the world.
 +
                                </p>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="container">
 +
                    <div class="row">
 +
                        <div class="col-md-10 col-md-offset-1">
 +
                            <div class="row">
 +
                                <div class="col-md-4">
 +
                                    <div class="card add-animation animation-2">
 +
                                        <img alt="..." src="/assets/img/pic10.jpg" />
 +
                                    </div>
 +
                                    <div class="card add-animation animation-4">
 +
                                        <img alt="..." src="/assets/img/pic6.jpg" />
 +
                                    </div>
 +
                                </div>
 +
                                <div class="col-md-4">
 +
                                    <div class="card add-animation animation-1">
 +
                                        <img alt="..." src="/assets/img/pic11.jpg"/>
 +
                                    </div>
 +
                                    <div class="card add-animation animation-3">
 +
                                        <img alt="..." src="/assets/img/pic1.jpg"/>
 +
                                    </div>
 +
                                    <div class="card add-animation animation-2">
 +
                                        <img alt="..." src="/assets/img/pic9.jpg"/>
 +
                                    </div>
 +
                                </div>
 +
                                <div class="col-md-4">
 +
                                    <div class="card add-animation animation-3">
 +
                                        <img alt="..." src="/assets/img/pic2.jpg"/>
 +
                                    </div>
 +
                                    <div class="card add-animation animation-1">
 +
                                        <img alt="..." src="/assets/img/pic4.jpg"/>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 
<div class="wrapper">
 
<div class="wrapper">
 
<div class="header">
 
<div class="header">
Line 73: Line 143:
 
<!-- you can use the class main-raised if you want the main area to be as a page with shadows -->
 
<!-- you can use the class main-raised if you want the main area to be as a page with shadows -->
 
<div class="main">
 
<div class="main">
 +
<div class="container">
 +
 +
<!-- here you can add your content -->
 +
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
 
  
 
</body>
 
</body>
 +
 +
<script>
 +
var searchVisible = 0;
 +
var transparent = true;
 +
 +
var transparentDemo = true;
 +
var fixedTop = false;
 +
 +
var navbar_initialized = false;
 +
 +
var big_image;
 +
var scroll;
 +
var project_content;
 +
var $project;
 +
scroll = ( 2500 - $(window).width() ) / $(window).width();
 +
 +
var $ScrollTop;
 +
var $ScrollBot;
 +
 +
var pixels;
 +
 +
var modal;
 +
var $project_content;
 +
 +
var test = true;       
 +
 +
var timerStart = Date.now();
 +
var delay;
 +
 +
var no_of_elements = 0;
 +
var window_height;
 +
var window_width;
 +
 +
var content_opacity = 0;
 +
var content_transition = 0;
 +
var no_touch_screen = false;
 +
 +
var burger_menu;
 +
 +
       
 +
$(document).ready(function(){
 +
    BrowserDetect.init();
 +
   
 +
    if(BrowserDetect.browser == 'Explorer' && BrowserDetect.version <= 9){
 +
        $('body').html(better_browser); 
 +
    }
 +
 +
    window_width = $(window).width();
 +
    window_height = $(window).height();
 +
 +
   
 +
    rubik.initAnimationsCheck();
 +
   
 +
    // Init navigation toggle for small screens 
 +
    if(window_width < 979 || burger_menu){
 +
        rubik.initRightMenu(); 
 +
    }
 +
 +
    if(window_width < 979){
 +
        $('.over-area').each(function(){
 +
            var click = $(this).attr("onClick");
 +
            if(click == ''){
 +
                src = "rubik.showModal(this)";
 +
                $(this).attr("onClick", src);
 +
            }
 +
        });
 +
       
 +
        rubik.checkResponsiveImage();
 +
    }
 +
   
 +
   
 +
   
 +
    if($('#contactUsMap').length != 0){
 +
        rubik.initGoogleMaps(); 
 +
    }
 +
   
 +
    if($('.content-with-opacity').length != 0){
 +
        content_opacity = 1;
 +
    }
 +
 +
});
 +
 +
$(window).on('scroll',function(){
 +
  if(window_width > 980){
 +
        rubik.checkScrollForParallax();
 +
  }
 +
       
 +
});
 +
 +
$(window).load(function(){
 +
   
 +
    //after the content is loaded we reinitialize all the waypoints for the animations
 +
    rubik.initAnimationsCheck();
 +
   
 +
}); 
 +
 +
$('a[data-scroll="true"]').click(function(e){       
 +
    var scroll_target = $(this).data('id');
 +
    var scroll_trigger = $(this).data('scroll');
 +
   
 +
    if(scroll_trigger == true && scroll_target !== undefined){
 +
        e.preventDefault();
 +
       
 +
        $('html, body').animate({
 +
            scrollTop: $(scroll_target).offset().top - 50
 +
        }, 1000);
 +
    }
 +
               
 +
});
 +
 +
   
 +
rubik = {
 +
 +
    initAnimationsCheck: function(){
 +
       
 +
        $('[class*="add-animation"]').each(function(){
 +
          offset_diff = 30;
 +
          if($(this).hasClass('title')){
 +
              offset_diff = 110;
 +
          }
 +
         
 +
 +
        });
 +
 
 +
    },
 +
 +
 +
    checkResponsiveImage: function(){
 +
        $('.section-header > div > img, .section-header video').each(function(){
 +
            var $image = $(this);
 +
            var src = $image.attr("responsive-src");
 +
   
 +
            if(!src){
 +
              src = $image.attr('src');
 +
            }
 +
   
 +
            div = '<div class="responsive-background" style="background-image:url(' + src + ')"/>';
 +
            $image.after(div);
 +
            $image.addClass('-xs');
 +
        });
 +
    }, 
 +
 +
   
 +
    checkScrollForParallax: debounce(function() {
 +
 +
        no_of_elements = 0;
 +
        $('.parallax').each(function() {
 +
            var $elem = $(this);
 +
           
 +
            if(isElementInViewport($elem)){
 +
                  var parent_top = $elem.offset().top;         
 +
                  var window_bottom = $(window).scrollTop();
 +
                  var $image = $elem.find('img')
 +
                               
 +
              oVal = ((window_bottom - parent_top) / 3);
 +
                  $image.css('transform','translate3d(0px, ' + oVal + 'px, 0px)');   
 +
            }
 +
            });
 +
   
 +
    }, 6),
 +
   
 +
    checkScrollForContentTransitions: debounce(function() {
 +
        $('.content-with-opacity').each(function() {
 +
            var $content = $(this);
 +
           
 +
            if(isElementInViewport($content)){         
 +
                  var window_top = $(window).scrollTop();
 +
              opacityVal = 1 - (window_top / 230);
 +
                 
 +
                  if(opacityVal < 0){
 +
                      opacityVal = 0;
 +
                      return;
 +
                  } else {
 +
                    $content.css('opacity',opacityVal);   
 +
                  }
 +
                     
 +
            }           
 +
        });
 +
    }, 6),
 +
     
 +
}
 +
 +
 +
 +
 +
function isElementInViewport(elem) {
 +
    var $elem = $(elem);
 +
 +
    // Get the scroll position of the page.
 +
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
 +
    var viewportTop = $(scrollElem).scrollTop();
 +
    var viewportBottom = viewportTop + $(window).height();
 +
 +
    // Get the position of the element on the page.
 +
    var elemTop = Math.round( $elem.offset().top );
 +
    var elemBottom = elemTop + $elem.height();
 +
 +
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
 +
}
 +
 +
 +
var BrowserDetect = {
 +
    init: function () {
 +
        this.browser = this.searchString(this.dataBrowser) || "Other";
 +
        this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
 +
    },
 +
    searchString: function (data) {
 +
        for (var i = 0; i < data.length; i++) {
 +
            var dataString = data[i].string;
 +
            this.versionSearchString = data[i].subString;
 +
 +
            if (dataString.indexOf(data[i].subString) !== -1) {
 +
                return data[i].identity;
 +
            }
 +
        }
 +
    },
 +
    searchVersion: function (dataString) {
 +
        var index = dataString.indexOf(this.versionSearchString);
 +
        if (index === -1) {
 +
            return;
 +
        }
 +
 +
        var rv = dataString.indexOf("rv:");
 +
        if (this.versionSearchString === "Trident" && rv !== -1) {
 +
            return parseFloat(dataString.substring(rv + 3));
 +
        } else {
 +
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
 +
        }
 +
    },
 +
 +
    dataBrowser: [
 +
        {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
 +
        {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
 +
        {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
 +
        {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
 +
        {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
 +
        {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
 +
    ]
 +
 +
};
 +
 +
var better_browser = '<div class="container"><div class="better-browser row"><div class="col-md-2"></div><div class="col-md-8"><h3>We are sorry but it looks like your Browser doesn\'t support our website Features. In order to get the full experience please download a new version of your favourite browser.</h3></div><div class="col-md-2"></div><br><div class="col-md-4"><a href="https://www.mozilla.org/ro/firefox/new/" class="btn btn-warning">Mozilla</a><br></div><div class="col-md-4"><a href="https://www.google.com/chrome/browser/desktop/index.html" class="btn ">Chrome</a><br></div><div class="col-md-4"><a href="http://windows.microsoft.com/en-us/internet-explorer/ie-11-worldwide-languages" class="btn">Internet Explorer</a><br></div><br><br><h4>Thank you!</h4></div></div>';
 +
 +
$(function(){
 +
 +
if(window.location.hash){
 +
var targetScroll = $(window.location.hash).offset().top - 80;
 +
}
 +
$(window).scroll(function(){
 +
var $this = $(this);
 +
var targetTop = $(this).scrollTop();
 +
 +
if (targetTop >= 100){
 +
$("#TeamTianjinNavbar").addClass("navbar-TeamTianjin-fixed");
 +
$("#TeamTianjinNavbar").addClass("animated");
 +
$("#TeamTianjinNavbar").addClass("fadeInDown");
 +
}else{
 +
$("#TeamTianjinNavbar").removeClass("navbar-TeamTianjin-fixed");
 +
$("#TeamTianjinNavbar").removeClass("animated");
 +
$("#TeamTianjinNavbar").removeClass("fadeInDown");
 +
}
 +
 +
})
 +
}());
 +
</script>
  
 
<style>
 
<style>

Revision as of 07:59, 7 July 2016

TEAM TIANJIN

LOGO
TeamTianjin Back Ground

Team Tianjin

∎
Plastic tastes good --- E.Coli

About Creative Tim

∎

Creative Tim is a startup that creates design tools that make the web development process faster and easier. We love the web and care deeply for how users interact with a digital product. We power businesses and individuals to create better looking web projects around the world.

...
...
...
...
...
...
...