0

スクロール時にアニメーションをトリガーする方法を見つけようとしていますが、うまくいきません。基本的に、クラスを持つ要素がスクロールされて表示されるたびにアニメーションをトリガーする、タイトルに追加できるクラスが必要です。

jQuery Inviewプラグインを使用してみましたが、思いどおりに動作しませんでした。その後、 Waypoints.jsに切り替えて動作するようになりましたが、完全ではありません。今のところ、初めて要素にスクロールすると要素がアニメーション化されますが、ページを上下にスクロールしても何もしません。アニメーションは一度だけ起動します。

以下は私の現在のコードです。ユーザーがスクロールするたびにアニメーションをトリガーする方法と、ID ではなくクラスに基づいて起動するようにコードを圧縮する方法を誰かが見つけてくれれば、それは本当に素晴らしいことです。(現在、各要素に個別の機能があります。)

PS:アニメーションにはanimate.css、wow.js、textillate.jsを使用しています。

HTML

<h1 class="lettering wow fadeInDown" id="l1" data-in-effect="flipInY">Yo. Check it out.</h1>

jQuery

$(function () {
var l1 = $("#l1");
var waypoint = new Waypoint({
  element: document.getElementById('l1'),
  handler: function() {
      l1.textillate({ in: { effect: 'flipInY' } });
  },
  offset: 'bottom-in-view',
});
});

ご協力いただきありがとうございます！

編集:スクロールするたびにアニメーションをトリガーする部分的な解決策を見つけました。しかし、私はそれを動作させるように見えるだけですids. class新しいタイトルごとに個別の関数を作成するよりも、 a をターゲットにできる方がよいでしょう。のクラスで機能するように次のコードを変更する方法についてのアイデアはあり.letteringますか?

// Animate #l1
$(function () {
var animatel1 = $('#l1').textillate({ 
    autoStart: false,
    in: { effect: 'flipInY' },
    out: { effect: 'fadeOut', sync: true, }
});

var l1 = $("#l1");
var inview = new Waypoint.Inview({
  element: $('#l1'),
  enter: function(direction) {
  },
  entered: function(direction) {
    animatel1.textillate('in')
  },
  exit: function(direction) {
    animatel1.textillate('out')
  },
  exited: function(direction) {
  }
})  
});
4

2 に答える 2

1

クラスで機能させるには、要素の配列をループするだけです。あなたは jQuery を使用しているようです。

$(function () {
  $('.your-class').textillate({ 
      autoStart: false,
      in: { effect: 'flipInY' },
      out: { effect: 'fadeOut', sync: true, }
  });

  $('.your-class').each(function() {
    new Waypoint.Inview({
      element: this,
      entered: function(direction) {
        $(this.element).textillate('in')
      },
      exit: function(direction) {
        $(this.element).textillate('out')
      }
    });
  });
});
于 2015-02-24T06:29:42.503 に答える