0

まず、肥大化した可能性のある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();
4

1 に答える 1

0

私は今もJSn00bであり、私のコードは非常に肥大化していた。いくつかの単純な統合と再定式化は本当に役に立ちました。ただし、最近では、JSアニメーションをスムーズにするためのこのJSプラグインもあります。

Velocity.js

.....そして将来ここに着陸するかもしれない人々のために、ここにさらに良いものがあります：

GSAP

于 2015-01-28T16:56:31.087 に答える