パララックスデザインを作る時のCSSの雛形

Tips Web

パララックス(視差効果)のあるサイトが好きだったので、雛形を作りました。
HTMLとCSSだけで実装できます。

コピペで簡単に使えるのでパララックスデザインが好きな方はどうぞ。

スポンサードリンク

パララックスデザインの作り方

まず以下のhtmlを記述します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <!-- CSSの読み込み -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- 最初のパララックス -->
    <div class="parallax parallax_first_img">
    	<div class="main">
        	<h2>テキスト大</h2>
        </div>
    </div>

<!-- コンテンツ -->
    <div class="content">
    	<div class="box">
            <h3>テキスト中</h3>
                <p>文章</p>
        </div>
    </div>
    
<!-- 2つ目のパララックス -->
    <div class="parallax parallax_second_img">
    	<div class="main">
        	<h2>テキスト大</h2>
        </div>
    </div>

<!-- コンテンツ -->
    <div class="content">
    	<div class="box">
            <h3>テキスト中</h3>
                <p>文章</p>
        </div>
    </div>

<!-- 最後のパララックス -->    
    <div class="parallax parallax_third_img">
        <div class="main">
        	<h2>テキスト大</h2>
        </div>
    </div>
</body>
</html>

必要に応じて編集してください。

そして次のCSSを記述します。


html body {
	height: 100%;
	width: 100%;
	margin: 0 auto;
}

div.parallax{
	height:650px;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	}

.content{
	padding:30px 0;
	}

.main h2{
	margin: 0;
	position: relative;
	top: 250px;
	font-size: 60px;
	color: #fff;
	text-align: center;
	}

.box h3{
	font-size: 40px;
	text-align: center;
	}

.parallax_first_img{
	background:url(画像のURL);	
	}

.parallax_second_img{
	background:url(画像のURL);	
	}

.parallax_third_img{
	background:url(画像のURL);	
	}

必要に応じてスタイルを変更してください。
parallax_XXX_imgのとこに自分の好きな画像のURLを入れてください。

以上でパララックスデザインのサイトが見た目だけ出来上がります。
これにjavascriptやjqueryで動きをつけても面白いかもしれませんね。

CSSでのパララックスデザインの備忘録でした。

スポンサードリンク