スクロール進行アニメーション

スクロールの進行状況をアニメーション化する方法を知る必要があります。これは通常のスクロールの進行状況ではなく、何かが異なります。 Web サイトへのリンクと、探しているアニメーションが含まれる特定の部分のスクリーンショットを提供します。 https://todoist.com/これはウェブサイトへのリンクです。ウェブサイトのホームページの特定のセクションのスクリーンショットを添付しました。ページがスクロールされると、セクション内でスクロールが発生し、セクション自体もスクロールします。スクロールのそのセクションが完了したら、通常どおりスクロールを続けます。プログレスバーのスクロールに関するチュー...

P粉821808309 2024-03-29 19:36:49 0  1  394

svgアニメーションとcss3アニメーションの長所と短所は何ですか?

RT、トランジション アニメーション効果はどのような状況で、どのソリューションに適していますか?

曾经蜡笔没有小新 2017-05-16 13:21:17 0  1  633

CSS アニメーション名の具体的な意味は、アニメーションの塗りつぶしモードを指します。

最近、CSS を使用して、特定のクラスの不透明度が 0% から 100% になるアニメーションを作成してみました。しかし、class="bar" のアニメーションでいくつかの問題が発生しました。 anime-fill-mode はタイトル アニメーション (不透明度を変更します) だけでなく、バ​​ー アニメーションにも適用されることがわかります。アニメーションフィルモードにアニメーション名を指定する方法はありますか?作成に使用したコードは次のとおりです。 @keyframestitle{から{-私たち

P粉441076405 2023-09-13 10:16:28 0  1  546

CSS連続アニメーション

次の CSS コードがあります。問題は、アニメーションが希望どおりに動作するのですが、10 秒が経過するとリセットされてしまい、見苦しいことです。理想的には、再起動する代わりに画像をラップし、画像の左側がキャンバスから出たときに右側から戻ってくる無限アニメーションを実現したいと考えています。 @keyframesscrollRight{0%{背景の位置-x:30%;}100%{背景の位置-x:130%;}}.onrir{背景

P粉928591383 2024-03-20 12:30:42 0  1  457

リアクティブなモーダル スライド アニメーション

ReactとCSSでモーダルを実装しました。現在、モーダルを開くと、モーダルが下から上にスライドするスライドアップアニメーションを実装していますが、閉じるときにスワイプして下に移動したいのですが、方法がわかりません下にスワイプするアニメーションを正確に作成するために、誰か手伝ってくれませんか?コード=>import"./styles.css";importreact,{useState}from"react";exportdefault

P粉514458863 2023-08-30 22:49:29 0  1  555

javascript - 奇妙な問題が見つかりました。タブを閉じると、作成した CSS アニメーションが自動的に一時停止されました。

奇妙な問題が見つかりました。私が作成した CSS アニメーションは、タブを閉じると自動的に一時停止し、タブを展開すると再生し続けます。動きの効果を出すために背景画像を動かして使っているのですが、これと関係があるのでしょうか？

给我你的怀抱 2017-06-30 09:52:30 0  1  835

後続のクラスが要素に追加されるたびに CSS アニメーションを実行する方法

要素をアニメーション化できるように CSS アニメーション クラスを設定しました。入力ボタンがクリックされるとこのクラスが追加され、例の入力ボタンがクリックされるたびに画面に飛ぶようにしたいです。ただし、これは初回のみ機能し、それ以降の入力クリックでは要素はアニメーション化されません。ここで何が足りないのでしょうか？ $(document).ready(function(){jQuery('#cloc').click(function(){jQuery('p').removeClass('anim

P粉714780768 2023-09-09 22:36:42 0  1  543

html - jquery で setInterval を使用して歯車をループでスクロールさせる

現在作成しているアニメーションは、マウスがホバーしているときにスクロール イベントがトリガーされるもので、ページが読み込まれた後に歯車が展開され、一定期間後に再び元に戻るというものです。時間の。右スクロール、左スクロールどちらも実現できるのですが、jqueryで「一定時間経過後+ロールアウトしてロールバック…」の書き方が分かりません。

習慣沉默 2017-05-16 13:25:04 0  3  823

JavaScript - 2 つのスワイパーがネストされており、外側のスワイパー アニメーションが初期化されると、アニメーション要素は非表示になり、表示されません。

初期状態：2ページ目にスライドしてから元に戻すと、アニメーション要素が表示され、アニメーションが正常に再生されます JSコード

我想大声告诉你 2017-05-19 10:32:28 0  1  757

JavaScript - 時間に応じてコンポーネントを回転 (アニメーション) させるにはどうすればよいですか?

アニメーションのようにコンポーネントを画面上で回転させる方法はありますか? Autodesk Forge WeChat ディスカッション グループ – pochao 質問する

phpcn_u1582 2017-05-19 10:09:55 0  1  569

JavaScript - React でアニメーション効果を記述するにはどうすればよいですか?

React でコンポーネントのアニメーション効果を作成するにはどうすればよいですか?たとえば、単純なダイアログ ボックスの場合、[キャンセル] をクリックした後、ダイアログ ボックスが最初にフェードアウトしてから消えるようにしたいと考えています。 jquery を使用する場合、非常に簡単です。まず animate({ //Fade CSS}, function(){ //DOM}) を実行します。でも、どうやって反応すればいいのかわかりません...

世界只因有你 2017-05-18 10:58:34 0  2  730

Javascript Html CSS ロード時の数値カウンター アニメーション プリローダー ウィンドウ

自分のポートフォリオ Web サイトでナンバーカウンターのアニメーションを作成したいと考えています。私の古いWebサイトには、完全にロードされたときにプリローダーからWebサイトに移行するjqueryコードがいくつかあります。 <script>$(window).on('load',()=>{$('#preloader').fadeOut(1800,function(){$(this).remove();});}); </script>数字カウンターのアニメーションを追加し、側面の向きを追加する方法

P粉523625080 2023-09-11 22:37:54 0  1  634

jqueryでアニメーションを停止する方法

ボックスを右に移動させるにはturnRightメソッドを実行し、ボックスを左に移動させるにはturnLeftメソッドを実行します。デフォルトではボックスは右側にあります。 {コード...}turnRightメソッドとanimateアニメーションメソッドに、console.log("end")を実行するコールバック関数を追加しました。ここで質問があります...

某草草 2017-05-16 13:43:21 0  3  568

JavaScript - トランジションの高さの自動トランジションアニメーション

1. 縮小時にアニメーション効果がないのはなぜですか? 2. コード {code...} 3. オンライン デモ (解決済み)

大家讲道理 2017-05-16 13:21:31 0  3  806

Vue.js で、ボタンをクリックしてアニメーションをランダムに生成します

3 つの Lottie プレーヤー JSON アニメーション ファイルがあります - congratulations1.json、congratulations2.json、congratulations3.json アニメーションは次のとおりです。 Congratulations 1: <lottie-playerv-if="showPlayer1" class="justify-content-center" src=" . ./../../

P粉722521204 2024-03-27 23:57:52 0  1  370

ホバー時にアニメーションを一時停止し、マウスが離れるとアニメーションを継続する方法

私はいくつかの解決策にうんざりしましたが、これが私が得た最も近い解決策です。しかし、この結果にはまだ満足していません。マウスが要素から離れると、要素は元の回転に戻ってしまうからです。要素の上に移動すると、マウスが要素から離れた場合でもアニメーションがトリガーされるという考えです。要素の上にマウスを移動すると、アニメーションが再生されて 0 度に留まり、マウスが離れると別のアニメーションが再生され、回転して -8 度に戻ります。 consstelements=document.getElementsByClassName('rota

P粉786800174 2024-04-01 09:43:54 0  1  441

recyclerviewアイテムのプログレスバーアニメーションandroid - recyclerviewアイテムのプログレスバーアニメーション

デモを書くにあたり、recyclerview内の項目のプログレスバーをアニメーションさせたいので、setProgress()を連続して設定して書いていますが、実際の処理では、判断しても間違った項目でアニメーションが再生されてしまいます。その場合、再利用の場合はキャンセルの場合はどうすることもできません。 。 ...

扔个三星炸死你 2017-06-08 11:02:32 0  1  1238

css - CSSカルーセル切り替えアニメーション

図のように、JSで書いたアニメーションに過剰なエフェクトを設定するとこのような状況が発生しますが、JSではこの状況をどう変えることができるのでしょうか？ {コード...}

習慣沉默 2017-06-12 09:33:00 0  1  867

透明性とアニメーションを維持しながら、アニメーション SVG ファイルを Next.js 13 にインポートするにはどうすればよいですか?

Next.js13 にアニメーション SVG ファイルをインポートする importImagefrom"next/image";exportdefaultfunctionHome(){return(<mainclassName="flexh-screenflex-colitems-center"><divclassName="containermt-12flex"

P粉322106755 2024-03-27 13:38:40 0  1  480

jqueryの幅の切り替えアニメーションを途中で停止して再び閉じるようにするにはどうすればよいですか?

この質問はわかりにくいかもしれませんが、例を挙げてみましょう。幅を切り替えるボタンをクリックすると、ボタンを押した後も div がアニメーションし続けます。これは驚くべきものではありません。私が望むのは、div が途中で停止して別の方向に進み、ボタンがもう一度押されたときに既存のアニメーションを完了しないことです。 $(document).ready(function(){$('.menuToggle').click(function(){$(".menuContainer").anim

P粉238355860 2024-03-19 23:49:40 0  2  368