このサイトで背景がマウススクロールとは同時でなく少し遅れてイージングがかかった動きをしているのですが、これはどのように行ってるのでしょうか？ソースを見てみたのですが、これっというものが見つからず、ここで相談しましたhttp://love-peace.asmik-ace.co.jp/
asetts/js/contents.*.jsで定義してるっぽいよ。
ありがとうございます。たどって調べてみると既存のJSではなく、オリジナルで書かれてるみたいですね。
JSを使ってやっているのだと思います。「パララックス」で検索すれば色々やり方が出てきます。代表的なJSのプラグインはこちら。//ianlunn.co.uk/plugins/jquery-parallax/
ありがとうございます。パララックスは知っていたのですが、このサイトで使われている、ディレイがあってイージングまでしているパララックスがどうやってるのかが謎でした。どうやらライブラリーではなくオリジナルで書かれてるみたいでした。
や、よく動きを見るとディレイは入ってないぽいですね。すみません。イージングができるパララックスでした。そういったライブラリご存知だったりしますでしょうか？
自分で組んだ方が好きにデザインできるから、やってみれ。
ぜんぜんパララックス（視差効果）じゃないのにパララックスって安易に言わないほうがいいと思うよ。
jsで背景のpositionを動かしてるだけなんじゃないのか。適当だけど、setInterval使いつつ、コールバックの中でpositionY += (targetY - positionY) / 10（数字は何でも良い）見たいな感じでやればとりあえずは出来そうでしょうよと。
setinterval使う必要はないか。animateとかでもいけるのかね。まー試してみないとわからんけどとりあえずそんな感じだろう。
スクロールイベントから移動量取得してanimateにdelayかける感じ。
そんな感じだね。
みんなの回答 3 件
asetts/js/contents.*.js
で定義してるっぽいよ。
JSを使ってやっているのだと思います。「パララックス」で検索すれば色々やり方が出てきます。
代表的なJSのプラグインはこちら。
//ianlunn.co.uk/plugins/jquery-parallax/
jsで背景のpositionを動かしてるだけなんじゃないのか。
適当だけど、
setInterval使いつつ、コールバックの中で
positionY += (targetY - positionY) / 10（数字は何でも良い）
見たいな感じでやればとりあえずは出来そうでしょうよと。
関連するトピックス