まず、肥大化した可能性のあるJS関数を失礼します。また、スクリプトには、おそらく削除される可能性のあるコード行がいくつかあります。そうは言っても、ImはまだJS / jQueryに慣れているので、私のスクリプトに対するあらゆる批評、提案、または修正を歓迎します。
そうは言っても、私は写真家のポートフォリオサイトのコンテンツのセクションをアニメーション化するためのスクリプトを作成しました。スクリプトはデスクトップコンピューターでかなりうまく実行されるようですが、モバイルのパフォーマンスはせいぜい不格好です。だから、私はここで私のスクリプトを最適化する方法や、アニメーションをスムーズにするためのコードを追加する方法についてのヘルプを探しています。
動作中のコードは次のとおりです：http： //jsbin.com/icereg/2/edit
編集：更新されたJSbinプロジェクト： http ：//jsbin.com/icereg/3/edit
面倒なアニメーション機能は次のとおりです。
// Bounce Top
function bounce_top() {
$isAnimating = 1;
$content.animate({top: '+=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({top: '-=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_top()
// Bounce Right
function bounce_right() {
$isAnimating = 1;
$content.animate({left: '-=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({left: '+=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_right()
// Bounce Bottom
function bounce_btm() {
$isAnimating = 1;
$content.animate({top: '-=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({top: '+=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_btm()
// Bounce Left
function bounce_left() {
$isAnimating = 1;
$content.animate({left: '+=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({left: '-=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_left()
// Scroll Content
function scroll_content() {
$isAnimating = 1;
if ($curr_section === ($total_section - 1) && ($event_target === 'down' || ($event_target === 'scroll' && $mouse_delta < 0))) {
// we're at the bottom; - 1 because of included 0 section;
bounce_btm();
} else if ($curr_section === 0 && ($event_target === 'up' || ($event_target === 'scroll' && $mouse_delta >= 0))) {
// we're already at the top
bounce_top();
} else if ($event_target === 'down' || $event_target === 'up' || $event_target === 'scroll' || $event_target === 'nav') {
// now either UP or DOWN inputs (mouse wheel, keyboad, nav links)
$nav_work_links.removeClass('active_nav');
$('#right_arrow').add('#left_arrow').remove();
if ($event_target === 'down' || ($event_target === 'scroll' && $mouse_delta < 0)) { // down or scroll down
$curr_section = $curr_section + 1;
$vertslidePos = '-=675';
} else if ($event_target === 'up' || ($event_target === 'scroll' && $mouse_delta >= 0)) { // up or scroll up
$curr_section = $curr_section - 1;
$vertslidePos = '+=675';
} else if ($event_target === 'nav') {
// now nav click inputs
$curr_section = $event_target_eq;
$vertslidePos = '-' + ($curr_section * 675);
}
if ($curr_page > 1) {
$content.animate({marginLeft: 0}, 450, 'easeInOutQuart'); // end .animate() method
}
$content.animate({top: $vertslidePos}, 450, 'easeInOutQuart',
function () {
if ($('.nav_work_items').eq($curr_section).index() === 0) {
$nav_work_links.removeClass('active_nav');
} else {
$('.nav_work_items').eq($curr_section - 1).find('.nav_work_links').addClass('active_nav');
}
$('.active_nav').before($left_arrow).after($right_arrow);
$curr_page = 1;
window.location.hash = '#work' + $curr_section;
$isAnimating = 0;
}); // end .animate() method
} else if ($event_target === 'left' || $event_target === 'right') {
// now either RIGHT or LEFT inputs
$right_arrow = $('#right_arrow');
$left_arrow = $('#left_arrow');
$active_nav = $('.active_nav');
$total_pages = $('#work' + $curr_section).children('.workcontent').length;
if ($curr_page === $total_pages && $event_target === 'right') {
bounce_right();
} else if ($curr_page === 1 && $event_target === 'left') {
bounce_left();
} else {
if ($event_target === 'right') {
$curr_page = $curr_page + 1;
$horzslidePos = '-=600px';
} else if ($event_target === 'left') {
$curr_page = $curr_page - 1;
$horzslidePos = '+=600px';
}
$content.animate({marginLeft: $horzslidePos}, 450, 'easeInOutQuart',
function () {
$isAnimating = 0;
}); // end .animate() method
}
}
} // end scroll_content();