【当サイトはアフィリエイト広告を利用しています】

jQueryを使ってフェードイン／アウトするSNSボックスを作成する

2013年4月27日

今回もお問い合わせを頂いたので記事にしました

Hide and seek
Hide and seek / Two Roses

当ブログをPCブラウザで見た時、ページを一定位置までスクロールすると画面の左からビヨーンとフェードインして現れる、TwitterやFacebookなどの「SNSボックス」。一定位置より上にスクロールで戻ると逆に画面外へとフェードアウトするようにも設定してます。

この機能は昨年末のカスタマイズ作業にて実装しました。当時のカスタマイズまとめ記事に書いています。

【参考】年末ブログカスタマイズ祭り・最近の流行を反映させてみた*

以前、「トップに戻るボタン」の再作成でjQueryを導入した際も、設置した直後に「作り方を教えて！」というリクエストがあり、記事を書きました。

【参考】トップに戻るボタンをjQueryでニュルッと改造する*

今回紹介するSNSボックスの作り方も、上記の「トップに戻るボタン」を応用させて作った機能になります。

本日、このSNSボックスに関して「ソースコードを教えて欲しい」というリクエストを頂きましたので、早速エントリーを書いてみます。

まずは「jQuery Easing Plugin」を導入する

screenshot_201304_044

↑jQuery Easing Pluginのページで「jquery.easing.1.3.js」というファイルをダウンロード。

ダウンロードしたファイルをサーバにアップロードします。アップロード先は自分のブログが現在使用しているテーマフォルダでいいと思います。私はテーマフォルダに「js」というサブフォルダを作り、その中にjQuery関連ファイルを全てアップしてます。

アップロードが完了したら、ブログのheadタグ内にjQueryの宣言コードを追加します。

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.3.js', array('jquery')); ?>

1行目をすでに書いている場合は重複して追加する必要はありません。

2行目が今回の追加コード。WordPressであれば「header.php」というテンプレートファイルがヘッダー定義になってると思いますので、その中の「wp_head」を定義している直前に追加しています。

私自身、まだあんまりjQueryが分かっていないので、いろんな記事を参考にしながら作ってます。上で紹介したjQuery Easing Pluginに関しては、以下記事がとても分かりやすく解説して下さっていて、私もこちらで勉強して設置に成功しました。

http://ozpa-h4.com/2012/12/11/jquery-easing-plugin-effect-pattern/
jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた | OZPAの表4*

記事ページにSNSボックスのHTMLコードを追加する

headタグの記述が終わったら、次はSNSボックスのHTMLコードを追加します。私は記事ページテンプレート（single.phpなど）の先頭に以下のコードを追加しています。

<ul class="snsLeftFix">
<li><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" 
title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 
alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div>
</li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-url="<?php the_permalink(); ?>" data-lang="ja" data-count="vertical" data-text=" RT @★★アカウント: <?php the_title(); ?>">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li><g:plusone size="tall"></g:plusone>
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</li>
</ul>

SNSボックスはulタグで作成。ulタグにクラス「snsLeftFix」を設定し、CSSでデザインを変更できるようにしています。

各ボタンのコード内訳は、

◆はてなブックマークボタン … 2～6行
◆Facebookいいね！ボタン … 7～8行
◆Twitterシェアボタン … 9～11行
◆Google+ボタン … 12～21行

となっています。3つめのTwitterシェアボタンは「★★アカウント」という箇所をご自身のTwitterアカウントに変更してください。

CSSでデザインを整える

次はCSS。以下のサンプルコードは私の記述例ですので、お使いのブログに合うよう自由にカスタマイズされてください。

.snsLeftFix {
	padding: 10px;
	margin-left: -700px;
	top: 165px;
	position: fixed;
	background-color:#fafafa;
	border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px; /* Safari,Chrome */
}
.snsLeftFix li {
	list-style-type: none;
	margin: 5px 0;
}

重要な箇所は3つ。3～5行目です。

まず「margin-left（3行目）」と「top（4行目）」で値を指定しています。ページ先頭から165ピクセルほど下の位置。

左側はマイナスの値を指定してますので、ブラウザの外、つまり画面外に設置する指定となり、最初はSNSボックスが見えてない状態。

さらに「position: fixed（5行目）」の指定により、画面をスクロールしてもSNSボックスは固定されて同じ場所から動かない、というカラクリ。

この値を「ある位置まで来たらmargin-leftの値を変更しSNSボタンをページ内に出現させる」のと、「最初にインストールしたjQuery Easing Pluginの機能を利用してアニメーション効果を付ける」のがjQueryのお仕事。

jQueryでフェードイン／フェードアウトの動きを指定する

最後はjQueryのコード。私は前述の通り、使用中のWordPressテーマフォルダに「js」というサブフォルダを作り、その中にjQueryファイルをアップロードしています。

jQuery(function() {
	var showFlug = false;
	var snsLeftFix = jQuery('.snsLeftFix');
	snsLeftFix.css('margin-left', '-700px');
	jQuery(window).scroll(function () {
		if (jQuery(this).scrollTop() > 900) {
			if (showFlug == false) {
				showFlug = true;
				snsLeftFix.stop().animate({'margin-left' : '-100px'}, 650, "easeOutBounce"); 
			}
		} else {
			if (showFlug) {
				showFlug = false;
				snsLeftFix.stop().animate({'margin-left' : '-700px'}, 800, "easeInOutBack"); 
			}
		}
	});
});

1行目、3行目、5行目などで、カッコの前に「jQuery」と付けてますが、通常jQueryではここを「＄」と書きます。しかしWordPressでは「＄」だと正常に動かない時があるため（細工をすれば動くようになります）、jQueryという文字列に置換しています。

3行目では、jQueryが処理する対象クラスとして、先ほどSNSボックスのulタグで命名した「snsLeftFix」を指定します。

6行目は「判定文」で、スクロール位置が上から900という値の分だけ下がったのか、それとも下がってないのかを判定しています。900という値を大きくすればするほど、SNSボックスの出現するスクロール位置がどんどん下になります。

7～10行がフェードイン処理。上から900の位置になると、SNSボックスが画面の外からビヨーンと現れます。

「650」はフェードインの速度。「easeOutBounce」指定でフェードインの際にトントンッとバウンドする表示効果になります。

12～15行がフェードアウト処理。900の位置より上に戻ると、snsボックスが画面の外にビヨーンと消えていきます。

「800」はフェードアウトの速度。「easeInOutBack」指定で、フェードアウトの前にいったん右に少しだけ寄った後で加速し、左にブシューンと消えていく表示効果になります。

「easeOutBounce」「easeInOutBack」の他にも様々なエフェクト効果が用意されています。詳しくは上で紹介したおつぱさんの記事に「エフェクト一覧ページ」があります。

私もおつぱさんの記事でエフェクト効果を全て試してインスピレーションを受け、自分なりにカスタマイズしてSNSボックスのエフェクトにアレンジしました。他にどんな動きがあるのか興味ある方はぜひご覧になってください。

まとめ

SNSボックスにアニメーションみたいな表示効果をつけたのは、自分自身がjQueryを勉強したかったこともあるし、ちょっと物珍しい表示効果をつけて誰かに「お？」と思ってもらえればいいなというのもあります。

jQueryは様々な面白い動的変化をWebページに与えることが出来ます。使いこなせると楽しいですよ。私はまだまだ使いこなせてないし勉強不足なんですけども。

そういえば、Web開発者でjQueryを勉強したい人は大半が持っている（私も持ってる）名著、通称ドーナツ本の改訂版がつい最近出版されました。最新のjQueryに対応した内容になってますので、今からjQueryを勉強するぞ！という方はぜひ一読されることをオススメします。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

posted with ヨメレバ
西畑一馬 アスキー・メディアワークス 2013-03-07
Amazon
楽天ブックス

-WordPress
-