CSS・CSS3

CSSとHTMLだけで背景画像を固定しパララックスっぽくしてみる

parallax

今回は、HTMLとCSSだけでスクロール時に背景画像にパララックス効果を付けるご紹介です。

実装に関しては、とても簡単に出来ますので、どこかで使えるかなーと思いながら自分の備忘録用としても書いておきたいと思います。
特に1カラムのサイトやポートフォリオなどに使えるパララックス効果だと思いますし、ストーリー性を持たせたりすると面白そうだなーとか思いながらデモサイトを作っていました。

下記にデモサイトも用意していますので、ご参考頂ければと思います。

デモサイト

実装方法

それでは、実装方法をご説明していきたいと思います。
基本的にHTMLとCSSしか利用しないので、とてもスムーズに実装出来るかと思います。

HTML

まずは、最初にHTMLでマークアップをしていきます。

    <div class="parallax parallax_img_1">
    	<div class="box">
        	<h2>Parallax</h2>
        </div>
    </div>
    
    <div class="content">
    	<div class="box">
			<!--テキストなど-->
        </div>
    </div>
    
    <div class="parallax parallax_img_2">
    	<div class="box">
        	<h2>Parallax-2</h2>
        </div>
    </div>
    
    <div class="content">
    	<div class="box">
			<!--テキストなど-->
        </div>
    </div>
    
    <div class="parallax parallax_img_3">
    	<div class="box">
        	<h2>Parallax-3</h2>
        </div>
    </div>
    
    <div class="content">
    	<div class="box">
			<!--テキストなど-->
        </div>
    </div>

CSS

次にCSSを記述していきます。
クラス名【parallax_img_1】【parallax_img_2】【parallax_img_3】には、ご自身が利用する画像のパスを記述して下さい。

/*************************
パララックス
*************************/
div.parallax{
	height:600px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;	
	}
.content{
	padding:30px 0;
	}
.box{
	max-width: 960px;
        margin: 0 auto;	
	}
.box h2{
	line-height: 600px;
	font-size: 60px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}
.parallax_img_1{
	background:url(img/1.jpg);	
	}
.parallax_img_2{
	background:url(img/2.jpg);	
	}
.parallax_img_3{
	background:url(img/3.jpg);	
	}


/*************************
メディアクエリ
*************************/
@media screen and (max-width: 960px){
	.box{
		width:auto;
		}
	}

上記までを記述すれば、実装の完了となります。
考えると色々と使い道があると思います。www

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS paper-collapse

【JS】かっこいいアコーディオンをスマホサイトにいかがですか?

NEXT sidr

jQueryプラグイン【Sidr】使い方 レスポンシブメニューも簡単に実装