0
カスタムJSページで同じ機能が多かったので、このコードを単純に冗長にするのに最適な方法は何か不思議でした。アニメーション用の冗長JS/JQuery関数
私はまだJS/Javascriptの新機能であり、このWebページに追加するさまざまなセクションでナビゲーションの仕方を改善したいと考えています。
;(function() {
'use strict';
// iPad and iPod detection
var isiPad = function(){
return (navigator.platform.indexOf("iPad") != -1);
};
var isiPhone = function(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
};
// Parallax
var parallax = function() {
$(window).stellar();
};
// Burger Menu
var burgerMenu = function() {
$('body').on('click', '.js-mi-nav-toggle', function(event){
event.preventDefault();
if ($('#navbar').is(':visible')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
};
var goToTop = function() {
$('.js-gotop').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $('html').offset().top
}, 500);
return false;
});
};
// Page Nav
var clickMenu = function() {
$('#navbar a:not([class="external"])').click(function(event){
var section = $(this).data('nav-section'),
navbar = $('#navbar');
if ($('[data-section="' + section + '"]').length) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top
}, 500);
}
if (navbar.is(':visible')) {
navbar.removeClass('in');
navbar.attr('aria-expanded', 'false');
$('.js-mi-nav-toggle').removeClass('active');
}
event.preventDefault();
return false;
});
};
// Reflect scrolling in navigation
var navActive = function(section) {
var $el = $('#navbar > ul');
$el.find('li').removeClass('active');
$el.each(function(){
$(this).find('a[data-nav-section="'+section+'"]').closest('li').addClass('active');
});
};
var navigationSection = function() {
var $section = $('section[data-section]');
$section.waypoint(function(direction) {
if (direction === 'down') {
navActive($(this.element).data('section'));
}
}, {
offset: '150px'
});
$section.waypoint(function(direction) {
if (direction === 'up') {
navActive($(this.element).data('section'));
}
}, {
offset: function() { return -$(this.element).height() + 155; }
});
};
// Window Scroll
var windowScroll = function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
var header = $('#mi-header'),
scrlTop = $(this).scrollTop();
if (scrlTop > 500 && scrlTop <= 2000) {
header.addClass('navbar-fixed-top mi-animated slideInDown');
} else if (scrlTop <= 500) {
if (header.hasClass('navbar-fixed-top')) {
header.addClass('navbar-fixed-top mi-animated slideOutUp');
setTimeout(function(){
header.removeClass('navbar-fixed-top mi-animated slideInDown slideOutUp');
}, 100);
}
}
});
};
// Animations
// Home
var homeAnimate = function() {
if ($('#mi-home').length > 0) {
$('#mi-home').waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
$('#mi-home .to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var introAnimate = function() {
var intro = $('#mi-intro');
if (intro.length > 0) {
intro.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
var sec = intro.find('.to-animate').length,
sec = parseInt((sec * 200) + 400);
setTimeout(function() {
intro.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
intro.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('bounceIn animated');
}, k * 200, 'easeInOutExpo');
});
}, sec);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var infoAnimate = function() {
var info = $('#mi-info');
if (info.length > 0) {
info.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
info.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var discussAnimate = function() {
var info = $('#mi-discuss');
if (info.length > 0) {
info.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
info.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var tutorialsAnimate = function() {
if ($('#mi-videos').length > 0) {
$('#mi-videos').waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
$('#mi-videos .to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var examplesAnimate = function() {
var info = $('#mi-examples');
if (info.length > 0) {
info.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
info.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var businessAnimate = function() {
var business = $('#mi-business');
if (business.length > 0) {
business.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
var sec = business.find('.to-animate').length,
sec = parseInt((sec * 200) - 400);
setTimeout(function() {
business.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
business.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInDown animated');
}, k * 200, 'easeInOutExpo');
});
}, sec);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var contactAnimate = function() {
var contact = $('#mi-contact');
if (contact.length > 0) {
contact.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
contact.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
// Document on load.
$(function(){
parallax();
burgerMenu();
clickMenu();
windowScroll();
navigationSection();
goToTop();
// Animations
homeAnimate();
introAnimate();
infoAnimate();
discussAnimate();
tutorialsAnimate();
examplesAnimate();
businessAnimate();
contactAnimate();
});
}());
ありがとうございました！例えば
スタート、それは1作ります/一度コード内で発生し、そこから作業しますか？私のスクロールは、そこにあるすべての垂直の空白（空白行）に私の目を壊した。 –
もう1つのアプローチは、以下から始めることです：関数が小さい関数に分割されます。あなたがこれを達成すると、あなたは非常に簡単な部分を見つけることができ、コードの一部を再利用できるようになります – Woody