jQueryを使用したサイト（パララックス）

jQueryによるサイト制作で詰まってしまいました。

このようなサイトを作って欲しいという依頼です。
（http://www.apple.com/jp/music/?itscg=1001&at=1000lGN&ct=JP-google&cid=wwa-jp-kwg-music）

・ブラウザ上部に背景画像が当たった時に、
画像上の文字はその場で固定、
背景画像のみスクロール

※背景動画は除く

とのことで、イメージとしてはパララックスを使用するのが近いかと思うのですが、
何を使えば簡単に実装できますでしょうか。

javascriptに関しては初心者すぎますので、
分かりやすく、簡単に実装できるものを探しています。

詳しく解説しているサイトでも構いません。

これまで試したものは、
・Scroll Magic
・SuperScrollorama
・Jarallax

です。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと答えになっていないと思いますが…

Scroll Magicなら、固定するのは簡単かと存じます。
※どのくらい固定するのか…が難しいですが。。。。

サンプルHTML（雑ですいません）ScrollMagic v1.3.0使用

lang
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="utf-8"> 
5  <title>TEST</title>
6  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
7  <script type="text/javascript" src="jquery.scrollmagic.min.js"></script>
8</head>
9
10<style>
11  div.box {
12  width:100%;
13  height:800px;
14  text-align:center;
15}
16</style>
17
18<body>
19
20
21<div style='background-color:#ffa;' class='box'>
22</div>
23
24<div style='background-color:#aff;' id='targetDiv' class='box'>
25  <div id='textArea' style='padding:200px;border:1px solid #000;'>
26    TEXT<br>
27    TEXT
28  </div>
29</div>
30
31<div style='background-color:#faf;' id='targetDiv2' class='box'>
32</div>
33
34<div style='background-color:#aaa;;' class='box'>
35</div>
36
37<script>
38var controller = new ScrollMagic(); //とりあえずcontrollerって名前でScrollMagic宣言
39//シーンを作る
40var scene = new ScrollScene({
41  triggerElement: "#targetDiv"//トリガー指定
42  ,duration: 800//800ピクセルのスクロール量の間 ← 高さが不定だと難しくなるかも…
43  ,triggerHook : "onLeave"//トリガーが上端に達したら実行
44})
45.setPin("#textArea") //対象を固定（Pin）
46.addTo(controller);//このシーンをcontroller（ScrollMagic）に紐付け
47</script>
48
49</body>
50</html>

何かのヒントになれば幸いですm(__)m

-------追記（2015.6.22）
当初のソースに誤記が混じっていましたので修正しました

-------再び追記（2015.6.22）
当初のソースが古いバージョンだったため追記しましたm(__)m
ScrollMagic v2.0.5利用

lang
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="utf-8"> 
5  <title>TEST</title>
6  <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
7</head>
8
9<style>
10  div.box {
11  width:100%;
12  height:800px;
13  text-align:center;
14}
15</style>
16
17<body>
18
19
20<div style='background-color:#ffa;' class='box'>
21</div>
22
23<div style='background-color:#aff;' id='targetDiv' class='box'>
24  <div id='textArea' style='padding:200px;border:1px solid #000;'>
25    TEXT<br>
26    TEXT
27  </div>
28</div>
29
30<div style='background-color:#faf;' id='targetDiv2' class='box'>
31</div>
32
33<div style='background-color:#aaa;;' class='box'>
34</div>
35
36<script>
37var controller = new ScrollMagic.Controller(); //とりあえずcontrollerって名前でScrollMagic宣言
38//シーンを作る
39var scene = new ScrollMagic.Scene({
40  triggerElement: "#targetDiv"//トリガー指定
41  ,duration: 800//800ピクセルのスクロール量の間 ← 高さが不定だと難しくなるかも…
42  ,triggerHook : "onLeave"//トリガーが上端に達したら実行
43})
44.setPin("#textArea") //対象を固定（Pin）
45.addTo(controller);//このシーンをcontroller（ScrollMagic）に紐付け
46</script>
47
48</body>
49</html>
50

投稿2015/06/19 12:36

編集2015/06/22 06:10

noise

総合スコア256

J4CK1E

2015/06/22 02:17

ありがとうございます。 divの上をトリガーとして、テキストを固定、テキストの下部がdivの下部にいったらそのままテキストも可動という感じにしたいです。貼っていただいたhtmlをjquery.scrollmagic.min.jsと同じディレクトリに置いてプレビューしましたが何も動きません... お手数おかけしますが再度回答していただけると幸いです。よろしくお願いいたします。

noise

2015/06/22 02:47

ソースに誤記が混じっていました。 ,duration: 800,//800ピクセルのスクロール量の間 ← 高さが不定だと難しくなるかも… この行、「,」がよけいに付与されています。すいませんでした。正しくは ,duration: 800//800ピクセルのスクロール量の間 ← 高さが不定だと難しくなるかも… です。実は、「テキストの下部がdivの下部にいったら、そのままテキストも可動」とおっしゃるように「固定の解除」も何か簡単な方法はなかったかと探ったためゴミが残ったようです。 durationは数値指定以外にも、関数化も可能だと思われますので、何かしら方法はあるものだと思いますが… ちょっと簡単ではないかもしれません。 ※私が知らないだけで、超簡単な設定とかもあるかもしれません高さが不定だと難しいですが、親要素が背景画像とのことですので、テキスト要素の高さを固定して（テキストも大きさを固定する必要があるかも）固定するピクセル数を差分として設定可能であれば「簡単」にできるかと思ってのご提案です。不足、不明もあるかとは存じますが、この方法に固執せず、いろいろ試しながらでも実現されることを応援いたします。

J4CK1E

2015/06/22 03:39

ありがとうございます。修正をいただいたところでもう一度試してみたのですが動きません... 内容的に大変分かりやすく助かるのですが、動作しない原因がわからず... こちらでもいろいろ試してみます。原因がわかれば追記いただけると幸いです。なんども申し訳ありません。よろしくお願いいたします。

noise

2015/06/22 03:59

いえいえ、どうぞお気遣いなく。動作確認はしたのですが、まだおかしい箇所があったかも。。。こちらこそご説明が悪く、かえってお手間を増やして恐縮です。ちなみに、エラーとか何か出てませんでしょうか。既知であれば失礼ながら、動かないページを表示させた時に「コンソール」に何か出ていないか確認いただけますでしょうか。 IEであれば F12キー、もしくはメニューから「開発者ツール」で、「コンソール」を見てみてください。 Google Chromeであれば F12キー、もしくはメニューから「その他のツール→デベロッパーツール」で、「Console」を見てみてください。お手数かと存じますれば、お時間の許される時にでもご確認いただけますれば何か分かるかもしれません。

J4CK1E

2015/06/22 04:40

jquery.scrollmagic.min.js側で Uncaught TypeError: Cannot read property '_util' of undefined html側では Uncaught ReferenceError: ScrollMagic is not defined とエラーが出ています。 js側の問題かと思い、 URLで直接 https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.min.js で引っ張ってきたのですがエラーの状況は変わりませんでした。

noise

2015/06/22 06:10

J4CK1E

2015/06/22 06:46

ありがとうございます！無事動作を確認することができましたので、これを参考にいろいろと進めていこうと思います！何度も追記修正をしていただき本当にありがとうございます。

noise

2015/06/22 07:01

とんでもない。私のポカで振り回してしまい、かえって申し訳なく存じます。サイトの作成がうまくいきますことをお祈り申し上げます。

行動規範の内容に同意します