Q&A
スクロールバーそのものではなく画面の動きのことでしょうか？
画面スクロールの速度を変える方法が分かりません。
このサイトはスクロール速度がやや遅めになっていますが、どのようにしたら出来るのでしょうか。
http://melanie-f.com/en/
ボックスやテキストのスクロール速度ではなく、画面自体のスクロール速度です。
色々調べてコード組んでみたり、プラグインなど試してみたのですが、上手くいかず。
どなたかわかる方何卒宜しくお願いいたします。
回答2件
ご回答ありがとうございます！
これもパララックスというのですかね？
中にある要素に対しての速度ではないです。
スクロール速度自体を変えるということです。
参考URLのサイトはやや遅めですよね？
とにかく少しスローになれば何でも良いのですが・・・。
うーん。
単に縦に長くて動作が多いから「重く」なってパララックス効果もあいまって遅く感じるだけのように思えなくもないですが、、
僕もそれ思ってました。そのサイトに関してはそうかもしれませんね。
でも一応スクロール速度をコントロールするプラグインなどもあったりして導入してみたのですが、挙動が安定せず断念しました。
NiceScrollというやつなのですが、作られた時代も古くあんまり良くないみたいです。
https://memocarilog.info/jquery/3074
より重く感じさせないために最初にローディングかけてるんでしょうね。
ブラウザにより効いたり効かなかったりはありそうですね。
あくまで私個人の感想なので、しばらく回答を待ってみてもいいかもしれません。
参考のサイトですが、TweenMaxを使ってアニメーションをしているようです。
また、スクロールが遅くなっているのではなく、ページ上の要素がスクロールに引きずられて動いています。
例えば下に100pxスクロールするとページ上のテキストは滑らかに下に40px動く、みたいな感じです。
相対的な速度が遅いためにスクロール速度が遅くなったと感じるだけです。
修正:
少し違いました。
全画面の position: fixed な要素があって、スクロールに応じてその要素の上でテキストなどを js から動かしているようです。
ご回答ありがとうございます！
おおお〜、なるほど・・・。
イーズインアウトがかかってるからそう感じてるだけなんですね。確かにスクロールバーを見ると普通の速度のようなきがする・・・。
TweenMaxというのも初めて知りました！
少し調べてみたのですがなかなかリッチな動き出せそうで良いですね！これは使うかもしれません。
karamarimoさん なんだか解決に向かえそうなので回答にしてもらえると・・・。
mts10806さん karamarimoさん
ご回答頂きありがとうございました！
スクロール速度遅めになっているというのは間違いだったので混乱させてしまってすみません。
おかげさまで助かりました。
個人的にはkaramarimoさんにBAをあげたかったですが＾＾；
ひとまず解決に至ったようで良かったです。
パララックスの応用…だと思ったのですが、
TweenMaxとJSによる応用だったのですね…！
中途半端にコメントしっぱなしになってしまいました。すみません。
TweenMaxとそれに含まれるTimelineMaxを使って単純なデモを作りました。
https://codepen.io/karamarimo/pen/ddVBMq
私の回答はひとまず置いといて、コメントでは埋もれてしまうので勿体無いので回答に起こしてください（涙
そうですね。投稿しておきます。すみません。
0
ベストアンサー
そのサイトではTweenMaxが使われているようなので、それを用いたデモを作ってみました。
まずテキストをposition: fixedでスクロールに直接影響されないようにします。
テキストを画面の下からスタートし画面上まで移動させるようなタイムラインを作成します。
スクロールするたびに、表示位置がページ全体の何％の位置にあるかを計算し、それに基づいてタイムラインの現在時刻を動かします。動かすときにTweenMaxを用いてイージングしています。
投稿2018/02/16 01:17
総合スコア2551
「そんな都合のいいものないのではないか」と私の中で決め付けてしまっていた部分があったので
大変勉強になりました。参考にさせていただきます。
karamarimoさん
デモまでご用意頂きありがとうございます！
基本的には通常のパララックスとやり方は変わらないのですね！昨日TweenMax調べてみたのですが、とても使いやすそうでアニメーションに詳しくなくてもデフォルトの設定でプロっぽい動きになるのが良いと思いました。
mts10806さんも
色々とありがとうございます！勉強になりました。
申し訳ないですが、ベストアンサー移動させて頂きました！色々とご配慮頂きありがとうございます。
あなたの回答
tips
プレビュー
