Twitter

iPhone5用の棚壁紙

2012/09/28 | iphone | コメント (0)

iPhone5ついに発売されましたねー。
事前にリークされていた通り、解像度が640×960から640×1136になり縦に伸びております。

んで、しっくりくるのが無かったのでiPhone5用のシンプルな棚壁紙作りました。
急いでさらっと作った割には意外とよく出来たので、欲しい方は持ってってくださいな。
コメント残してってくれると嬉しいです〜。

また暇な時にブラッシュアップしよっと…。

ブラウザで戻ってもonloadイベントを走らせる

ブラウザの「戻る」を利用しページが再表示された時にはonloadイベントが走らないブラウザが多いため、ロールオーバー画像が既に見えていたり、フェード効果がなくなったり、Ajaxで読み込んだコンテンツが…といった不都合が起きやすいものです。
これはキャッシュを利用しページを再表示するために起こるのですが、unloadイベントがあるとキャッシュされない性質を利用し回避することができます。

※下記のコードではjQueryを利用しています。

// ブラウザバック対策
$(window).unload(function(){});

参考:戻るボタンとonloadイベント – 北海道苫小牧市出身のPGが書くブログ

jQueryでブラウザに応じてスクリプトを分岐

2012/09/03 | jquery | コメント (0)

jQueryを利用してブラウザとそのバージョンを判別、スクリプトを分岐させる。

if($.browser.msie) {
	// ブラウザがIEの場合の処理
}
if($.browser.msie && $.browser.version < 7) {
	// ブラウザがIE6以下の場合の処理
}

if文内は以下の記述で、他のブラウザも判別出来ます。

$.browser.opera // Opera
$.browser.safari // Safari
$.browser.mozilla // Firefox

jQueryでスクロール量を取得

2012/07/09 | jquery | コメント (0)

縦スクロールサイトを作る際には必ず必要になる、トップからの現在のスクロール量を取得します。
スクロールによるパララックス(視差)効果を実装する場合は、スクロール量と要素のオフセット値や条件分岐を利用して、背景をずらしたりオブジェクトを動かしたりします。

$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
	});
});

これだけ。値をとるだけならとっても簡単。
テスト用にブラウザ上で値を確認したい場合はhtmlに表示先を設定し、.textメソッドで値を出力しましょう。

<!-- html -->
<p id="scroll"></p>
$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
		$("#scroll").text("スクロール量:" + y); //追加
	});
});

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

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ではアドレスバーが自動で隠れるようになります。

jQueryを使った長い縦スクロールページの現在地による制御

2012/02/09 | jquery | コメント (1)

パララックス(視差)効果やページ内のスムーズスクロールなど、見せ方に動きをつけた縦長1ページで構成されるhtmlサイトが流行っていますが、ページ内の現在位置を取得してナビゲーションをアクティブに変更したり、要素をフェードインしたりする必要があったのでメモ。jQueryを利用して実装しています。

※この記事は、webOpixelさんのエントリ「jQueryで長いページの区切り(セクション)ごとに背景を変化させる」を大変参考にさせていただきました。ソースも必要な箇所を大きく抜粋させていただいた形です。webOpixelさんの記事はどれも分かりやすく、丁寧に説明されているので非常に助かりました。m(_ _)m

+more read

jQueryを利用したシンプルな画像ロールオーバー

2012/02/06 | jquery | コメント (0)

class属性に「imgover」を指定したimg要素に対し、ロールオーバーで画像を置換する方法。
拡張子の前に「_o」を付けたロールオーバー用の画像さえ同階層にあれば、jQueryだけで簡単に実装できます。

ex)ロールオーバー前の画像名:hoge.jpg → ロールオーバー後の画像名:hoge_o.jpg

$(function() {
	// ロールオーバー
	$("img.imgover").mouseover(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	}).mouseout(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
	}).each(function(){
		$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	});
});

html5のリセットCSS(+α)

2012/02/06 | html5 | コメント (0)

前回のエントリー「iPhone向けサイトのリセットCSS(暫定版)」に引き続き、html5コーディング用のリセットCSSとよく使う項目をフォーマット化した自分用メモ。

基本的な要素は入っているので僕の場合はほとんどこれで十分なのですが、必要な要素・プロパティのみをリセットする方法なので、足りないものは追加が必要です。

commonコメント以下にはfont-familyなどベースとなるbodyの指定と、よく使うのでclearfixを追加してます。ここら辺は自分がよく使うものを指定してコーディングの際の雛形にするとよいと思います。

+more read

Page 2 of 151234510...Last »
CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top