Elementorのプラグイン「Unlimited Elements」でメニューをクリックした際に、三本線が矢印や×などに変化するエフェクトアニメーションがあります。(ハンバーガーメニュー)このアニメーションの速度を調整したいのですが、どこで調整するのかわかりません。
このウィジェットの管理画面に細かい設定をする画面があるのですが、設定箇所がよくわかりませんでした。この辺いじると調整できるよといったことが分かる方いらっしゃたら教えていただけますか?
アニメーションハンバーガーメニューの設定画面
Unlimited Elements > Edit Widget > Animated Hamburger Icon
のCSS項目に
.uc_hamburger .uc_line{
-webkit-transition: all 1.3s ease-in-out !important;
-o-transition: all 1.3s ease-in-out !important;
transition: all 1.3s ease-in-out !important;
}
を追加するとエフェクトアニメーションを調整することができます。
クラス名 .uc_line に0.3sのアニメーションがすでに設定されていますので、!importantで優先順位を変更し、もともとの設定を新しい設定で上書きする処置を行うと、エフェクトスピードをコントロールすることができます。
1.3sと設定している箇所の数字を変更することで、アニメーションスピードをコントロールできます。
TOFUラボに入れば更に多くの質問と回答のログが見れます!
© 2019-2022 nocodeweb.jp. All rights reserved.
DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。
管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通