問題タブ [inview]

ページがスクロールされたときにイベントを発生させようとしていanimate.cssます (1 ページャー)。

.animate基本的に、たとえばクラスを持つビュー内のすべてのvisible要素にたとえばクラスを追加するにはjqueryが必要です.anim

追加のポイント: data-delay 属性を html に追加して、jquery が遅延して解析する方法がある場合

たとえば、こんにちは

私はかなり奇妙で複雑な機能に取り組んでいます。アイデアは、スライダーを実行するタイマーがあるということです。このタイマーは、スライダーがホバーされる (つまり、スライダーの動きが止まる) とクリアされます。また、スライダー (または、その親コン​​テナー) が表示されなくなったときにタイマーをクリアしたいと考えています。プラグインの inview を使用すると、要素がビューポートにあるかどうかを確認できます。親要素がビューポートに表示されなくなったら、タイマーをクリアします。ただし、これは機能しておらず、その理由がわかりません。ホバー時にタイマーをクリアすると機能します。ここにフィドルがあります。

機能していない部分：

ご覧のとおり、イベントはコンソールに記録されるため、トリガーされますが、スライダーは停止しません (コンソールでわかるように: クラスは引き続き割り当てられ、.twitter 内の .articles に削除されます。これは、タイマーがはクリアされません.しかし、なぜでしょうか?私はそれを理解できません.タイマーはグローバルに設定されているので、問題にはなりません.

編集: どうやら、ホバー時のタイマーのクリアも機能しないようです...すべての console.logs が機能するため、奇妙です。ANDtimerはグローバル変数として設定されます。

私は Velocity.js と jquery.inview をいじっています。私のページのすべてのタイトルが表示されたら、slideDownIn にしたいです。このコードは、最初のタイトルで正常に機能します。

上記を数回コピーして貼り付け、.movies-title他のタイトルのクラスに置き換えると、思いどおりに機能します。

ただし、それは多くの余分なコードのようです。に変更しようとし$('.movies-title')まし$(.movies-title, .tv-title, .books-title)たが、アニメーションはリストの最後の要素に対してのみ機能します。.titleまた、すべてのタイトルに呼び出される新しいクラスを追加して変更しようとし.movie-titleまし.titleたが、それも機能しませんでした。

私は何を間違っていますか？コードを要約するにはどうすればよいですか?

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

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

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

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

HTML

jQuery

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

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

jquery inview プラグインを使用して、ビューポート内にある要素にクラスを追加しようとしています。何らかの理由で、他の要素がビューポートにはっきりと表示されているにもかかわらず、プラグインはクラスを最後の要素にのみ追加します。以下は私のコードです：

html:

jquery:

1週間以上前からこの問題があり、気が狂っています。私は「コード」のような男ではなく、ここまでやってきたという事実にもかかわらず、私は本当に限界に達しています。誰かが私の問題を解決するのを手伝ってくれることを願っています。

だから、ここに私の問題があります: 私は 3 つのプラグインを使用しています: Flexslider、Inviewevent ( https://remysharp.com/2009/01/26/element-in-view-event-plugin ) および Scrollify。私のウェブサイトはセクションに分かれており、すべてのセクションがフルスクリーンです。scrollify プラグインとそのウェイポイント システムのおかげで、ユーザーがスクロールするかキーボードを使用するたびに、ウェブサイトはスライド アニメーションで次のウェイポイントに自動的にスクロールします。すべてのセクションがフルスクリーンなので、スクロールバーを無効にしました。ユーザーが垂直方向と水平方向にスクロールできるようにしようとしているため、Flexslider を使用しています。アイデアを提供するために、私はこのウェブサイトに非常に触発され、基本的に同じことを達成しようとしています: http://www.kunstler.it/ .

現在、Flexslider プラグインには「キーボード」というオプションがあります。ブール値です。「true」の場合、ユーザーはキーボードの矢印を使用してスライドからスライドに移動できます。私の問題は、表示されていなくても (Web サイトの別のセクションにいるとき)、スライダーがまだキーボード入力を登録していて、気になることです。スライダーが表示されていないときにユーザーがスライダーを操作できるようにしたくありません。したがって、プラグイン Inviewevent を使用して条件を作成しています。スライダーが表示されている場合はキーボードが機能し、そうでない場合は機能しません。モバイルのタッチスワイプ機能についても同様に行いますが、プラグインでもオプションが提供されているため、基本的に同じはずなので、今のところキーボードに焦点を当てています。

これが私のJqueryです：

});

それだけです。全く違う方法かもしれませんし、とにかくここまで来れたのはもう奇跡です。私が行ったことのいくつかは、人間工学的または推奨されていないことは確かです。そのため、気が向いたら、ためらわずに修正してください。また、明確さの欠如、語彙/スペルミス、および最終的な奇妙な文についてもお詫びしたいと思います。英語は私の母国語ではありません。また、私はコーディングが苦手であることを覚えておいてください。HTML と CSS は簡単なことですが、javascript の理論は理解していますが、JavaScript は私の友達ではありません。最後に、使用するすべてのプラグインへのリンクを追加したかったのですが、まだ十分な評判がないため、2 つ以上のリンクを投稿できません。Inviewevent は、見つけるのが最も難しいという理由だけで残しました。残りは Google から簡単にアクセスできます。誠に申し訳ございません。

それだけです...何か質問があれば、または私に何か正確に言う必要がある場合は、明らかに対応できます。あなたの英語について心配する必要はありません。そして最後に ; 技術的なことをすることにした場合は、私に説明してみてください。単にコピー/貼り付けするのではなく、自分自身を学び、改善したいからです。前もってありがとう、心から、唖然とした男:)