読者です 読者をやめる 読者になる 読者になる

naMemo

うぇっぶやアプリやデザインに興味深々なキモオタのメモ

パララックス効果をスマートデバイス対応させる時につまづいたこと

web css

最近、あちこちで話題のパララックスデザイン。
流行りに乗じて挑戦してみたら、まんまとつまずいた。

CSSだけで簡単にパララックス効果をつけられる!

HTML

<section class="img_wrap">
	<div class="background_img">
		<div class="h1_wrap">
			<h1>Parallax!</h1>
		</div>
	</div>
</section>

CSS

.img_wrap{
	height: 740px;
}

.background_img{
	background-image: url('sample.jpg');
	background-attachment: fixed;/*背景画像を固定させる*/
	background-repeat: no-repeat;
	background-position: center top;
	/*背景画像を幅いっぱいに表示*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	text-align: center;
	/*background-size:coverのIE対策*/
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.jpg',sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.jpg', sizingMethod='scale')";
}

パララックスサンプル

詳細は下記の記事参照
パララックスデザインを実装するときに気にしたこと4つぐらい

CSSだけで、簡単に実装できた〜!と調子にのっていたら、落とし穴が...

スマートデバイスでbackground-imageが拡大される問題

スマートフォンタブレットだと、なぜか背景の画像が拡大表示されるという問題が...。

右往左往して、Stackoverflowに似たような問題を発見した。
css3 - How to set body background image as cover for ios devices - Stack Overflow

background-attachment: fixed;が良くないらしい?ので
メディアクエリを指定して、タブレット以下のサイズの場合は
background-attachmentをデフォルト(背景画像を固定せず、スクロール)に設定した。

@media screen and (min-width : 320px) and (max-width: 1024px) {/*スマフォ・タブレット用*/
	.background_img{
		background-attachment: scroll;
	}
}

メディアクエリの指定方法は以下の記事参照。
web帳 | CSS Media Queries(メディアクエリ)を使用した指定方法

しかし、この設定、スマートデバイスだとパララックス皆無になる...
もっとスマートな方法があれば、誰か教えてください…

最終成果物的なもの

今回、パララックス効果に初挑戦して、所属している研究室のWebページの紹介ページを作った。
静岡大学大学院情報学研究科 杉山岳弘研究室 3年生ページ