エンジニアをリングする

プログラをミングしたり。

my web site twitter

簡単!パララックスサイトの作り方

昨日ポートフォリオサイトをアップしたら、予想外に多くの反響を頂いてびっくりしています。

Twitter / Search - yoshiko-pg.github.io

ありがとうございます。素直に嬉しいです。
素直にうれしいので例のサイトの作り方でも書いてみようかと思います。
実は結構簡単な仕組みですw

スクロール量に応じて簡単に要素を動かせるskrollr

スクロールでの動きにはこちらのJSライブラリを使用しました。
skrollr - parallax scrolling for the masses

使い方

操作したい要素にdata-[スクロール量]という属性をつけて、値に変化させたいcssを記述するだけ。

  <div class="box" data-0="left: 0%;" data-500="left: 100%;">test</div>
  <script src"./jquery-2.1.0.min.js"></script>
  <script src="skrollr.js"></script>
  <script type="text/javascript">skrollr.init();</script>

skrollr demo

たったこれだけで、スクロール量0〜500の間にdivのleftが0%から100%まで連続して変動します!

おわかりのように動きが複雑になってくるとHTMLが肥大化してくるわけですが、直感的にCSSを記述していけるこのスタイルは手軽で楽でした。
タイミングをちょっとずつ後ろにずらしたいときとかは数字変えなきゃいけなくて面倒なんですけどね。

これで、たくさんJSを書かなくても手軽にパララックス効果が再現できるわけです。

冒頭のエディタ部分

こちらは自分で実装しました。
あ、シンタックスハイライト(色付け)はプラグインです。
highlight.js
クラスを適用してくれるJSと、カラースキームのCSSが入ってます。

スクロールでプログラミングごっこのつくりかた

  • スクロールして見せたいコードを<pre><code id="code"></code></pre>で囲みます。
  • コード文字列をhljs.highlightAuto("コード").valueに渡して、色付けのクラスを適用したあとのHTML文字列を取得します。
  • あとはスクロール量に応じて文字数を増やしたり減らしたりしながら再読込させるだけ。

HTMLを文字数かえて表示してるので、一瞬開始<とか見えちゃうんですがご愛嬌。

  // scroll programming
  var $code = $('code#code');
  var $text = hljs.highlightAuto($code.text()).value;
  var cursor = '<span id="cursor" />';
  $code.html(cursor);
  $(window).scroll(function () {
    $scroll = $(this).scrollTop();
    if ($scroll < 4000) {
      $code.html($text.substring(0, Math.round($scroll/5)) + cursor);
    }
  });

こちらもシンタックスハイライトのプラグインさまさまですね。

ちかちかするカーソルはCSSです。

というわけで

メインはskrollrでした。
ご紹介したとおり手軽にスクロール量でのCSS変更ができるので、あとは「こう動かしたい!」というイメージが固まれば実装は楽だと思います。
回転や裏返しのようなアニメーションもCSSで表現できてしまう時代なのでいいですね。

パララックスでポートフォリオサイト作りたい方はぜひぜひ試してみてください!

最後に、実装したポートフォリオサイトはこちら!
http://yoshiko-pg.github.io/