Difference between revisions of "Team:Tianjin/js/material/kit"

Line 138: Line 138:
 
});   
 
});   
  
−
$('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);
 
−
    }
 
−
               
 
−
});
 
  
 
      
 
      
Line 229: Line 216:
 
})
 
})
 
}());
 
}());
 +
 +
 +
//------------------- Bottle -------------------
 +
 +
$(document).ready(function(){
 +
    var yele = $("#bottle3D").offset().top;
 +
  $(this).scroll(function(){
 +
    var pct = ($(document).scrollTop() - 500 - yele) / $(window).height() * 100;
 +
var frm = Math.floor(pct / 2);
 +
    $('b').text(frm);
 +
var element = document.getElementById('bottle3D');
 +
if( frm < 49 ){
 +
    element.style.backgroundPosition = "0px -" + frm * 560 + 'px';
 +
}
 +
else{
 +
element.style.backgroundPosition = "0px -" + 49 * 560 + 'px';
 +
}
 +
  });
 +
});
 +
 +
$(window).on('scroll',function(){
 +
 +
        FrameAnimbyScroll.checkScrollForParallax();
 +
       
 +
});
 +
 +
FrameAnimbyScroll = {
 +
 +
    checkScrollForParallax: debounce(function() {
 +
      var containerY = $(".wrapper-bottle").offset().top;
 +
      var scrollposY = parseInt($(document).scrollTop() + $(window).height() * 0.5);
 +
      var windowH = $(window).height();
 +
        if(containerY < scrollposY) {
 +
            $(".Bottle").each(function() {
 +
            var $elem = $(this);
 +
var divd = 5;
 +
                  if($elem.data("para")) {
 +
                                  var divd = $elem.data("para");
 +
                  }
 +
                                  var parent_top = $("#Bottle1").offset().top;         
 +
                                  var window_bottom = $(window).scrollTop();
 +
 +
                                  oVal = 0 - ((window_bottom - parent_top + windowH*0.5) / divd );
 +
                                  $elem.css('transform','translate3d(0px, ' + oVal + 'px, 0px)');
 +
         
 +
            });
 +
 +
        }
 +
 +
    }, 6),
 +
 
 +
}
 +
 +
 +
var n                = 0;
 +
var $window          = $(window);
 +
var win_height_padded = $window.height() * 1.1;
 +
var disp              = new Array();
 +
 +
$window.on('scroll', revealOnScroll);
 +
 +
  function revealOnScroll() {
 +
    var scrolled = $window.scrollTop(),
 +
        win_height_padded = $window.height() * 1.1;
 +
 +
    $(".revealOnScroll:not(.animated)").each(function () {
 +
      var $this    = $(this),
 +
          offsetTop = $this.offset().top;
 +
     
 +
 +
       
 +
          if (scrolled + win_height_padded > offsetTop) {
 +
      setTimeout(function() {
 +
            if ($this.data('timeout')) {
 +
              window.setTimeout(function() {
 +
                $this.addClass('animated ' + $this.data('animation'));
 +
              }, parseInt($this.data('timeout'),10));
 +
                $this.children("p").addClass("NumAnimation");
 +
            } else {
 +
              $this.removeClass('hide');
 +
              $this.addClass('animated ' + $this.data('animation'));
 +
            }
 +
 +
              var i = 0;
 +
              $(".NumAnimation").each(function() {
 +
                var count= "count" + i;
 +
                $(this).addClass(count);
 +
 +
                var NumNow = 0;
 +
                var settedNum = $(this).data('num');
 +
                if(settedNum > 500){NumNow = parseInt(settedNum / 500) * 500 + NumNow;}
 +
                i ++;
 +
               
 +
                if (disp[i] != "none") {
 +
                 
 +
                  setInterval(function() {
 +
                    if(NumNow <= settedNum){
 +
                      $('.' + count).text( NumNow ++ );
 +
                    }
 +
                  }, parseInt( 1000 / settedNum )) ;
 +
 +
                  $('.' + count).removeClass("NumHide");
 +
                  $('.' + count).nextAll("span").removeClass("NumHide");
 +
                  disp[i] = "none";
 +
                 
 +
                }
 +
               
 +
              })
 +
      }, 1000 * (n++) );
 +
          }
 +
       
 +
 +
 +
 +
     
 +
    });
 +
 +
 +
  }

Revision as of 14:43, 11 October 2016

var transparent = true;

var transparentDemo = true; var fixedTop = false;

var navbar_initialized = false;

$(document).ready(function(){ 

   // Init Material scripts for buttons ripples, inputs animations etc, more info on the next link https://github.com/FezVrasta/bootstrap-material-design#materialjs
   $.material.init();



   //  Activate the Tooltips
   $('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();

   // Activate Datepicker
   if($('.datepicker').length != 0){
       $('.datepicker').datepicker({
            weekStart:1
       });
   }

   // Activate Popovers
   $('[data-toggle="popover"]').popover();

   // Active Carousel

$('.carousel').carousel({ 

     interval: 400000
   });

});

materialKit = { 

   misc:{
       navbar_menu_visible: 0
   },

   checkScrollForTransparentNavbar: debounce(function() {
           if($(document).scrollTop() > 260 ) {
               if(transparent) {
                   transparent = false;
                   $('.navbar-color-on-scroll').removeClass('navbar-transparent');
               }
           } else {
               if( !transparent ) {
                   transparent = true;
                   $('.navbar-color-on-scroll').addClass('navbar-transparent');
               }
           }
   }, 17),

   initSliders: function(){
       // Sliders for demo purpose
       $('#sliderRegular').noUiSlider({
           start: 40,
           connect: "lower",
           range: {
               min: 0,
               max: 100
           }
       });

       $('#sliderDouble').noUiSlider({
           start: [20, 60] ,
           connect: true,
           range: {
               min: 0,
               max: 100
           }
       });
   }

}


var big_image;

materialKitDemo = { 

   checkScrollForParallax: debounce(function(){
       var current_scroll = $(this).scrollTop();

       oVal = ($(window).scrollTop() / 3);
       big_image.css({
           'transform':'translate3d(0,' + oVal +'px,0)',
           '-webkit-transform':'translate3d(0,' + oVal +'px,0)',
           '-ms-transform':'translate3d(0,' + oVal +'px,0)',
           '-o-transform':'translate3d(0,' + oVal +'px,0)'
       });

   }, 6)

} // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing.

function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { timeout = null; if (!immediate) func.apply(context, args); }, wait); if (immediate && !timeout) func.apply(context, args); }; };


//---------------Parallax--------------//


$(document).ready(function(){ 

   window_width = $(window).width();
   window_height = $(window).height();



   rubik.initAnimationsCheck();

});

$(window).on('scroll',function(){ 

  if(window_width > 300){
       rubik.checkScrollForParallax();
  }

});

$(window).load(function(){ 

   //after the content is loaded we reinitialize all the waypoints for the animations
   rubik.initAnimationsCheck();

});


rubik = { 

   initAnimationsCheck: function(){
       
       $('[class*="add-animation"]').each(function(){
          offset_diff = 30;
          if($(this).hasClass('title')){
              offset_diff = 110;
          }
          

       });
 
   },



   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),


}

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));

}


//--------------Navbar-------------//

$(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"); }

}) }());


//------------------- Bottle -------------------

$(document).ready(function(){ 

   var yele = $("#bottle3D").offset().top;
 $(this).scroll(function(){
   var pct = ($(document).scrollTop() - 500 - yele) / $(window).height() * 100;

var frm = Math.floor(pct / 2); 

   $('b').text(frm);

var element = document.getElementById('bottle3D'); if( frm < 49 ){ 

   element.style.backgroundPosition = "0px -" + frm * 560 + 'px';

} else{ element.style.backgroundPosition = "0px -" + 49 * 560 + 'px'; } 

 });

});

$(window).on('scroll',function(){ 

       FrameAnimbyScroll.checkScrollForParallax();

});

FrameAnimbyScroll = { 

   checkScrollForParallax: debounce(function() {
     var containerY = $(".wrapper-bottle").offset().top;
     var scrollposY = parseInt($(document).scrollTop() + $(window).height() * 0.5);
     var windowH = $(window).height();
       if(containerY < scrollposY) {
           $(".Bottle").each(function() {
       	    var $elem = $(this);

var divd = 5; 

                 if($elem.data("para")) {
                                 var divd = $elem.data("para");
                 }
                                 var parent_top = $("#Bottle1").offset().top;          
                                 var window_bottom = $(window).scrollTop();

                                 oVal = 0 - ((window_bottom - parent_top + windowH*0.5) / divd );
                                 $elem.css('transform','translate3d(0px, ' + oVal + 'px, 0px)');
          
           });	

       }

   }, 6),

}


var n = 0; var $window = $(window); var win_height_padded = $window.height() * 1.1; var disp = new Array(); 

$window.on('scroll', revealOnScroll);

 function revealOnScroll() {
   var scrolled = $window.scrollTop(),
       win_height_padded = $window.height() * 1.1;

   $(".revealOnScroll:not(.animated)").each(function () {
     var $this     = $(this),
         offsetTop = $this.offset().top;
     



         if (scrolled + win_height_padded > offsetTop) {
     setTimeout(function() {
           if ($this.data('timeout')) {
             window.setTimeout(function() {
               $this.addClass('animated ' + $this.data('animation'));
             }, parseInt($this.data('timeout'),10));
               $this.children("p").addClass("NumAnimation");
           } else {
             $this.removeClass('hide');
             $this.addClass('animated ' + $this.data('animation'));
           }

             var i = 0;
             $(".NumAnimation").each(function() {
               var count= "count" + i;
               $(this).addClass(count);

               var NumNow = 0;
               var settedNum = $(this).data('num');
               if(settedNum > 500){NumNow = parseInt(settedNum / 500) * 500 + NumNow;}
               i ++;
               
               if (disp[i] != "none") {
                 
                 setInterval(function() {
                   if(NumNow <= settedNum){
                     $('.' + count).text( NumNow ++ );
                   }
                 }, parseInt( 1000 / settedNum )) ;

                 $('.' + count).removeClass("NumHide");
                 $('.' + count).nextAll("span").removeClass("NumHide");
                 disp[i] = "none";
                 
               }
               
             })
     }, 1000 * (n++) );
         }
       




   });



 }