Tarokenlog

Contact

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

パララックス（視差効果）のあるサイトが好きだったので、雛形を作りました。
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>
    
<!-- ２つ目のパララックス -->
    <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でのパララックスデザインの備忘録でした。


Posted

in

,

Tags:

, ,