Difference between revisions of "Template:XJTU-China/home.js"

(many edits)
Line 4: Line 4:
 
   $(window).scroll(function() {
 
   $(window).scroll(function() {
 
     if ($(this).scrollTop() == 0) {
 
     if ($(this).scrollTop() == 0) {
−
       $('header li a').animate({lineHeight: '74px'}, 200, 'linear');
+
       $(function() {
−
      $('.nav-head-wrapper').animate({top: '10px'}, 200, 'linear');
+
        $('.navbar-nav > li > a').animate({lineHeight: '74px'}, 200, 'linear');
−
      $('header').animate({opacity: '0.85'}, 200, 'linear');
+
        $('.nav-background').animate({height: '74px', opacity: '0.4'}, 200, 'linear');
−
      $('header').data('expend', 'true');
+
        $('.nav-head-wrapper').animate({top: '10px'}, 200, 'linear');
−
      console.log('scoll to the top');
+
        $('header').data('expend', 'true');
−
     } else if ($(this).scrollTop() >= 40 && $('header').data('expend') != 'false') {
+
        console.log('scoll to the top');
−
       $('.nav-head-wrapper').animate({top: '0'}, 400, 'linear');
+
      });
−
      $('header li a').animate({lineHeight: '54px'}, 200, 'linear');
+
     } else if ($(this).scrollTop() != 0 && $('header').data('expend') != 'false') {
−
      $('header').animate({opacity: '1'}, 200, 'linear');
+
       $(function() {
−
      $('header').data('expend', 'false');
+
        $('.nav-head-wrapper').animate({top: '0'}, 400, 'linear');
 +
        $('.nav-background').animate({height: '54px', opacity: '1'}, 400, 'linear');
 +
        $('.navbar-nav > li > a').animate({lineHeight: '54px'}, 400, 'linear');
 +
        $('header').data('expend', 'false');
 +
      });
 
     }
 
     }
 
   });
 
   });
  
 
   // banner text showing animation
 
   // banner text showing animation
−
   $('#text-d').fadeIn(800);
+
   $('#text-d').animate({opacity: '1'}, 800, 'swing');
−
   $('#text-e').delay(800).fadeIn(800);
+
   $('#text-e').delay(800).animate({opacity: '1'}, 800, 'swing');
−
   $('#text-cose').delay(1600).fadeIn(1000);
+
   $('#text-cose').delay(1600).animate({opacity: '1'}, 1000, 'swing');
−
   $('.banner-sub-text').delay(3000).fadeIn(1000);
+
   $('.banner-sub-text').delay(3000).animate({opacity: '1'}, 800, 'swing');
−
   $('.banner-up-arrow').delay(4000).fadeIn(800);
+
   $('.banner-up-arrow').delay(4000).animate({opacity: '1'}, 800, 'swing');
  
 
   // banner scroll hint animation
 
   // banner scroll hint animation
Line 43: Line 47:
  
 
   // content text showing animation
 
   // content text showing animation
−
  var title_show = function(element) {
 
−
    if ($(element).data('inview') == 'true') {
 
−
      $(element).animate({top: '-40px', opacity: '0'}, 300, 'swing');
 
−
      $(element).data('inview', 'false');
 
−
    } else {
 
−
      $(element).animate({top: '0', opacity: '1'}, 600, 'swing');
 
−
      $(element).data('inview', 'true');
 
−
    }
 
−
  };
 
−
  var text_show = function(element) {
 
−
    if ($(element).data('inview') == 'true') {
 
−
      $(element).animate({left: '-100px', opacity: '0'}, 400, 'swing');
 
−
      $(element).data('inview', 'false');
 
−
    } else {
 
−
      $(element).animate({left: '0', opacity: '1'}, 1000, 'swing');
 
−
      $(element).data('inview', 'true');
 
−
    }
 
−
  };
 
−
  var text_show_r = function(element) {
 
−
    if ($(element).data('inview') == 'true') {
 
−
      $(element).animate({left: '100px', opacity: '0'}, 400, 'swing');
 
−
      $(element).data('inview', 'false');
 
−
    } else {
 
−
      $(element).animate({left: '0', opacity: '1'}, 1000, 'swing');
 
−
      $(element).data('inview', 'true');
 
−
    }
 
−
  };
 
 
   $('.content-title').waypoint(function(){
 
   $('.content-title').waypoint(function(){
−
     title_show(this.element);
+
     $(this.element).animate({top: '0', opacity: '1'}, 800, 'swing');
−
  }, {offset: '100%'});
+
   }, {offset: '70%'});
−
  $('.content-title').waypoint(function(){
+
−
    title_show(this.element);
+
−
   }, {offset: '-40px'});
+
 
   $('.content-text:not(#content-block-2 .content-text)').waypoint(function(){
 
   $('.content-text:not(#content-block-2 .content-text)').waypoint(function(){
−
     text_show(this.element);
+
     $(this.element).animate({left: '0', opacity: '1'}, 600, 'swing');
−
  }, {offset: '100%'});
+
   }, {offset: '70%'});
−
  $('.content-text:not(#content-block-2 .content-text)').waypoint(function(){
+
−
    text_show(this.element);
+
−
  }, {offset: '-40px'});
+
−
  $('#content-block-2 .content-text').waypoint(function(){
+
−
    text_show_r(this.element);
+
−
   }, {offset: '100%'});
+
 
   $('#content-block-2 .content-text').waypoint(function(){
 
   $('#content-block-2 .content-text').waypoint(function(){
−
     text_show_r(this.element);
+
     $(this.element).animate({left: '0', opacity: '1'}, 600, 'swing');
−
   }, {offset: '-40px'});
+
   }, {offset: '70%'});
  
 
   // team picture
 
   // team picture

Revision as of 17:19, 13 October 2018

$(document).ready(function(){ 

 // header scroll to top animation
 $(window).scroll(function() {
   if ($(this).scrollTop() == 0) {
     $(function() {
       $('.navbar-nav > li > a').animate({lineHeight: '74px'}, 200, 'linear');
       $('.nav-background').animate({height: '74px', opacity: '0.4'}, 200, 'linear');
       $('.nav-head-wrapper').animate({top: '10px'}, 200, 'linear');
       $('header').data('expend', 'true');
       console.log('scoll to the top');
     });
   } else if ($(this).scrollTop() != 0 && $('header').data('expend') != 'false') {
     $(function() {
       $('.nav-head-wrapper').animate({top: '0'}, 400, 'linear');
       $('.nav-background').animate({height: '54px', opacity: '1'}, 400, 'linear');
       $('.navbar-nav > li > a').animate({lineHeight: '54px'}, 400, 'linear');
       $('header').data('expend', 'false');
     });
   }
 });

 // banner text showing animation
 $('#text-d').animate({opacity: '1'}, 800, 'swing');
 $('#text-e').delay(800).animate({opacity: '1'}, 800, 'swing');
 $('#text-cose').delay(1600).animate({opacity: '1'}, 1000, 'swing');
 $('.banner-sub-text').delay(3000).animate({opacity: '1'}, 800, 'swing');
 $('.banner-up-arrow').delay(4000).animate({opacity: '1'}, 800, 'swing');

 // banner scroll hint animation
 setInterval(function(){
   $('.banner-up-arrow').fadeTo(1400, 0.4).fadeTo(1400, 0.8);
 }, 2800);
 var iter=1;

 // banner picture cycling animation
 setInterval(function(){
   if (iter == $('.banner-pic-wrapper').children().length-1) {
     var next_iter = 1;
   } else {
     var next_iter = iter+1;
   }
   $('#banner-pic-'+next_iter).fadeIn(1000);
   $('#banner-pic-'+iter).delay(500).fadeOut(1000);
   iter = next_iter;
 }, 6000)

 // content text showing animation
 $('.content-title').waypoint(function(){
   $(this.element).animate({top: '0', opacity: '1'}, 800, 'swing');
 }, {offset: '70%'});
 $('.content-text:not(#content-block-2 .content-text)').waypoint(function(){
   $(this.element).animate({left: '0', opacity: '1'}, 600, 'swing');
 }, {offset: '70%'});
 $('#content-block-2 .content-text').waypoint(function(){
   $(this.element).animate({left: '0', opacity: '1'}, 600, 'swing');
 }, {offset: '70%'});

 // team picture
 $("#content-block-4").waypoint(function() {
   if ($("#content-block-4").data('inview') != 'true') {
     $('.banner-pic-wrapper').hide();
     $('#content-block-4-pic').show();
     $("#content-block-4").data('inview', 'true');
   } else {
     $('.banner-pic-wrapper').show();
     $('#content-block-4-pic').hide();
     $("#content-block-4").data('inview', 'false');
   }
 }, {offset: 'bottom-in-view'});

});