Twitter

ページ読み込み後に指定の位置まで自動スクロール

2012/06/28 | jquery | コメント (1)

相変わらず縦スクロールサイトが流行していますが、ページにアクセスした際に自動で指定の位置までスクロールする方法。
※以下の記述はjQueryとjQuery Easing Pluginを利用しています。

$(function(){
	var $speed = 1500; //スクロールのスピードを設定(ミリ秒)
	var targetOffset = $('#●●●●●●').offset().top; //ターゲットとなるdivを設定

	//ページを読み込み0.8秒後にターゲットとなるdivまで自動スクロール
	setTimeout(function(){
		$("html,body").stop().animate({scrollTop:targetOffset},$speed, 'quart');
		return false;
	},800);
})

上の例では、ページが読み込まれてから0.8秒後にターゲットとなるdivまで1.5秒かけて自動でスクロールします。

canvasを全画面に表示する

2012/06/27 | html5 | コメント (4)

canvasをウィンドウサイズいっぱいの背景に固定したい場合や、フルcanvasのコンテンツを作成したい場合用のメモ。
canvasはjavascriptを利用してサイズ指定、リサイズ処理を行います。
※下記コードはjQueryの利用を前提に書いています。

【html】

<body>
<div id="wrapper">
<canvas id="main"></canvas>
</div>
</body>

【css】

body{
	margin: 0px;
	padding: 0px;
	position: relative;
}

body #wrapper{
	width: 100%;
	height: 100%;
	position: fixed;
}

【js】

$(function () {
	sizing();
	$(window).resize(function() {
		sizing();
	});
});

function sizing(){
	$("#main").attr({height:$("#wrapper").height()});
	$("#main").attr({width:$("#wrapper").width()});
}

どれもシンプルな記述で実装できます。
canvasを全画面にするにはhtmlとcssだけではうまくいかないので、このように#wrapperのサイズを取得してcanvasの幅と高さに指定するという方法をとります。

iPhoneサイトのアドレスバーを隠す

iPhoneサイトの画面をより広く使いたい場合は、サイトアクセス時にアドレスバー(URLの表示領域)を隠す以下のコードを入れます。
これで見えなくなりますが、消えたわけではなく隠しているだけなので、画面を下にスクロールするとアドレスバーはちゃんと出てきます。

window.addEventListener("load",	function() {
	setTimeout(function() {
		scrollTo(0,1);
	}, 100);
}, false);

【jQueryを利用する場合】

$(function () {
	setTimeout("window.scrollTo(0,1)", 100);
});

このスクリプトにより、ページが読み込まれた0.1秒後に1px縦にスクロールされ、iPhoneではアドレスバーが自動で隠れるようになります。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top