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

Line 4: Line 4:
 
     var yele = $("#bottle3D").offset().top;
 
     var yele = $("#bottle3D").offset().top;
 
   $(this).scroll(function(){
 
   $(this).scroll(function(){
−
     var pct = ($(document).scrollTop() - 500 - yele) / $(window).height() * 100;
+
     var pct = ($(document).scrollTop() - 100 - yele) / $(window).height() * 100;
 
var frm = Math.floor(pct / 2);
 
var frm = Math.floor(pct / 2);
 
var element = document.getElementById('bottle3D');
 
var element = document.getElementById('bottle3D');

Revision as of 11:12, 15 October 2016

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

$(document).ready(function(){ 

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

var frm = Math.floor(pct / 2); 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++) );
         }
       




   });



 }