Difference between revisions of "Team:Tianjin/js/material/kit"
| Line 223: | Line 223: | ||
var yele = $("#bottle3D").offset().top; | var yele = $("#bottle3D").offset().top; | ||
$(this).scroll(function(){ | $(this).scroll(function(){ | ||
| − | var pct = ($(document).scrollTop() + | + | var pct = ($(document).scrollTop() + 900 - yele) / $(window).height() * 100; |
var frm = Math.floor(pct / 2); | var frm = Math.floor(pct / 2); | ||
$('b').text(frm); | $('b').text(frm); | ||
Revision as of 15:46, 12 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() + 900 - 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++) );
}
});
}
