コピペでCSS　CSSだけでパララックスを作る

パララックスを作る

HTML

    <div class="para para_bg01">
    	<div class="paraBox">
        	<div class="moziBig">セロ弾きゴーシュ</div>
        </div>
    </div>
    
    <div class="paraContent">
    	<div class="paraBox">
        	<div class="mozi">セロ弾きゴーシュ</div>
            <p>狩りはトマトのあんばい小屋手をからだにあり東たです。それからしばらく残念ましたというゆうべでた。だめだです気たもならするとおかげの勝手人のままをはじつはだめますましが、おまえでも曲が見れんたた。起きあがっすぎやつは家のすばやくんていっぺんのあとのゴーシュめがある第六ゴーシュたちの安心に出ばしまいだた。子は一生ひけながらいまし。かっこうは三弾きゴーシュのようで弾くていな。次は弓ゴーシュと私に飛びだしてやるまい。
沢山はゴーシュをまたにいうてゴーシュが手のようをぶっつかっが猫を負けてがさがさ子へなって行っござい。にわかにまげてゴーシュをかっこうに思っましまし。これどうに狸にやめて子がとっませまし。大が煮ましょた。
「扉がした。虎、おまえをうち。し。」
</p>


        </div>
    </div>
    
    <div class="para para_bg02">
    	<div class="paraBox">
        	<div class="moziBig">慈悲</div>
        </div>
    </div>
    
    <div class="paraContent">
    	<div class="paraBox">
        	<div class="mozi">慈悲</div>
            <p>何もさっきのままのそうたくさんのままと思っましまし。ゴーシュは一つをごお父さんへはいりて孔を枝がしてまるでいまとっれまし上を倒れるんござい。ちょうど演奏尖って、つめばひいてだしまして顔をすると向うをいちばん日しれたた。「狸もらっからだをしな。
わらいな。きみはそれをかっこうをしてまで弾いむりはこわくんなのでべ。」いつはまっ黒そうを聞いとな用セロにぶっつけやないゴーシュのパンが食うて鳴ったり弾いながらいまし。しずかも弾いが眼へかったない。ぼくはぞろぞろとんとんはおいしいどころたが療はそうむずかしい方ましまし。
「はじめのこんどの二つを。ち。」何は思わずしたた。
泣き声はぱちんととめておじぎをが済ましと半分な。では前はいかにものきましまし。なく遠慮ましと立っていてあとへしようますコップを行くのにではねから野ねずみが時とりたです。
これからかとかっこうもがすっかりひきたでして悪いくせをは一生けん命はセロの首尾ましな。水はみんなを前た交響楽のなかそれに鳴らしたようになあ巻ゴーシュが楽長へのきて何かわからんからわからていただ。「またすぐはじめの慈悲。出。」はいとすぼめがしましかとそろえてこんこんこどもがあとをじっと手伝ってかっこうかかえたまし</p>

        </div>
    </div>
    
    <div class="para para_bg03">
    	<div class="paraBox">
        	<div class="moziBig">野ねずみ</div>
        </div>
  </div>
    <div class="paraContent">
    	<div class="paraBox">
        	<div class="mozi">野ねずみ</div>
            <p>「だめた。するする鳴っばいまし。そののはゴーシュの子たことた。みんなにそのまるで構えましものを。先生。
びっくりばかりかくろ一枚は悪いんましねえ。音楽で楽長をもってときわたしたちをこの糸頭練習たりテープ者の工合じゃの楽器猫をとりだしてやろたよしわたしのちがいもまだ戻っんまし。うそ硝子さま。さんをはし気たとなあ。こどもということにもうし行くた。熟しも膨らんは狸というんからまだ云いうんない。それからどうもかく野ねずみの嘴とまぜたもね。これじゃそれほどもっう赤ん坊の手へして何のたばこへなおるて考えるようた方でし、とまっね、どっかりなおしていだちゃな。ぶん休んこの野ねずみ晩汁へそれ二毛のときへセロに弾くようなものましは、みんなをはいきなり普通ましがな。すると今は病気はそっちまで、ちて十代へはぼうっとかっこうにふりまわしながらいし。」いつは挨拶からつけて、すると一足にぶっつけて風をいっとそこかをしていや思ったいた。お母さんはこの気の毒でゴーシュふうで先生に済ましばだいのものにつれてすきをおろしからどんとリボンをすぼめましないて、扉がたべ来いからでし晩ばかり云いで顔一生しましなかがいまをゴーシュがは譜ら入っただ。</p>
        </div>
    </div>
    <div class="para para_bg04">
    	<div class="paraBox">
        	<div class="moziBig">おしまい</div>
        </div>
  </div>

CSS

div.para{
	height:800px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;	
	}

.paraBox{
	max-width: 800px;
        margin: 0 auto;	
	}
.paraBox .moziBig{
	line-height: 800px;
	font-size: 50px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}
.paraContent{padding:50px 0;}

.para_bg01{
	background:url(imges/1.jpg);	
	}
.para_bg02{
	background:url(images/2.jpg);	
	}
.para_bg03{
	background:url(images/3.jpg);	
	}
.para_bg04{
	background:url(images/4.jpg);	
	}
 

結果はこんな感じです

「パソコン」を

アマゾンで探す 　　　　

楽天で探す

yahooで探す 　　　　

　　　　
「パソコンバッグ」を

アマゾンで探す

楽天で探す

yahooで探す