【HTML, CSS, jQuery】パララックスデザイン｜WORLD RESPECTABLE SPORT CARS - HTML5, jQuery役立つ情報ブログ

HTML、CSS、jQueryを使ってパララックスデザインのサイト、WORLD RESPECTABLE SPORT CARSを作ってみました。
このサイトは世界のスポーツカーをただ単に紹介しているだけですが、デザイン的に気に入っています。

構造としては3層になっており、動きとしては上下にしか動かしていません。

基本的な形なのでテンプレートとしても使いやすいと思います。

【 index.html 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WORLD RESPECTABLE SPORT CARS</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div id="contents">
<div id="section0" class="section">
<h1><img src="images/logo.png" width="540" height="285" alt="WORLD RESPECTABLE SPORT CARS"></h1>
<ul id="topNav">
<li><a href="javascript:pageScroll(1)"><img src="images/btn_japan.png" width="110" height="33" alt="Project"></a></li>
<li><a href="javascript:pageScroll(2)"><img src="images/btn_germany.png" width="98" height="33" alt="About"></a></li>
<li><a href="javascript:pageScroll(3)"><img src="images/btn_italy.png" width="106" height="33" alt="Report"></a></li>
</ul>
</div>
<div id="section1" class="section">
<h2><img src="images/title_japan.png" width="256" height="71" alt="Japan"></h2>
<p>Between 1969 and 1974, and again between 1989 and 2002, Nissan produced a high performance version of its Skyline sedan called the Nissan Skyline GT-R. This car proved to be iconic for Nissan and achieved much fame and success on road and track. The Nissan GT-R, although no longer carrying the "Skyline" badge, has heritage in the Nissan Skyline GT-R. Like the later generations of the Skyline GT-Rs, the Nissan GT-R is four-wheel drive with a twin-turbo 6 cylinder engine and has the signature four round tail lights. However, the GT-R is an entirely new model sharing little with its Skyline siblings and is a complete redesign from previous Skylines rather than an incremental evolution; the four-wheel-steering HICAS system has been removed and the former straight-6 RB26DETT engine has been replaced with a new V6 VR38DETT. Because of the GT-R's heritage, the chassis code for the all-new version has been called CBA-R35, or 'R35' for short (where CBA is the prefix for emission standard), carrying on the naming trend from previous Skyline GT-R generations. The GT-R has also retained its Skyline predecessor's nickname Godzilla, given to it by the Australian motoring publication Wheels in its July 1989 edition.</p>
</div>
<div id="section2" class="section">
<h2><img src="images/title_germany.png" width="224" height="71" alt="Germany"></h2>
<p>The Porsche 911 GT3 is a higher performance version of the Porsche 911 sports car. It is the latest in a line of high-performance models, beginning with the 1973 911 RS. The GT3, named after the F&#233;d&#233;ration Internationale de l'Automobile (FIA) GT3 European Championship it was designed to compete in, has a 3.6-litre naturally aspirated six-cylinder engine, based on the unit used in the Porsche 962 and Porsche 911 GT1 race cars.
A number of variations, designed for road and track duty, have been introduced since its launch in 1999. The previous generation (997) includes three road and several racing models which are listed below. Since the start of the production in 1999 a total of 14,145 911 GT3 cars has been produced. The new GT3 based on the (991) was introduced in Geneva Motor Show 2013.
The GT3 has had a successful racing career in the one-make national Porsche Carrera Cup series, and the international Porsche Supercup. It has won championship and endurance races, including the GT class of the American Le Mans Series seven times, first overall in the 24 Hours of Daytona, and first overall at the 24 Hours N&#252;rburgring six times.</p>
</div>
<div id="section3" class="section">
<h2><img src="images/title_italy.png" width="241" height="71" alt="Italy"></h2>
<p>In Ferrari's first official announcement of the car, the 458 Italia was described as the successor to the F430 but arising from an entirely new design, incorporating technologies developed from the company's experience in Formula 1.
The body computer system was developed by Magneti Marelli Automotive Lighting.
The 458 Italia is powered by a 4.5 L (270 cu in) V8 engine derived from a shared Ferrari/Maserati design, producing 570 PS (419 kW; 562 hp) at 9,000 rpm (redline) and 540 N&#183;m (398 lb&#183;ft) at 6,000 rpm with 80% torque available at 3,250 rpm. The engine features direct fuel injection, which is a first for Ferrari mid-engine setups in its road cars.
At 127PS/L the 458 held the title of highest specific output naturally-aspirated petrol engine ever in a production road car. The 458 Speciale raised this record to 134PS/L.</p>
</div>
</div>
<ul id="nav">
<li><a href="javascript:pageScroll(0)"><img src="images/btn_top2.png" width="33" height="17" alt="Top"></a></li>
<li><a href="javascript:pageScroll(1)"><img src="images/btn_japan2.png" width="62" height="17" alt="Japan"></a></li>
<li><a href="javascript:pageScroll(2)"><img src="images/btn_germany2.png" width="56" height="17" alt="Germany"></a></li>
<li><a href="javascript:pageScroll(3)"><img src="images/btn_italy2.png" width="61" height="17" alt="Italy"></a></li>
</ul>
<p id="memo"></p>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollTo-min.js"></script>
<script src="js/parallax.js"></script>
</body>
</html>

【 index.css 】

@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img { 
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym {
  border:0;
}

/*全体の調整*/
body {
  font:13px Georgia, Century, serif;
  *font-size:small;
  *font:x-small;
  -webkit-text-size-adjust: none;
  background:#eee;
}
a{
  ouline: 0;
}
/*セクションの設定*/
div.section {
  width: 100%;
  max-width: 1900px;
  height: 800px;
  position: relative;
  margin: 0 auto;
}
/*レイヤーの設定*/
div.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*背景画像の設定*/
/*0*/
#section0 {
  background: url(../images/section0_bg.jpg) no-repeat 0px 0px;
}
#section0 .layer2 {
  background: url(../images/sec0_layer1_bg.png) no-repeat 920px 300px;
}
#section0 .layer1 {
  background: url(../images/sec0_layer2_bg.png) no-repeat 700px -50px;
}

/*1*/
#section1 {
  background: url(../images/section1_bg.jpg) no-repeat 0px 0px;
}
#section1 .layer2 {
  background: url(../images/sec1_layer1_bg.png) no-repeat -50px 120px;
}
#section1 .layer1 {
  background: url(../images/sec1_layer2_bg.png) no-repeat 110px 100px;
}

/*2*/
#section2 {
  background: url(../images/section2_bg.jpg) no-repeat 0px 0px;
}
#section2 .layer2 {
  background: url(../images/sec2_layer1_bg.png) no-repeat 600px 0px;
}
#section2 .layer1 {
  background: url(../images/sec2_layer2_bg.png) repeat-y 550px 0px;
}

/*3*/
#section3 {
  background: url(../images/section3_bg.jpg) no-repeat 0px 0px;
}
#section3 .layer2 {
  background: url(../images/sec3_layer1_bg.png) no-repeat 150px 0px;
}
#section3 .layer1 {
  background: url(../images/sec3_layer2_bg.png) no-repeat 50px 50px;
}

/*各セクション内のレイアウト等*/
/*0*/
#section0 h1 {
  position: absolute;
  left: 8%;
  top: 80px;
}
ul#topNav {
  position: absolute;
  left: 8%;
  bottom: 130px;
}
ul#topNav li {
  display: inline;
  margin-right: 40px;
}

/*1*/
#section1 h2 {
  position: absolute;
  left: 58%;
  top: 50px;
}
#section1 p {
  position: absolute;
  left: 58%;
  top: 150px;
  color: #111;
  font-size: 108%;
  width: 450px;
  line-height: 2;
}

/*2*/
#section2 h2 {
  position: absolute;
  left: 8%;
  top: 70px;
}
#section2 p {
  position: absolute;
  left: 8%;
  top: 170px;
  color: #111;
  font-size: 108%;
  width: 450px;
  line-height: 2;
}
/*3*/
#section3 h2 {
  position: absolute;
  left: 58%;
  top: 160px;
}
#section3 p {
  position: absolute;
  left: 58%;
  top: 260px;
  color: #111;
  font-size: 108%;
  width: 450px;
  line-height: 2;
}

/*ナビゲーション*/
ul#nav {
  position: fixed;
  left: 20px;
  top: 20px;
  background: #000;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
  padding: 8px 15px 0px 15px;
}
ul#nav li {
  display: inline;
  margin: 0 10px;
}
ul#nav li a {
  opacity: 0.6;
}
ul#nav li a:hover {
  opacity: 1;
}

【 parallax.js 】

/*======================================================
初期設定
======================================================*/
//セクションの高さの最小値
var minHeight = 500;
//自動スクロールの速度（1000で1秒、多いほどゆっくり）
var scrollSpeed = 1000;

//各要素の背景初期位置を格納しておくオブジェクト
var originBgPosition = new Object();

/*======================================================
ドキュメント読み込み後の処理
======================================================*/
$(document).ready(function(){

 //選択枠を隠す
 $('a').focus(function(e){this.blur()});

 //レイヤー用のdiv要素を2枚追加
 $(".section")
  .prepend('<div class="layer layer2"></div>')
  .prepend('<div class="layer layer1"></div>');

 //背景画像の初期位置を取得
 $(".section").each(function(i){
  var _thisID = $(this).attr("id");
  originBgPosition[_thisID] = new Object();
  originBgPosition[_thisID]["section"] = getbackgroundPosition($(this));
  originBgPosition[_thisID]["layer1"] = getbackgroundPosition($(this).find(".layer1"));
  originBgPosition[_thisID]["layer2"] = getbackgroundPosition($(this).find(".layer2"));
 });

 //背景の配置を「fixed」に変更
 $(".section, .layer1, .layer2").css("background-attachment","fixed");

 //画面をアップデート
 $(window).trigger("resize");

});

/*======================================================
背景位置を取得してハッシュで返す
======================================================*/
function getbackgroundPosition(obj) {
 var pos = obj.css("background-position");
 var posArray = new Array();
 //IE対策
 if(pos){
  //IE以外
  posArray = pos.split(" ");
 }else{
  //IE
  posArray = [obj.css("backgroundPositionX"), obj.css("backgroundPositionY")];
 } 
 return {x:parseInt(posArray[0]), y:parseInt(posArray[1])};
}

/*======================================================
パララックスを実現するための関数
======================================================*/
$(window).bind("scroll resize", parallaxScroll);
function parallaxScroll (event) {

 //イベントタイプがresizeのときの処理
 if(event.type == "resize"){
  //セクションの高さを画面の高さに合わせる
  if($(window).height() > minHeight){
   $(".section").height($(window).height() + 50);
  }
 }

 //ナビゲーションの表示・非表示切り替え
 if($(window).scrollTop() < $("ul#topNav").offset().top + $("ul#topNav").height()){
  $("#nav").animate({opacity:"hide"}, 200);
 } else {
  $("#nav").animate({opacity:"show"}, 200);
 }

 //画面内に入っている要素を返す
 var activeContents = $(".section").filter(function (i) { 
  if($(window).scrollTop() + $(window).height() > $(this).offset().top && $(window).scrollTop() < $(this).offset().top + $(this).height()){
   return true;
  }else{
   return false;
  }
 });

 //背景画像位置のアップデート
 activeContents.each(function(i){

  //現在の要素内でのスクロール位置を取得
  var scrollTop = $(this).offset().top - $(window).scrollTop();
  var scrollLeft = $(this).offset().left- $(window).scrollLeft();

  //新しい背景座標を計算
  var _thisID = $(this).attr("id");
  var newBgPosition = {section:{x:0, y:0}, layer1:{x:0, y:0}, layer2:{x:0, y:0}}
  //X座標
  newBgPosition["section"]["x"] = originBgPosition[_thisID]["section"]["x"] + scrollLeft * 0.2;
  newBgPosition["layer1"]["x"] = originBgPosition[_thisID]["layer1"]["x"] + scrollLeft * 0.3;
  newBgPosition["layer2"]["x"] = originBgPosition[_thisID]["layer2"]["x"] + scrollLeft * 0.6;
  //Y座標
  newBgPosition["section"]["y"] = originBgPosition[_thisID]["section"]["y"] + scrollTop * 0.2;
  newBgPosition["layer1"]["y"] = originBgPosition[_thisID]["layer1"]["y"] + scrollTop * 0.3;
  newBgPosition["layer2"]["y"] = originBgPosition[_thisID]["layer2"]["y"] + scrollTop * 0.6;

  //各背景を移動させる
  $(this).css("background-position", newBgPosition["section"]["x"] + "px " + newBgPosition["section"]["y"] + "px");
  $(this).find(".layer1").css("background-position", newBgPosition["layer1"]["x"] + "px " + newBgPosition["layer1"]["y"] + "px");
  $(this).find(".layer2").css("background-position", newBgPosition["layer2"]["x"] + "px " + newBgPosition["layer2"]["y"] + "px");
 });
}

/*======================================================
ナビゲーションによるスクロール
======================================================*/
function pageScroll(n){
 $.scrollTo('#section' + n, scrollSpeed, {easing:"easeInOutQuart"});
}

その他必要なjsファイルは、ソースを表示して各自ファイルを作って下さい。
基本的には画像を変えるだけである程度は形になります。