Elementorで動き続けるアニメーションボタン（ぼよよん・点滅・キラリン）を作る方法　その①

エレメンターの使い方
2025.01.14

Elementor（エレメンター）で動き続けるボタン（loop animationボタン）を作ってみたいと思います。

Elementorには標準で「高度の設定」→「モーション効果」という機能がありますが、スクロール時、マウスで触れたとき、パーツを読み込んだときの3パターンで、「動き続ける」アニメーションが見当たりません。

 

結論から言うと、Elementorの標準では理想のループアニメーション機能はありません。

プラグインを駆使するか、CSSを使うかの方法です。

そこで色々なプラグインを試したり、調べまくりましたのでまとめてみます。

スポンサーリンク

Elementor（エレメンター）で作る動き続けるボタンの条件

Elementorには、「モーション効果（エフェクト）」というアニメーションの機能がありますが、ページのスクロール時や読み込み時に1度だけ動く仕様で、「動き続ける（ループアニメーション）」の機能はありません。

当方の理想としては以下の通りです。

  • Elementorの無料版でも実装できるようにしたい
  • ボヨヨンと拡大縮小したり、ブルブル震えたり、上下に動いたりさせたい
  • 1度ではなくて、動かせ続けたい
  • 最悪有料のプラグインでもいい

です。

では、早速解説していきます。

Elementorで動かし続けるボタンを作る方法　その① プラグインを活用する

よく使うElementorのプラグインには、ボタンのウィジェットもありますが、ボタンに関して言えば、動かし続けるエフェクトを付けられるものを見つけられませんでした。
（唯一、The Plus Addons for Elementorには「スタイル」→Specialに「Continuous Animation（連続アニメーション）」というのがあるのですが、どうも有料版でしか使えないようです。有料版は1サイト35ドル/年）

まあ、高い金額ではないので有料版にしてもいいのですが、The Plus Addons for Elementorって結構重いんです＾＾；

マウスオーバーで動きのあるボタンも作れるので気に入っているのですが（こちらの記事で紹介しています）、プラグインを入れると動作が重くなるのと、他のプラグイン、Elementorとの干渉があったりするので好きなのに厄介という存在です・・。

Happy Elementor Addonsの「Floating Effects」を利用する

Happy Elementor Addonsもよく使うプラグインの一つですが、この機能に「Floating Effects」というものがあります。

ボタンだけでなく、選択したウィジェットやコンテナ全体に設定できます。

Happy Elementor Addonsを有効化すると「高度な設定」内に表示されます。

使用を開始すると上下左右に動かしたり、回転させたり、大きさを変えたりできます。
※使うテーマによって動かなかったり、プレビューモードでは動かない場合を確認しています。

上下左右に動いているかしら？

※上だけ、横だけも可能です。

回転を使ってみたわ

※X軸、Y軸、Z軸で設定できます。

ぼよよんになっているかしら？

※どのくらい大きくさせるか、速さなども変更できます

これなら、ボタンだけではなく、画像なども動かせるので、かなり理想に近いのですが、ただ、使っているテーマや他のプラグインの事情で？動かないときや表示されないときもあったりした、ということだけお伝えしておきます。（調べたらEssential Addons for Elementorが有効になっていると動かない？WidgetOptionと相性が悪く有効化していなくても動かなくなる？プレビューモードでは動かない？など動作確認に不明確な部分があります）

アニメーションスタイルシートを動かす

Jkitプラグインのボタン

希望としては、なるべくノーコードで行きたいので、個々にスタイルシートを使うのは本望ではないのですが、意外と思い通りの動きを【確実に】してくれるプラグインが見つからず、「やっぱりスタイルシートが確実か・・」という思いになりました。

また、良いプラグインが見つかれば当サイトでご紹介しますが、今考えられる方法としてはスタイルシートでのアニメーションが確実かもしれません。

Custom CSS for Elmentorを使うとElementorのフリー版でもカスタムCSSが使えるようになる！！

 Elementorの無料版だとカスタムCSSが使えませんが、サードパーティーのプラグインではスタイルシートを追加できる機能を追加できるものあります（Custom CSS for Elementor）。
 
 
 

カスタムCSSを使わない場合、ワードプレス全体やテーマ、個別ページ内にスタイルシートを記述して、パーツのIDやクラスに設定する方法になりますが、いづれもそれほど難しくはありません。

ボヨヨンや上下に動くアニメーション用のCSS

ElementorのPro版にはAIでスタイルシートが挿入できるので、それらを使えば動くアニメーション用のCSSを書いてもらえるかもしれませんが、できれば自分で理解できる範囲でスタイルシートをコピペで持ってきたいものです。

そこで、便利なサイトがあるのでご紹介します。

「CSS FOR ELEMENTOR」
https://filenewcreate.com/css-for-elementor/

こちらのページから、希望するスタイルシートをコピペして、各パーツのカスタムスタイルシートに入れ込めばOKです。
もし設定をして動かない場合はひとつコンテナを追加し、その中にボタンを入れ、コンテナの方にCSSを設定すると動く場合もあります。

PLUSE ANIMATION 
				
					selector {

  animation: pulse 1s infinite;
}
selector:hover {
  animation-play-state:  paused;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
PLUSE ANIMATION(SPORADICALLY) 
				
					selector {
animation: pulse-new 7s ease infinite;
}

@keyframes pulse-new{

0%{
transform:scale(1);
}
5%{
transform:scale(1);
}
10%{
transform:scale(1.1);
}
15%{
transform:scale(1);
}
20%{
transform:scale(1.1);
}
25%{
transform:scale(1);
}
30%{
transform:scale(1.1);
}
35%{
transform:scale(1);
}
100%{
transform:scale(1);
}

}
CRAZY PULSE 
				
					selector {
animation: horizontal-shaking 1s ease infinite;
}
@keyframes horizontal-shaking {
  0%{
transform:scale(1);
}
5%{
transform:scale(1);
}
10%{
transform:scale(1.1);
}
15%{
transform:scale(1);
}
20%{
transform:scale(1.1);
}
25%{
transform:scale(1);
}
30%{
transform:scale(1.1);
}
35%{
transform:scale(1);
}
100%{
transform:scale(1);
}
}
LEFT/RIGHT ANIMATION 
				
					selector {
animation: shake 5s infinite;
}
selector:  {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
selector:hover {
  animation-play-state:  paused;}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
BUZZ ANIMATION 
				
					selector {
animation: buzz 1s infinite;
}
selector:hover {
  animation-play-state:  paused;
}

@-webkit-keyframes buzz {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes buzz {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
UP/DOWN ANIMATION 
				
					selector {
  animation: UpDown 0.9s linear infinite;
  left: 0;
  bottom: 0;
  font-size: 4em;
    cursor: pointer;
animation-timing-function: ease-in-out;

}
selector:hover {
  animation-play-state:  paused;}
@keyframes UpDown {
  0% {
    bottom: 0;
  }
  50% {
    bottom: .3em;
  }
  100% {
    bottom: 0;
  }
}
FLOAT ANIMATION 
				
					selector {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }
}
SHAKE ANIMATION WITH DELAY 
				
					selector {
  animation: shake-animation 4.72s ease infinite;
  transform-origin: 50% 50%;
}
.element {
  margin: 0 auto;
  width: 150px;
  height: 150px;
  background: red;
}
@keyframes shake-animation {
   0% { transform:translate(0,0) }
  1.78571% { transform:translate(5px,0) }
  3.57143% { transform:translate(0,0) }
  5.35714% { transform:translate(5px,0) }
  7.14286% { transform:translate(0,0) }
  8.92857% { transform:translate(5px,0) }
  10.71429% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}

動画解説も見てみてね！

How to add a pulse animation to a button with elementor pro
in this video im going to teach you how to add css animation to any section of your site and make your site more eye cat…
www.youtube.com

キラリンボタンの作り方

上記の紹介サイトのように実装すれば、他にも動きのあるボタンは作れます。
例えば、キラリンと光るボタン。ワードプレスにはキラッと光るボタンのエフェクトが使えるテーマもありますが、エレメンターの標準ボタンには今のところありませんので、スタイルシートで実装するのが現実的です。

キラリンボタン 
				
					selector {
animation:reflection;
 position:relative;
overflow:hidden;
}
selector:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 3s ease-in-out infinite;
}
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.8; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

スタイルシートは別に追加して使いまわしてもOK

例えば、キラリンボタンは、他の要素にも使えるので以下のようにCSSを設定して、要素に「reflection」を設定し、使いまわした方がいいかもしれません。

画像に設定したり、見出し文などにもキラリン効果を追加できます。

スタイルシートを設定したい要素を選択したうえで「高度な設定」タブに移動するとCSSを設定できる項目があります。

				
					/*画像を光らせる*/
.reflection{

position:relative;
overflow:hidden;
}
 
.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 3s ease-in-out infinite;
}
 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.8; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

点滅ボタンの作り方

点滅もボタンだけなく、テキストなどにも使えるので別途スタイルシートに追加して使いまわすのが現実的かと思いますが、まずはボタン要素に追加してみます。

点滅ボタン 
				
					selector {
animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

こちらも要素を使いまわしたい場合は、別途CSSに追加した上で使いまわしてもOK。下記の「text_blink 」はご自分のわかりやすい名前にしてもらってOKです。

				
					.text_blink {
    animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
スポンサーリンク

コメント

タイトルとURLをコピーしました