パララックスデザインを導入しました

 

本日、ホームページのフロントページをリニューアルしました。

いわゆるパララックスデザインというものです。

 

パララックスとは「視差」という意味です。

電車の窓から外の景色を見ているとき、遠くにあるものほど流れる速度が遅くなりますよね?

これが視差による効果です。

これをホームページに置き換えて、スクロールしたときに奥に設置したものほど動きを遅くすることで、立体感のあるページを作ることができます。

最近では、立体感が無くてもスクロールによって変化がおきるデザインもパララックスといわれるようになっております。

 

さて、今回のリニューアルもまたHTML無料テンプレートを使わせていただきました。私の専門はデザインではありませんので(;^_^A
FREEHTML5.COというところのOutlineというテンプレートです。
Outline: Free HTML5 Bootstrap Template - FREEHTML5.co

Outline: Free HTML5 Bootstrap Template – FREEHTML5.co
(http://freehtml5.co/preview/?item=outline-free-html5-bootstrap-template)

やりすぎないシンプルなアニメーションにセンスがありますよね(^o^)

 

デモサイトを見ていただいて気付いた方もいるかもしれませんが、弊社のホームページに使うにあたって少々手を加えているところがあります。背景画像です。

テンプレートをそのまま使った場合には、背景画像は普通にスクロールと一緒に動くか、ウィンドウに固定されて全く動かないかのどちらかでした。

これでは真のパララックスではない! と思い、サクッとJavaScriptでパララックスエフェクトを作りました。

コードを下記に記載します。

 

$('#fh5co-hero, .fh5co-bg-section').each(function() {
	var this_element     = $(this);
	var default_position = this_element.offset().top;
	var parallax_const   = $(this).data('parallax-value') ? Number($(this).data('parallax-value')) : 1.5; // 1に近いほど、遠くにあるように見える

	$(window).scroll(function() {
		if ($(window).width() > 768) {
			this_element.css('background-position', '0px ' + (($(window).scrollTop() - default_position) / parallax_const) + 'px');
		}
	});
});

 

最初の位置を取得して、スクロール量と引き算してCSSの「backend-position」を変化させるだけです。

引き算のままですとウィンドウに固定されてスクロールしても動かない状態(CSSでいう「backend-attachment: fixed」ですね)になりますので、差を適当な数(1以上)で割ります。

今回書いたコードでは、要素ごとに奥行きを変えてみたかったですので、背景画像を持つ要素に属性「data-parallax-value」を付け足しました。

この値が1に近いほど遠くにあるように見えるという仕様です。

ちなみに、スマートフォンでは動きがカタカタしてしまいましたので、画面幅が小さいときはこの動きは停止させております。

 

今回は背景画像だったので簡単でしたが、ブロック要素でパララックスエフェクトをやるのは難しそうですね。

表示されるところまでスクロールされたら要素がヒュッと現れるエフェクトは完全にテンプレート頼りでしたし。

まだまだ私のスクリプト技術も伸びしろがあるということですね。

本日はこれまで。

金沢

 

著者プロフィール

金沢大樹

2年間のアルバイトを経て、平成27年度より社員として株式会社オンラインでWeb制作をしております。
WordPressを得意としており、プラグイン開発の経験もございます。
また、Monacaを使用したスマートフォンアプリ開発や、Visual BasicによるWindowsアプリケーション開発もできます。

コメントを残す

コメントは管理者による承認後に公開されます。

CAPTCHA