無料のElementorだけで作ったヨガのコミュニティのLPのテンプレート

Elementorの新しい
無料テンプレートサイトが追加されました!

質問:

ElementorプラグインUnlimited Elementsのハンバーガーメニューでアニメーション速度の調整はどうしたらできますか?

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ラボに入れば更に多くの質問と回答のログが見れます!

関連した質問

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通