森山直太朗の公式HPがシュールでワロタなパララックスデザイン

Webサイトのキュレーションサイトに取り上げられているのでご覧になった方も多いと思うのですが、個人的に「冴えたアイデア」だな、と思ったのでシェアします。

森山直太朗公式サイト

http://naotaro.com/

「さくら（独唱）」で一躍スターダムにのし上がったのは皆様ご存知の通りだと思います。
持ち前のキャラクターでバラエティ番組にも引っ張りだこの、「タレント、芸能人」というカテゴリにもっともピッタリと当てはまる彼

Webサイトはとてもシュールです。

スクロールしていくと

ヒゲが生えたり

メガネ面になったり

みんな大好き、小悪魔系になったり

完全にラクガキです。

こういったデザインは俗にいう「パララックスデザイン」というものですね。

パララックスデザインとは

「パララックス」とはレイヤーごとにスクロールの速度を変える技法のことである。
主にWebデザインの世界で用いられる言葉。
Webサイトをいくつかのレイヤーに分けて、それぞれについてスクロールをした時の速度を変化させる。これによりWebサイトを立体的に見せることができるとされている。
例えばマウスで1回スクロールをした時に、メインの部分は随時それに従いスクロールするが、メニューの部分はスクロールの幅がメイン画面と比較して少ないなど。
元々はカメラ用語であり、光学ファインダーで見る構図と実際に撮影される画像の構図がズレてしまうことを指す。
http://netyougo.com/wd/10175.html

具体的にはこういった感じです。

Frankie's Sports Bar & Diner
Frankie’s Sports Bar & Diner

平面なはずなのに、奥行きが感じられませんか？そうでもないですか？

ですが森山直太朗の公式サイトほど”遊んだ”ものはそうはないように感じられます。
シュールなラクガキテイストが本人のキャラクターにもマッチしているようで、「クスっ」と来てしまう、いいデザインですね！

森山直太朗流パララックスはどうやって実装しているのか

結構単純な構造です。

HTML

CSS

.background-hack {/*直太朗氏本人の画像*/      background-color: #000000;      background-image: url("../images/bg-top.jpg");      background-position: center top;      background-repeat: no-repeat;      bottom: 0;      left: 0;      position: fixed;      right: 0;      top: 0;      z-index: -1;  }    #slide3 {      height: 300px;  }  .slide {      padding-bottom: 60px;      padding-left: 0;      padding-right: 0;      padding-top: 60px;      position: relative;      width: 100%;  }    .enjoy2 {/*ラクガキのひげとかの親要素*/      left: 50%;      margin-left: -150px;      position: absolute;      text-align: center;      top: 100px;      width: 300px;      z-index: 20;  }    img {/*ラクガキのひげとか本体*/      max-width: 100%;      border: 0; /* 1 */      -ms-interpolation-mode: bicubic; /* 2 */  }

細かい書き方は違いますが、ざっとこんな感じです。
親要素に高さをしっかりと指定することで、position:absoluteで絶対配置したラクガキ部分がハマるところがしっかりと見えるのです。

しかし結構変わっているところは、要素に背景を指定しているのではなく、背景用の画像を配置し、一歩後ろに表示させていて、その上にコンテンツとメガネ、ヒゲ、ツノをかぶせている所。
なるほど、こういったやり方があるんだな、と勉強になりますね！

ちなみに親要素の高さ300pxはスマホ用表示でも変わらないので、森山直太朗氏のヴィジュアルがとても映えてくれます。