57

CSS3 でアニメーション化する棒グラフがあり、現在、ページが読み込まれるとアニメーションがアクティブになります。

私が抱えている問題は、その前に多くのコンテンツがあるため、指定された棒グラフが画面外に配置されているため、ユーザーが下にスクロールするまでにアニメーションがすでに終了していることです。

CSS3 または jQuery を使用して、視聴者がグラフを見たときに棒グラフの CSS3 アニメーションのみを有効にする方法を探していました。

<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>

ページの読み込み直後に非常に速く下にスクロールすると、アニメーションが表示されます。

これが私のコードのjsfiddleです。また、これが問題かどうかはわかりませんが、ページにこの棒グラフのインスタンスがいくつかあります。

waypoint と呼ばれる jQuery プラグインに出会いましたが、うまく動作させることができませんでした。

誰かが私を正しい方向に向けることができれば、それは本当に役に立ちます.

ありがとう！

4

6 に答える 6

71

スクロール イベントをキャプチャする

これには、JavaScript または jQuery を使用してスクロール イベントをキャプチャし、スクロール イベントが発生するたびに要素が表示されているかどうかを確認する必要があります。

要素が表示されたら、アニメーションを開始します。以下のコードでは、これはアニメーションをトリガーする「開始」クラスを要素に追加することによって行われます。

更新されたデモ

HTML

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

jQuery

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});
于 2013-05-01T23:01:25.293 に答える
17

要素がビューポートにあるときに常にアニメーションを実行する必要がある場合があります。これがあなたのケースである場合、これを反映するために Matt jsfiddleコードを少し変更しました。

jQuery

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    } else {
        $elem.removeClass('start');
    }
}
于 2014-05-27T21:20:54.370 に答える
12

CSS アニメーションを有効にするには、要素が表示されるときにクラスを要素に追加する必要があります。他の回答が示しているように、これには JS が必要であり、Waypointsは使用できる JS スクリプトです。

ウェイポイントは、要素にスクロールするときに関数をトリガーする最も簡単な方法です。

Waypoints バージョン 2 までは、これは比較的単純な jquery プラグインでした。バージョン 3 以降 (このガイドのバージョン 3.1.1) では、いくつかの機能が導入されています。これで上記を達成するために、スクリプトの「inview ショートカット」を使用できます。

  1. このリンクまたはGithubからスクリプト ファイルをダウンロードして追加します( RawGitも常にオプションですが、バージョン 3 はCDNJSからはまだ利用できません) 。

  2. 通常どおり、スクリプトを HTML に追加します。

    <script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/inview.min.js"></script>

  3. 次の JS コードを追加#myelementし、適切な HTML 要素 jQuery セレクターに置き換えます。

    $(window).load(function () {
    var in_view = new Waypoint.Inview({
        element: $('#myelement')[0],
        enter: function() {
            $('#myelement').addClass('start');
        },
        exit: function() {  // optionally
            $('#myelement').removeClass('start');
        }
    });
});

ここで$(window).load()説明する理由で使用します。

ここでマットのフィドルを更新しました。

于 2015-04-28T11:24:20.860 に答える
1

これらの回答に加えて、次の点を考慮して

ください
。

2- 誰かがアニメーションをより細かく制御したい場合 (たとえば、「アニメーション タイプ」と「開始遅延」を設定)、これに関する良い記事があります:
http://blog.webbb.be/trigger-css-animation-スクロール/

3- また、addClassを遅滞なく呼び出す ( setTimeoutを使用) ことは効果的ではないようです。

于 2016-07-19T04:55:38.407 に答える