【オリジナル】パララックスサイトを作ってみよう




こんにちは、かつコーチです。

プログラミング学習を始めてもうすぐ3ヶ月です。

今回は、オリジナル作品の第3弾。

先日、パララックスというのを使ったやつを勉強したので、

その復習も兼ねて、オリジナルのWebサイトを作成してみました。

オリジナル作品(完成版)

完成版は以下の通りです。

オリジナル作品

使用する環境

使用する環境は以下の通りです。

フォルダ構成

フォルダ構成は以下の通りです。

HTMLは、index.htmlを用意。

CSSは、styles.cssという形で用意。

imgは、自分の持っている写真から選びました。

では、続いてコードをご紹介します。

HTML

まずは、HTMLです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parallax Website Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="pimg1">
    <div class="ptext">
      <span class="border">
        Parallax Website
      </span>
    </div>
  </div>

  <section class="section section-light">
    <h2>JAPAN</h2>
    <p>
      日本は太平洋に浮かぶ島国で、人口が密集した都市、皇室の宮殿や御所、山岳地帯の国立公園、数千もの神社仏閣があります。<br>
      沖縄の亜熱帯ビーチがある九州、東京や広島平和記念公園がある本州、スキーで有名な北海道を新幹線で行き来できます。<br>
      首都の東京は、高層ビル、ショッピング、ポップ カルチャーで知られています。
    </p>
  </section>

  <div class="pimg2">
    <div class="ptext">
      <span class="border trans">
        HOKKAIDO
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Hokkaido</h2>
    <p>
      北海道は日本の主要四島の中で最北端にある島で、火山、天然温泉、スキー場で知られています。<br>
      起伏の激しい大雪山国立公園には蒸気を上げる火山の旭岳があり、支笏洞爺国立公園にはカルデラ湖、地熱温泉、富士山に似た羊蹄山があります。<br>
      人気のスキーリゾートにはルスツ、富良野、ニセコなどがあります。
    </p>
  </section>

  <div class="pimg3">
    <div class="ptext">
      <span class="border trans">
        Tohoku
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Tohoku</h2>
    <p>
      東北地方は、日本の地域のひとつであり、本州東北部に位置していて、「奥羽地方」ともいう。<br>
       その範囲に法律上の明確な定義はないものの、一般には青森県、岩手県、宮城県、秋田県、山形県、福島県の6県を指す。<br>
       これら6県は、本州の約3割の面積を占める。
    </p>
  </section>

  <div class="pimg4">
    <div class="ptext">
      <span class="border trans">
        KANTO
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Kanto</h2>
    <p>
      関東地方は、日本の地域区分のひとつであり、本州の東部に位置している。<br>
      その範囲について法律上の明確な定義はないが、一般的には茨城県、栃木県、群馬県、埼玉県、千葉県、東京都、神奈川県の1都6県を指して関東地方と呼ぶ。<br>
       首都・東京を擁する関東地方は日本の政治・経済の中心となっており、日本の総人口の3分の1が集中している。
    </p>
  </section>

  <div class="pimg5">
    <div class="ptext">
      <span class="border trans">
        CHUBU
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Chubu</h2>
    <p>
      中部地方は、日本の地方区分の1つで、近代における本州中部の総称。<br>
      東海地方・中央高地・北陸地方からなり、9つの県があり、最大都市は名古屋市。
    </p>
  </section>

  <div class="pimg6">
    <div class="ptext">
      <span class="border trans">
        KINKI
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Kinki</h2>
    <p>
      近畿地方は、本州中西部に位置する日本の地域である。<br>
      かつての畿内とその周辺地域から構成される。<br>
      難波宮、平城宮、平安宮、以降東京遷都までの王城の地で、現在は関東地方に次ぐ日本第二の都市圏・経済圏であり、西日本の中核である。
    </p>
  </section>

  <div class="pimg7">
    <div class="ptext">
      <span class="border trans">
        CHUGOKU
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Chugoku</h2>
    <p>
      中国地方は、本州の西部に位置する、日本の地域のひとつ。 <br>
      鳥取県・島根県・岡山県・広島県・山口県の5県より構成される。<br>
      なお、行政上の管轄としては気象庁は山口県を除き、海上保安庁は山口県西北部、国土交通省海事事務所は下関市を除く。
    </p>
  </section>

  <div class="pimg8">
    <div class="ptext">
      <span class="border trans">
        SHIKOKU
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Shikoku</h2>
    <p>
      四国は主要四島の中で最も小さい島です。<br>
      9 世紀に活躍した空海ゆかりの 88 の霊場(四国八十八ヶ所)を巡る遍路道で知られ、その道のりは約 1,200 km におよびます。<br>
      四国の主な都市には、上記のうちの 8 つの霊場、江戸時代の松山城、日本最古級の温泉である道後温泉のある松山があります。<br>
      四国の内陸にある山岳地帯には、ハイキング コースや急流の河川があります。
    </p>
  </section>

  <div class="pimg9">
    <div class="ptext">
      <span class="border trans">
        KYUSHU
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Kyushu</h2>
    <p>
      九州は日本の主要四島のうち南西端にある島で、気候は主に亜熱帯です。<br>
      活火山やビーチ、そして別府温泉をはじめとする天然温泉で知られています。<br>
      福岡県には、博物館や美術館、大規模なショッピング モール、8 世紀にさかのぼる櫛田神社があります。<br>
      1945 年の原爆投下により大きな被害を受けた長崎県には、平和への願いを込めた平和公園や原爆資料館があります。
    </p>
  </section>

  <div class="pimg10">
    <div class="ptext">
      <span class="border trans">
        OKINAWA
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>Okinawa</h2>
    <p>
      沖縄県は、台湾と本州の間、東シナ海に浮かぶ 150 以上の島からなります。<br>
      熱帯気候、広大なビーチや珊瑚礁、第二次世界大戦の戦跡で知られています。<br>
      沖縄最大の島、沖縄島には、連合国軍による 1945 年の大規模な侵攻を後世に伝えるために建てられた沖縄県平和祈念資料館、<br>
      ジンベエザメとマンタがいる沖縄美ら海水族館があります。
    </p>
  </section>

  <div class="pimg1">
    <div class="ptext">
      <span class="border">
        Kakoi Project
      </span>
    </div>
  </div>
</body>
</html>

HTMLのコードには慣れて来ましたが、どうしてもdivタグを多用してしまうので、

多用せずに綺麗なコードが書けるようになりたいですね。

CSS

続いて、CSSです。

body, html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400px;
  line-height: 1.8em;
  color: #666;
}

.pimg1, .pimg2, .pimg3, .pimg4, .pimg5,
.pimg6, .pimg7, .pimg8, .pimg9, .pimg10 {
  position: relative;
  opacity: 0.70;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

/* fixed = parallax */

  background-attachment: fixed;
}

.pimg1 {
  background-image: url("img/japan1.jpg");
  min-height: 100%;
}

.pimg2 {
  background-image: url("img/japan2.jpg");
  min-height: 400px;
}

.pimg3 {
  background-image: url("img/japan3.jpg");
  min-height: 400px;
}

.pimg4 {
  background-image: url("img/japan4.jpg");
  min-height: 400px;
}

.pimg5 {
  background-image: url("img/japan5.jpg");
  min-height: 400px;
}

.pimg6 {
  background-image: url("img/japan6.jpg");
  min-height: 400px;
}

.pimg7 {
  background-image: url("img/japan7.jpg");
  min-height: 400px;
}
.pimg8 {
  background-image: url("img/japan8.jpg");
  min-height: 400px;
}
.pimg9 {
  background-image: url("img/japan9.jpg");
  min-height: 400px;
}
.pimg10 {
  background-image: url("img/japan10.jpg");
  min-height: 400px;
}

.section {
  text-align: center;
  padding: 50px 80px;
}

.section-light {
  background-color: #f4f4f4;
  color: #666;
}

.section-dark {
  background-color: #282e34;
  color: #ddd;
}

.ptext {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 17px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.ptext .border {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.ptex .border .trans {
  background-color: transparent;
}

@media(max-width:568px) {
  .pimg1, .pimg2, .pimg3 .pimg4 .pimg5 .pimg6 {
    background-attachment: scroll;
  }
}

ポイントは、以下のところですね。

background-attachment: fixed;

background-attachmentは、画面をスクロールするとき、

背景画像をその位置に固定されたままにするか、

スクロールに伴って移動するかどうかを指定します。

fixedとすると、背景画像の位置が固定され、スクロールしても動かなくなり、

scrollとすると、スクロールに伴って背景画像も移動します。

ここでは、画像なので、わからないかもしれませんが、

実際にやってみると、パララックス特有の面白い動きをします。

また、@mediaを使ってタブレットや携帯などサイズの違う画面にも対応させました。

まとめ

以上、今回はパララックスを用いたオリジナルのサイトを作成してみました。

ちょっと画像多すぎたかも(笑)。

オリジナルデモ作品なら、3~4枚で良かったかもですね。

オリジナルのものを作成するときは、構成をどうするのか悩みますね。

打つ時間よりも構成を考える方が時間かかります。。。

でも、自分で考えたものが形になると、とても面白いです。

Webサイトを構築するのはまだまだ大変なので、

次回からは、もっと1つ1つの要素を操作できるようにしていこうと思います。

例えば、ボタンだけを操作するとか、クリックしたらアニメーションするとか、

そんなのをやってみようと思います。

プログラミング学習において参考になれば幸いです。