ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

すごく簡単にパララックス?skrollrでスクロールアニメーション

skollr

最近、パララックスとかって話題に上がってないような。
気がついていないだけ?

うちの会社でも簡単なパララックス見たいなものをやったりしております。
スクロールでアニメーションをさせるとか、わけわからん!って人もいると思いますが、「skrollr」使ったらすごく簡単です。

では、まずデモ的なものを作りました。(簡単すぎるやろ!)

See the Pen skrollr by msys (@msys) on CodePen.

これ3分ぐらいでつくれます。
本当に簡単です。

することを書くと

  • スクロールさせたいものをHTMLでかく
  • ちょっとスタイルをつける。
  • skrollrを読み込ませる。
  • 1行のJavascriptを書く
  • アニメーションさせたい場所(座標)を指定する。
    そしてそこでどうしたいかを書く

ザックリと書くとこんな感じです。
ザックリ過ぎてわからないと思うので、ちょっとだけ詳しいのを書いていきますよ!

スクロールさせたいものをHTMLでかく

<body>
<div id="stage">
<div class="section">
  <h1>skrollr</h1>
</div>
</div>
</body>

今回は背景色と文字の色を変えるというアニメーションなので、こんな感じ!

ちょっとスタイルをつける。

body{
  padding: 0;
  margin: 0;
}
#stage{
  height: 2000px;
}
.section{
  position: fixed;
  width: 100%;
  height: 100%;
  
  h1{
    color: #333;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

スクロールしても移動しないようにfixedを指定したり文字の位置を指定したりです。
本当にこんなのでいいの?

skrollrを読み込ませる。

ここが重要!!
skrollrを読み込ませるんです!
ここが一番大変です。
公式からダウンロードしてきます。
そしてheadに読み込ませます。

公式
公式というかGithub

<script src="path/skrollr.min.js">

cdnがあれば簡単にできるんですけどもね。

1行のJavascriptを書く

var s = skrollr.init();

ほんとこれだけ・・・

アニメーションさせたい場所(座標)を指定する。
そしてそこでどうしたいかを書く

上で書いたhtmlに指定するんですが、座標の指定して動作を書く、キーフレームアニメーションみたいなもんですよね。
座標は「data-0」で0座標の位置の指定をする。
アニメーションの指定はcssと一緒で、「background: rgb(255,255,255);」とする。
同じように2000座標に指定したいときは「data-2000」です。あとは一緒。文字色も指定します。

<body
    data-0="background: rgb(255,255,255);"
    data-2000="background: rgb(0, 0, 0);">
<div id="stage">
<div class="section">
  <h1
    data-0="color: rgb(0, 0, 0);"
    data-2000="color: rgb(255,255,255);">skrollr</h1>
</div>
</div>
</body>

これだけで、上のデモみたいなのができます。
これを使ってtransformとかpositionを駆使すれば、結構すごいものが作れます。
公式デモでは、結構ごちゃごちゃ動かしています。
一度見てみてはいかがですか^^

公式のデモ

すごく簡単な設定で、今まで難しかったことが出来るようになるjsは作ってくれた人様様です。
今回は、特に簡単な設定で、いままで複雑だなと思っていたことが出来るので、おすすめです。
皆様も一度挑戦してみてはいかがですか!

この記事を共有する

髭人
投稿者:髭人
2016年10月26日水曜日 | 21:35
WEB制作業界に新しい風に!台風になりたい!

この人が書いたその他のブログ記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • I.M.Dコーポレートサイト
お問い合わせ