背景画像によるパララックス効果

コードの備忘録。とりあえずコードのみ。

jQuery(function(){
	var bg1 = jQuery(".pximg1").css("height").replace("px","");
	jQuery(window).scroll(function(){
		var j_scroll = jQuery(this).scrollTop();
		jQuery(".pximg1").css('background-position','0 '+ parseInt( 0 - j_scroll * 0.1 ) + 'px');
	});
});

<div class=”imgcontainer pximg1″ style=”background: url() fixed no-repeat ; background-size: cover;”>

komitsuboshi2014

概要

2014年から開発に着手したテーマです。流行のデザインを容易に取り入れられるようにしました。

トップページではフラットデザインを、固定ページではパララックス効果を取り入れられるようにしました。

なお、下層ページではグローバルナビゲーションがページ上端で常に固定表示されます。

パララックス効果は、javascriptを使わず、CSS2で実現する（背景画像は動かない）ものと、jQueryで背景がゆっくり動くタイプを用意。パララックス専用のライブラリは使用していません。

機能と使い方

パララックス

固定ページで使用したいパララックス効果のテンプレートを選択し、背景にする画像をアイキャッチ画像に登録します。

固定ページのテキスト入力欄に埋め込んだ画像は背景画像よりも速く動くためパララックス効果を得ることができます。

また、パララックス効果を設定した固定ページに子ページを作ることで、複数段のパララックスページを作ることができます。（子ページのテンプレートはデフォルトを選択します）

タイル状リンクレイアウト

アーカイブページにおける個別の記事へのリンクはフラットデザインまたはマテリアルデザイン風の四角いタイルで構成しています。四角い領域全体がタップ可能で、スマートフォンでの使いやすさを実現しています。