11/29 FF14トレーラーまとめを追記しました

RinkerのボタンにリップルエフェクトをCSSのみでカスタマイズする方法

URLをコピーする
URLをコピーしました!
Rinker カスタマイズ リップルエフェクト

Rinkerのボタンにマテリアルデザインのリップルエフェクトのようなアニメーションを付けてみました。
CSSのみでカスタマイズしています。

こんな感じになります。

rinker ripple css
目次

リップルエフェクトとは?

マテリアルデザインのアニメーションの1つで、波紋が広がるようなエフェクトです。
今回はクリック時やホバー時に限定せず、常時アニメーションさせるやり方を使いました。
クリックした所を起点にエフェクトを出す場合は、cssだけじゃなくてjsも使うんじゃないかなぁと思います。

リップルエフェクトの実装に際してはこちらを参考にさせていただきました。

Rinkerのボタンのエフェクトのカスタマイズ

お伝えしたいことを先に挙げます。

  • 詳しくない上で強引に実装させているので、スマートではないです。
    もし試される場合は、バックアップを取られる事をオススメします。
  • お使いのWordpressテーマによって結果が異なる場合が有ったり、
    既にカスタマイズしている場合には整合性などもご留意ください。

既に分かっていることは次の3点です。
・微妙に下側がエフェクトが掛かっていません。
・スマホから見た場合に微妙に右に寄っています。
・ボタン名が長い場合にサイドバーに設置した際などでは表示が崩れます。
※ white-space: nowrap;で固定してボタン名を短くして対処しています。

コードはよく分からないので、どなたかが改良してぜひ教えて頂ければ大変うれしく思います!
※ こんな感じで変えたいという叩き台を出して、叶えば良いなぁが目的です。

カスタマイズ内容はこちらです。
外観→カスタマイズ→追加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,
		],
	];

以上です、お疲れさまでした!

0
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

この記事を書いた人

元々はFPS民でSF1、AVA、CSGO、PUBG、APEXを触りました。いくつかのタイトルで大会も出たけど手が震えてさくっと負けました。
FPS以外はFF14、TERA、B&S、LuviniaSaga、ToS、PSO2、マビ英、Kurtzpel、ShadowArena、FallGuysなどと雑食です。
FF14を長くやっていて邂逅編の頃にガチ廃人でした。今はのんびりギャザクラやってる感じの人です。

オススメ記事

コメント

コメントする

目次
閉じる