背景画像の簡単なパララックス

背景画像を簡単にパララックス。
jQuery1.7.2で動作確認済み。
bodyに対して隙間なく背景を敷いておいて、下記を実行。

$(function() {
	$(window).scroll(function() {
		var value = $(this).scrollTop();
		var value = value*2 + 'px'
		$('body').css('background-position', '0 '+ value);
	});
});

3行目で現在のスクロールの値をとる。

4行目でずらす値を生成する。たとえば*2の値を変えると、パララックスするスピードも変わる。
ゆっくりにしたい場合は/2とかでもいいかも。

infinite-scrollで新しく表示される要素をフェードイン。

無限スクロールができる便利なjQueryプラグインinfinite-scroll
http://www.infinite-scroll.com/

新しく表示される要素をフェードインさせてみた。
7行目。fadeInの数字を変えるとフェードインする早さも変わる。

$('#mainWrap').infinitescroll({
	navSelector  	: '.nextBox',
	nextSelector 	: '.nextBox a',
	itemSelector 	: 'article',
	dataType	 	: 'html'
},function(newElements, data, url){
    	$(newElements).hide().fadeIn(1000);
});

IE8で jQueryのopacityアニメをする際の留意点

IE8で jQueryのopacityアニメ(fadeIn fadeOutなどなど)をする際の注意点。

positionをrelativeやabsoluteにする必要がある場合は、アニメーションさせる要素でなく親要素に対して設定しておくこと

ただし、IE8には別の問題がある。それは、positionがrelativeだったりabsoluteだったりする場合、その要素の透明度がアニメーションしないっていうもの。これを避けるためには、フェードさせる要素の中にあるすべての要素を、全部float中心でレイアウトしないとならない。

引用元
http://hamalog.tumblr.com/post/5578274182/jquery-opacity-ie6-7-8

要素に「display: block;」か「filter: inherit;」を設定する

IE8でjQueryのアニメーションがうまく動作しない場合の対処法

引用元
http://helog.jp/environment/browser/2380/

画面の縦の高さが足りない時にフッターの高さを高くして調整する

画面の縦の高さが足りない時
フッターを画面の最下部にくっつけるというアプローチもいい。
だが今日は背景色をいろいろ追加するデザインをいただいていて、
bodyとフッターの背景色を別色に設定していた。
なので、フッターの高さを画面ピッタリにして調整するというアプローチをしてみた。

windowsの
IE8 IE11 chrome33 safari5
で検証済み

$(function(){
	footerHeight = function (){
		var footerWrap = $('div#footerWrap');
		//フッターの高さをリセット
		footerWrap.css({height:'auto'});
		//フッターのトップからの距離
		var ft = footerWrap.offset();
		//フッターの高さ
		var fh = footerWrap.height();
		//ウィンドウの高さ(スクロールバー領域を含む)
		//var wh = window.innerHeight;
		//ウィンドウの高さ(スクロールバー領域を含まない)		
		var dh = document.documentElement.clientHeight;
		if(ft.top+fh<dh){
			/* ウインドウの高さから、フッターのトップからの距離分と、フッターのボーダーの分引いた値がフッターの高さです */
			var fh = dh - ft.top - 2 + "px";
			footerWrap.css({height:fh});
		}
	};
	
	window.onload = function(){
		footerHeight();
	}
	
	$(window).resize(function() {
		footerHeight();
	});
});

Media Element.JSをレスポンシブ(拡大縮小)対応する方法

IE8からAndroidまでワンソースで対応できちゃう
Media Element.JS
っていう動画プラグインがある。
WordPressの動画再生部分のコアにも採用されてるところからも、
優秀さが伺えるんだけど、
それのレスポンシブ対応に迷ったのでメモ。

記述があったのはこちら
http://coolestguidesontheplanet.com/videodrome/mediaelementjs/

普通に設置して、
縦横指定するところに
style=”width:100%;height:100%;”
width=”100%” height=”100%”
を追加。
これで、縦横幅は親要素依存にできます。
タネがわかれば簡単なのだけど、すごく目鱗だな……!

<video id="my_video_1"  style="width:100%;height:100%;" controls="controls" width="100%" height="100%"
 preload="auto" poster="my_video_poster.png"
 <source src="my_video.mp4" type='video/mp4'>
</video>

フッターを下部に固定するfooterFixed.jsを、メインエリアの背景が切れないように改造してみた

MITライセンスのfooterFixed.js
http://blog.webcreativepark.net/2007/11/16-012253.html
すご~く便利なのだけど、メインエリアの背景が切れてしまうので、改造してみた。
要jQuery
JavaScriptだけで改造できるとかっこいいんだろうな……。

HTML(だいたい。)footerがfooterWrapに直してないのはちょっと恥ずかしいかなと思いつつ、そのまま公開。
気になるようなら個人的に直すといいんだろうな。

<div id="#headerWrap">
</div>
<div id="#mainWrap">
</div>
<div id="footer">
</div>

footerFixed.jsの改造部分。
30行目付近から。

		if(ft+fh<wh){
//追記部分開始
			var mainH = wh - fh - $('#headerWrap').height();
//追記終了
//記述変更
//			document.getElementById(footerId).style.position = "relative";
//			document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
			document.getElementById(footerId).style.top = (wh-fh-ft)+"px";
//追記部分開始
			$('#mainWrap').css({height:mainH});
//追記終了
		}

jQueryでタブ切り替え。バグるコードとバグらないコードを比較してみた。

タブ切り替え的なUIを作った。
バグるコードとバグらないコードをメモしておく。

バグるコード。
chrome33で、
素早くタブ切り替えをするとバグる。
フラグで切り替えたりしてても時々バグる。
処理中に別の処理が並行して走るからバグってしまうみたい。
比較的処理がゆっくりなIE8とかだとバグらない。
具体的にどこでエラーを起こしてるのかはよくわからなかった。

$(function(){
	//画像の先読み
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery('<img>').attr('src', arguments[i]);
		}
	};
	$.preloadImages('/img/btn01_on.png','/img/btn02_on.png','/img/btn03_on.png','/img/btn04_on.png','/img/btn05_on.png','/img/btn01_selected.png','/img/btn02_selected.png','/img/btn03_selected.png','/img/btn04_selected.png','/img/btn05_selected.png','/img/tab02.jpg','/img/tab03.jpg','/img/tab04.jpg','/img/tab05.jpg');
	
	
	$(window).load(function(){
		var onName = '_on';
		var offName = '_off';
		var selectedName = '_selected';	
		var imgBefore = '/img/btn_';
		var imgAfteron = '_on.png';
		var imgAfteroff = '_off.png';
		var imgAfterselected = '_selected.png';
		
		//サムネイルクリック時の挙動
		
		var changeflag = true;
		
		function changeImg() {
			$('#packageWrap li img').each(function(){
				var	thisattr = $(this).attr('src').replace(selectedName, offName).replace(onName, offName);
				$(this).attr('src',thisattr);
			});
		};
		
		$('#packageWrap li img').on({
			'click':function(){
				if(changeflag = true){
					changeflag = false;
					$('#packageWrap li img').removeClass('selected');
					$(this).addClass('selected');
					changeImg();
					$('#detailBox>div').hide();
					openDiv = '#' + $(this).attr('src').replace(imgBefore, '').replace(imgAfteroff, '').replace(imgAfteron, '').replace(imgAfterselected, '');
					$(openDiv).show();
					this.setAttribute('src', this.getAttribute('src').replace(offName, selectedName).replace(onName, selectedName));
					changeflag = true;
				}else{
					return false;
				};
			},
			'mouseenter':function(){
				if($(this).attr('class') == 'selected'){
					return false;
				}else{
					this.setAttribute('src', this.getAttribute('src').replace(offName, onName));
				}
			},
			'mouseleave':function(){
				if($(this).attr('class') == 'selected'){
					return false;
				}else{
					this.setAttribute('src', this.getAttribute("src").replace(onName, offName));				
				}
			}
		});
	});
});

バグらないコード。
ひとつひとつif文で分岐しているからバグらない。
手抜きしないで丁寧に分岐させてあげるのが大事みたい。

$(function(){
	//画像の先読み
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery('<img>').attr('src', arguments[i]);
		}
	};
	$.preloadImages('/img/btn01_on.png','/img/btn02_on.png','/img/btn03_on.png','/img/btn04_on.png','/img/btn05_on.png','/img/btn01_selected.png','/img/btn02_selected.png','/img/btn03_selected.png','/img/btn04_selected.png','/img/btn05_selected.png','/img/tab02.jpg','/img/tab03.jpg','/img/tab04.jpg','/img/tab05.jpg');
	
	
	$(window).load(function(){
		pageTab();
	});
	
	function pageTab() {
		var imgBefore = '/img/btn_';
		var imgAfteron = '_on.png';
		var imgAfteroff = '_off.png';
		var imgAfterselected = '_selected.png';
		
		//クリックの処理
		$('#packageWrap li img').click(function(){
			$('#packageWrap li img').each(function(){
			if(String($(this).attr('src')).match(/_selected\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_selected','_off'));
			}
			});

			if(String($(this).attr('src')).match(/_off\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_off','_selected'));
			}else
	
			if(String($(this).attr('src')).match(/_on\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_on','_selected'));
			}
			
			$('#detailBox>div').hide();
			openDiv = '#' + $(this).attr('src').replace(imgBefore, '').replace(imgAfteroff, '').replace(imgAfteron, '').replace(imgAfterselected, '');
			$(openDiv).show();
		});
	
	
		//ボタンのロールオーバー
		$('#packageWrap li img').hover(function(){
			$(this).attr('src',$(this).attr('src').replace('_off','_on'));
		},function(){
			$(this).attr('src',$(this).attr('src').replace('_on','_off'));
		});
	};
});

表示タイミングの制御

低速回線対策。
同時に表示されないと変な表示になる要素に対して指定してあげるといいかもしれない。

$(function(){
	//表示タイミングの制御
	$('.kodawarianime02').css('display','none');
	$('.kodawarianime03').css('display','none');
	$(window).load(function(){
		$('.kodawarianime02').css('display','block');
		$('.kodawarianime03').css('display','block');
	});
});