おすすめ記事を右下から「にゅっと」表示する機能をjQueryで独自実装してみた。 | Select *
Web Web制作

おすすめ記事を右下から「にゅっと」表示する機能をjQueryで独自実装してみた。

オハヨウゴザイマス!
jQuery初心者の@deepblue_willです。

画面右下からおすすめ記事が表示されるのを他のサイトで度々見かけると思います。
それは「SimpleReach」というサービスを使えば簡単に導入できるものです。
自分も導入しようと思って「Simple Reach」に登録したのですが、いつまで経ってもメールが来ない
なのでjQueryを使って自分で実装してしまいました!

実装方法

私のブログはWordPressを使って実装しているので、Wordpressの例で説明します。

スクリプト

jQueryをサーバーのどっかに配置して、以下のスクリプトをheadタグ内に記述します。
<script type="text/javascript" src="{jQueryまでのパス}"></script><script type="text/javascript">// <!&#91;CDATA&#91;
	$(function() {
		DelayVisibleContents("#recommendSwitch", "#recommend", 120, 500, 500, 3000);
	});
	var DelayVisibleContents = function(t, c, h, d1, d2, m) {
		var f = 0;
		$(c).css({
			height : 0
		}).hide();
		setInterval(function() {
			var tPs = $(t).offset().top;
			var wHt = $(window).height();
			var bSc = $(this).scrollTop() + wHt;
			if(f == 0 && (bSc > tPs && bSc - m < tPs)) { 				f++; 				$(c + ":not(:animated)").css("display", "block").animate({ 					height : h + "px" 				}, { 					"duration" : d1, 					complete : function() { 						f++; 					} 				}); 			} else if(f >= 2 && (bSc <= tPs || bSc - m >= tPs)) {
				f--;
				$(c + ":not(:animated)").animate({
					height : "toggle"
				}, {
					"duration" : d2,
					complete : function() {
						$(this).css({
							height : 0
						}).hide();
						f--;
					}
				});
			}
		}, 300);
	}
// &#93;&#93;></script>


カスタマイズ方法を少し説明します。
5行目にあるDelayVisibleContentsというメソッドに渡す引数を変更すれば
カスタマイズが可能です。
引数の詳細は以下のとおりです。

DelayVisibleContents(d,c,h,d1,d2,m)

d
要素を表示する位置。このIDがある場所に差し掛かったら要素を表示します。
c
表示する要素のID。このIDのCSSをスクリプトで変更することによって、表示したり隠したりしてます。
h
要素の高さ
d1
要素を表示する速さ。短ければ短いほど素早く表示されます。
d2
要素を隠す速さ。短ければ短いほど素早く隠れます。
m
表示範囲。dの値からどこまで要素を表示したままにするかのpxを指定します。
私は記事タイトルと一緒にサムネイルも表示したかったので、高さを120としました。

HTML

表示する位置に以下のタグを記述します。
<div id="recommendSwitch"></div>


フッターの直前に以下のタグを記述します。
php get_footer()の直前が良いかと思います。
私はサムネイルを表示するためにこのようなコードになってますが、
いらない方はecho catch_that_image()辺りを削除してください。
<div id="recommend"><!--?php query_posts('showposts=1&orderby=rand');?-->
<!--?php if(have_posts()):while(have_posts()):the_post(); 	?-->あわせてどうぞ!

<!--?php the_title();?-->
<!--?php endwhile;endif;?-->

</div>


CSS

以下のCSSを追加します。適宜お好みで変更してください。
しかし以下の指定は必須なので必ずいれてください。
display:none;
position:fixed;
right:10px;
bottom:10px;
#recommend{
display:none;
position:fixed;
right:6px;
bottom:6px;
width:300px;
height:auto;
padding:5px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
border-radius:10px;
line-height:1.1;
background: #f6dfea; /* Old browsers */
background: -moz-linear-gradient(top, #f6dfea 0%, #f2d2e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6dfea), color-stop(100%,#f2d2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6dfea 0%,#f2d2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6dfea 0%,#f2d2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6dfea 0%,#f2d2e2 100%); /* IE10+ */
background: linear-gradient(top, #f6dfea 0%,#f2d2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6dfea', endColorstr='#f2d2e2',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 0px 2px 0px #4A494A;
box-shadow: 0px 0px 2px 0px #4A494A;
border: 1px solid #b8b7b8;
}
#recommend p{
padding-top:4px;
padding-left:10px;
font-size:12px!important;
}
#recommend a{
color:#3B283B;
}
#recommend a img{
float: left;
height: 70px;
width:70px;
border:1px solid #777;
}


参考サイト

お世話になったサイトです。
WordPressで、jQuery使って、記事の終わりにオススメ記事をにゅっと表示させるやつを、オリジナルで作る方法 | しらさかブログZ

最後に

こうして見ると意外と簡単でしょ?
私と同じように「SimpleReach」からメールが来ない方は思い切って自分で作ってみてはどうでしょうか?

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)