要素にエフェクトをかける「Creative Gooey Effects」の使い方

要素にエフェクトをかける「Creative Gooey Effects」の使い方

「Creative Gooey Effects」は要素にエフェクトをかけるjQueryプラグインです。
ただ、おおむね、エフェクトの内容は決まっているので、タグを書き換えたりすると、かなり面倒な感じがします。

配布元ではパターンの決まったエフェクト数種類を配布しています。
今回はその中からSNSのシェアボタンにエフェクトをかける内容を実装していこうと思います。

サンプルとして配布しているテンプレートでは、フッター部分、全ページ共通で設定しています。
個別ページで設定したい方は、全ページで共通のファイルに記述設定をせず、ページ毎にいろいろな記述設定をしてください。

では、行きたいと思います！

以下が本家サイトです。
以下のサイトで諸々のファイルをダウンロードして頂けます。

• Creative Gooey Effects

また、以下がSNSシェアボタンのエフェクトのデモになります。

• デモ

phptemp_cge_160603.zip

「Creative Gooey Effects」を組み込んだページのサンプルです。

• 組み込み済みサンプル

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

今回は若干の修正を要するため、一つずつ順番に記載していきます。
全体の流れで憶えてしまうと記述ミスをしやすいところですので、細かい修正に配慮していきましょう。

重ねてですが、今回はSNSシェアボタンのエフェクトを実装しますので、他にもエフェクトのパターンはありますがそれらは無視していますので、そのつもりで宜しくお願い致します。

本家から本体ファイル「CreativeGooeyEffects.zip」をダウンロードしてきます。
その中にある以下のファイルが必要になります。

• /css/normalize.css
• /css/share.css
• /fonts/~
• /js/jquery.min.js
• /js/share.js
• /js/TweenMax.min.js
• /share.html の中身

まず、「/fonts/~」はそのままルートディレクトリに設置してください。
別にルートディレクトリに置く必要はないかもしれませんが、サンプルではルートに設置しています。

cssファイルとjsファイルは、全ページ共通ですので、「/_set/~」にある「css.php」や「js.php」で読み込ませるように記述設定してください。
「/fonts/~」の読み込ませも、とりあえず「css.php」に記述してください。

この時、「share.css」内に記述されている「.share」の部分はcssファイル内では削除し、ヘッダに直書きしてください。
「.share」でフィルターが設定されているのですが、この部分はページ毎にフィルターを設定することになっていますので、ヘッダー内に直書きしないと正常に動作しません。

また、記述の順番にも拘らなければいけません。 ということで、上記の内容を整えると、css.phpは以下のソースのようになります。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=0.6667,user-scalable=no" />

<link href="/css/normalize.css" type="text/css" rel="stylesheet" />

<style type="text/css">
.share {
	max-width: 100%;
	height: 100px;
	margin: 0 auto;
	-webkit-filter: url("#goo");
	filter: url("#goo");
	position: relative;
}
</style>

<link href="/css/sp_default.css" type="text/css" rel="stylesheet" />
<link href="/css/sp_main.css" type="text/css" rel="stylesheet" />
<link href="/css/sp_top.css" type="text/css" rel="stylesheet" />
<link href="/css/sp_content.css" type="text/css" rel="stylesheet" />
<link href="/css/tbl_default.css" type="text/css" rel="stylesheet" />
<link href="/css/tbl_main.css" type="text/css" rel="stylesheet" />
<link href="/css/tbl_top.css" type="text/css" rel="stylesheet" />
<link href="/css/tbl_content.css" type="text/css" rel="stylesheet" />
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<link href="/css/main.css" type="text/css" rel="stylesheet" />
<link href="/css/top.css" type="text/css" rel="stylesheet" />
<link href="/css/content.css" type="text/css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="/fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/fonts/vicons/vicons-font.css" />
<link rel="stylesheet" type="text/css" href="/css/share.css" />

直書きした「.share」ですが、横幅を「100%」に修正しました。
また、「filter」の「url」指定についても、そのページ内を指定するように修正しています。
でないと、レスポンシブ対応の時に困った感じがしましたので、修正をした次第です。
もともとの状態でも動くようなのですが、気になったところでした。

「js.php」に関してはそのまま読み込ませるだけですので、特に注意する点はありません。
サンプル通りにしてみてください。

cssとjsの読み込みが完了しましたら、次にhtml部分の記述をコピペしたいと思います。
以下に記載する内容を「/_set/foot.php」内に記述してください。

<div class="share">
<button class="share-toggle-button"><i class="share-icon fa fa-share-alt"></i></button>
<ul class="share-items">
<li class="share-item"><a href="#" class="share-button"><i class="share-icon fa fa-facebook"></i></a></li>
<li class="share-item"><a href="#" class="share-button"><i class="share-icon fa fa-twitter"></i></a></li>
<li class="share-item"><a href="#" class="share-button"><i class="share-icon fa fa-pinterest"></i></a></li>
<li class="share-item"><a href="#" class="share-button"><i class="share-icon fa fa-tumblr"></i></a></li>
</ul>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -15" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
</svg>

当サイトのサンプルでは、「#footshare」という枠を作り、その枠の中に記載しています。

ここで、各種main.cssに追記と修正をいれていきます。
以下にそれぞれのファイル毎の追記例を記載致しますので、そのまま使って頂いても大丈夫です。

#footshare {
	width: 100%;
	margin: 0 auto;
}

.share {
	margin: 0 auto -155px auto;
}

#footshare {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	height: 100px;
}

#footshare {
	width: 100%;
	margin: 0 auto;
	height: 100px;
	overflow: hidden;
}

PCとスマホでは、若干のブラウザバグがあり、高さが整わなかったため、デバイス毎に記述の内容が異なります。
この辺りはうまく調整ができるようでしたら、上記のような修正は必要ないかもしれません。

ということで、上記で設定が完了ですので、そのままアップしてください。
特に問題なく動作すれば完了です。

サイト内全ページに適応するつもりで書きましたが、トップページのみに表示させるなどでしたら、cssはヘッダに直書きする必要がなかったり、いろいろと改修が必要になります。
構成や構造や原理をご理解頂き、適宜修正してみてください。

因みにですが、アイコンの修正については、「Font Aweasome」というアイコンフォントというモノがありまして、それでコントロールしています。

• Font Aweasome

使い方については別途紹介したいと思いますが、とりあえずは「そういうモノもあるんだね」的な感じで捉えて頂ければと思います。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。
• 設定部分のCSSの書き方は、本テンプレート向けに若干の修正をしました。
  どのような環境でも適宜修正が必要になると思われます。

いかがでしたでしょうか？
今回の修正の類は若干の手間と言いますか、面倒な感じがしますね。
スマホの対応においても、古い機種だと若干のクセが出るような感じがしました。

他にも数種類のエフェクトを実装することが出来るようですが、若干、過剰なエフェクトな感じがせんでもない・・・という感じがします（笑）
単一ページでインパクトを残しに行くようなページであればいいかもしれませんが、リピートを狙って何度も見てもらうようなシーンでは飽きがくるかもしれません。

今回は目立たない感じでどのようなサイトでもお使い頂けそうなソーシャルボタンの設置に関するエフェクトを実装しましたが、実装要領はどのエフェクトも変わりません。
ということで、必要に応じて使い分けてくださいね。

執筆 : 清水 隼斗

要素にエフェクトをかける「Creative Gooey Effects」の使い方のAMPページ