jQueryでスクロールすると出てくるフッターを実装

cdbk.net CREATIVES.のサイトはコピーライトがヘッダー付近にあり、フッターリンクがない状態だったのでフッターリンクを追加しました。

ただつけても、利便性がよくないのでアクセスしやすいよう、一定の高さまでスクロールすると出るようにjQueryで制御しています。

大まかな仕組みは、

現在のHTML,BODYのスクロール位置を取得、一定位置以上の場合にフッターを表示するアニメーションを実行、これを繰り返すスクリプトを入れています。

フッター自体はCSSでposition:fixed;bottom:-〜指定を指定して、フッター要素が下に隠れるような位置で配置。

スクリプトでbottom:0へ移動させるような方法で作っています。

簡素ですが、下記がJavaScriptのサンプル(別途jQuery本体が必要)

function onscrolls(){
	setTimeout(function(){
		var a =Number($('html, body').scrollTop());
		if(100 < a){
		$("#footerbar").stop().animate({bottom:0},500);
		}else{
		$("#footerbar").stop().animate({bottom:-100},500);
		}
		setTimeout(function(){
			onscrolls();
		},300);
	},300);
}
$(document).ready(function(){
	onscrolls();
});

このような形のものを本サイトにも入れております。

Paypal、Squareに対応いたしました。

様々なお客様に対応するため、PayPal及びにSquareでの決済に対応いたしました。

日本国内外問わず、ブラウジングデバイス向けのマークアップやスクリプトなどのほか、名刺のデザインなど様々な案件に対応可能なので、一度ご相談いただければ幸いです。

今後とも、cdbk.net CREATIVESをよろしくお願いいたします。

雪を降らせるjQueryプラグイン「snowfall」で上下逆に降らせる方法

Cap cdbk2014

 

jQueryで雪が舞うような効果を使いたいとき便利なLoktar氏の「jQuery Snowfall Plugin」。

様々な設定が出来るのですが、cdbk.net CREATIVESのサイトで現状使っているような下から上にあがるようなエフェクトにしたいときの方法があるので紹介します。

最新のバージョン1.4、snowfall.jquery.jsであれば91行目の

this.element.style.top = this.y + 'px';

this.element.style.top =($(window).height()-100)- this.y + "px";

といったように表示したい高さで引き算(+調整分の高さ)で実現できます。

フレークの部分を画像などに置き換えたりすれば水の中で泡が上に上がるような表現や、風船があがるようなエフェクトも作りやすいと思います。

2014年もよろしくお願いいたします

昨年、2013年はFlashからJavaScriptへのコンテンツ移行が進んだ1年となり、仕事においてもそれを体現できた年となりました。

今年、2014年はより高度化するスマートフォンへの順応とともに、テレビやその他ブラウザーを搭載するデバイスへの対応が行えるよう、日々邁進してまいります。

何卒、よろしくお願いいたします。

cdbk.net CREATIVES. Kentaro Kitagawa

2014.cdbk.net