Rinkerのボタンにマテリアルデザインのリップルエフェクトのようなアニメーションを付けてみました。
CSSのみでカスタマイズしています。
こんな感じになります。
目次
リップルエフェクトとは？
マテリアルデザインのアニメーションの1つで、波紋が広がるようなエフェクトです。
今回はクリック時やホバー時に限定せず、常時アニメーションさせるやり方を使いました。
クリックした所を起点にエフェクトを出す場合は、cssだけじゃなくてjsも使うんじゃないかなぁと思います。
リップルエフェクトの実装に際してはこちらを参考にさせていただきました。
Rinkerのボタンのエフェクトのカスタマイズ
お伝えしたいことを先に挙げます。
- 詳しくない上で強引に実装させているので、スマートではないです。
もし試される場合は、バックアップを取られる事をオススメします。 - お使いのWordpressテーマによって結果が異なる場合が有ったり、
既にカスタマイズしている場合には整合性などもご留意ください。
カスタマイズ内容はこちらです。
外観→カスタマイズ→追加CSSに追記するだけです。
/*Rinker Ripple Effect*/
div.yyi-rinker-contents ul.yyi-rinker-links li a {
text-decoration: none !important;
text-align: center;
white-space: nowrap;
line-height: 0.2;
color: #fff !important;
display: inline-block;
margin: 0;
padding: 1.6em;
position: relative;
overflow: hidden;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a::before {
display: inline-block;
position: absolute;
z-index: 1;
top: 300%;
left: 50%;
transform: scale(0) translateY(-50%) translateX(-50%);
transform-origin: left top;
border-radius: 50%;
content: '';
width: 10em;
height: 10em;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0;
animation: plzTap 3s ease-out 0s infinite;
}
@keyframes plzTap {
from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}
div.yyi-rinker-contents ul.yyi-rinker-links li a::after { content: ''; clear: left; }Rinkerのボタンの表示名のカスタマイズ
ボタンの表示名はショートコードで変える方法も有ると思いますが、僕の場合はプラグインエディターからRinkerのyyi_rinker_abstract.phpを選択して700行付近を下記のように変更しました。
‘label’の「Yahooショッピング」の部分のみを短く変えました。
self::SHOP_TYPE_AMAZON => [
'column' => 'amazon_url',
'label' => 'Amazon',
'column' => self::MOSHIMO_AMAZON_ID_COLUMN,
'val' => self::MOSHIMO_SHOP_AMAZON_VAL,
],
self::SHOP_TYPE_RAKUTEN => [
'column' => 'rakuten_url',
'label' => '楽天市場',
'column' => self::MOSHIMO_RAKUTEN_ID_COLUMN,
'val' => self::MOSHIMO_SHOP_RAKUTEN_VAL,
],
self::SHOP_TYPE_YAHOO => [
'column' => 'yahop_url',
'label' => 'Yahooショッピング',
'column' => self::MOSHIMO_YAHOO_ID_COLUMN,
'val' => self::MOSHIMO_SHOP_YAHOO_VAL,
],
];こんな感じです。一部のid部分は記述していないので実際はもっと長いです。
self::SHOP_TYPE_AMAZON => [
'column' => 'amazon_url',
'label' => 'Amazon',
'column' => self::MOSHIMO_AMAZON_ID_COLUMN,
'val' => self::MOSHIMO_SHOP_AMAZON_VAL,
],
self::SHOP_TYPE_RAKUTEN => [
'column' => 'rakuten_url',
'label' => '楽天市場',
'column' => self::MOSHIMO_RAKUTEN_ID_COLUMN,
'val' => self::MOSHIMO_SHOP_RAKUTEN_VAL,
],
self::SHOP_TYPE_YAHOO => [
'column' => 'yahop_url',
'label' => 'Yahoo！',
'column' => self::MOSHIMO_YAHOO_ID_COLUMN,
'val' => self::MOSHIMO_SHOP_YAHOO_VAL,
],
];以上です、お疲れさまでした！
コメント