web-dev-qa-db-ja.com

コンテンツがスクロールして表示されるときにCSS3アニメーションをアクティブにします

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 です。また、これが重要かどうかはわかりませんが、この棒グラフのいくつかのインスタンスがページにあります。

ウェイポイントと呼ばれるjQueryプラグインに出くわしましたが、それを機能させることができた運はまったくありませんでした。

誰かが私を正しい方向に向けることができれば、それは本当に役立つでしょう。

ありがとう！

jqueryhtml5css3scrollcss-animations
40
Kevin Jung

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

これには、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();
});
63
Matt Coughlin

要素がビューポートにあるときに常にアニメーションが発生する必要がある場合があります。これがあなたの場合、私はこれを反映するために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');
    }
}
15
Bogdan Gersak

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

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

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

  1. このリンク または Github からスクリプトファイルをダウンロードして追加します（バージョン3は まだ利用できません through [〜＃〜] cdnjs [〜＃〜] 、ただし RawGit は常にオプションです）。

  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');
        }
    });
});
_

here で説明されている理由により、$(window).load()を使用します。

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

9
Wtower
CSS FOR TRIGGER : 
.trigger{
  width: 100px;
  height: 2px;
  position: fixed;
  top: 20%;
  left: 0;
  background: red;
  opacity: 0;
  z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');

        $(document).scroll(function () {


           $('YOUR SECTIONS NAME').each(function () {

               let $this = $(this);

               if($this.offset().top <= $('.js-trigger').offset().top) {

                   if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
                       $this
                           .addClass('currSec')
                           .siblings()
                           .removeClass('currSec');

                   }
               }

           });

        });
</script>
1
Sanya Kravchuk

これらの答えに加えて、これらの点を考慮してください：

1-ビュー内の要素を確認するには、多くの考慮事項があります。
DOM要素が現在のビューポートに表示されるかどうかを確認する方法

2-誰かがアニメーションをより詳細に制御したい場合（たとえば、「アニメーションタイプ」および「開始遅延」を設定する）、それについての良い記事があります：
http://blog.webbb.be/trigger-css-animation-scroll/

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

0
Spongebob Comrade