皆様おひさしゅうございます。
ラーメン女子のうさこでございます。

最近は大好きなラーメンも食べるのを控えています。
えらいことになってるんですよ・・・ 親に骨皮筋子と言われた私でも・・・!

以前、会社の飲み会でデザイナーのユウコさんに、25 歳を超えるといくら食べても太らなかった体質も変化するから気をつけた方がいいよ!・・・というありがたい言葉をいただきました・・・ まさに今、身に染みて体感中でございます(涙

4月9日をもって Windows XP がサポート終了となりましたね!
これで IE6 との長き戦いにも終止符が打てそうですっ!やっとですよ、やっと・・・!
IE6 消え失せろ~♪ ついでに言うと、IE8 も消えちゃっていいんだぜ☆

さて・・・今回で3回目の投稿となりますっ
今回は、スマホに対応したパララックスサイトの作り方についてご紹介!

Sublime Text ネタで通してきたうさこですが、苦しくも今回はあまり関連の無いネタとなっております。

関連 簡単にパララックスを実装できるRellax.JSの使い方

目次

  1. パララックスを実現するjQuery「ScrollTween.js」のダウンロード
  2. HTML
  3. CSS
  4. jQuery
  5. Option
  6. 注意すべき点
  7. さいごに・・・。
  8. 参考サイト

パララックスを実現するjQuery「ScrollTween.js」のダウンロード

ScrollTween.js
https://github.com/camobile/ScrollTween.js

上記より、ZIPをダウンロードしてきますっ
解凍したデータ内にある下記を使用します!

  • jquery.mousewheel.js
  • ScrollTween.js

HTML

head 要素内

これらを読み込ませますっ

body 要素内

#container を用意して、アニメーションをさせる要素を包括しますっ

CSS

jQuery

Option

動きに関する関数は、下記がライブラリ側で用意されていますっ

~方向に num px 移動する

引数で移動させる px 数を指定できます!

middle(num)

中央(垂直)方向に num(単位:px) 移動する
※topOut()、bottomOut()のみ併用可能

center(num)

中央(水平)方向に num(単位:px) 移動する
※leftOut()、rightOut()のみ併用可能

top(num)

上方向に num(単位:px) 移動する

bottom(num)

下方向に num(単位:px) 移動する

left(num)

左方向に num(単位:px) 移動する

right(num)

右方向に num(単位:px) 移動する

~方向にはける

topOut()

上方向にはける

bottomOut()

下方向にはける

leftOut()

左方向にはける

rightOut()

右方向にはける

アンカーリンクをつける

ライブラリ側で .scrollTo() というメソッドが用意されているようなので、惜しみ無く利用してあげます。こちら、ライブラリの配布先にも載ってない情報です!

注意すべき点

イージングについて

  1. speed 部分は、実際スクロールで動いた位置からどれだけふんわりずらすかというやつでパララックスみたいにどのくらいスクロールさせたら・・・的な作りだと、そこの値を調整した瞬間に想定していた動きが全て乱れるということになるので要注意です!
  2. easing 部分は、スピード感のある動きに関わっています。後のほうで直そうとすると、アニメーション全ての秒数に関わってきて死亡確定なので・・・初めの段階で「気持ちのいい動き」となるイージングの動きを確認して OK をもらうようにしましょう!
  3. スクロール後に少し余韻が残る感じにしたい場合は、上記2点の値を大きめにしてスクロールしたらより余分に動かすようにすると実現できます。

~方向にはける系の使いどころ

1つのアニメーション要素に対して、追従するような要素があるなど・・・ 完全に独立した動きじゃない場合は、Out 系の関数を使わないようにした方が無難です!要素同士のスクロール値の計算が大変面倒なことになりますっ

制作の流れ

想定している動きと異なった場合に修正量が半端ないので、2セクションずつ等ちょっとずつ確認するようにして想定する動きに合わせていきましょう。

さいごに・・・。

いかがだったでしょうか? パララックス案件の依頼が増えてきてしばらく経ちますが、スマホにも対応!ってことになると PC で使っていたライブラリがスマホでは使えなかったりします!

ScrollTween.js を使ったパララックスサイトの作り方が、本家の ScrollTween.js で紹介されておらず、上手くまとまっているサイトも少なかったので・・・なるだけ分かりやすいように補足も加える形でまとめてみました!

パララックスサイトのアイデアをこちらにまとめました。ぜひともチェックしてみてください。
アイデアを真似したくなるパララックスサイト20選

みなさまのお役に立てれば幸いです!
それでは・・・よきコーディングライフを!!

参考サイト

あわせて読みたい記事