スクロールに合わせてふわっとする動きを実現したいです

Question

前提・実現したいこと

http://www.nakanoshima-garden.jp/beer/
こちらのサイトに散りばめられている料理の切り抜きの写真のような動きや
https://yuchiba0121.github.io/furiya/
こちらのサイトの写真のようにスクロールに追従するような動きを実現したいのですが、
検索をかけてもなかなか例が見つからないため質問させていただきました。

jsやjqueryで記述するとなりますとどのようなコードになりますでしょうか。

Answer 1

「スクロールに合わせてふわっとする動き」でググったところ、2番目に上がっていたのがこのページでした。
スクロールでふわっと現れるフェードインの動きをjQueryで実装

誤解を招く表現を修正

ちなみに、1番目はこの質問でしたので、あなたが質問するまでは1番目だっただろうと思います。
ご質問の中で「検索をかけてもなかなか例が見つからないため質問させていただきました。」とありましたが、タイトルそのままで検索をかけて見つかりましたので、どのようなキーワードで検索をかけたのか、そもそも本当に検索をしたのか、についていささかの疑義があります。

質問するときのヒントにもありますように、最低限の検索をしてから質問をされることをお勧めします。
次回からは質問の前に、少なくともこの質問のタイトルにするつもりのキーワードではググってみてください。

質問者も回答者も、お互いに配慮して、気持ちの良いやり取りをしていきたいと思っていますので、なにとぞご協力をお願いいたします。

Answer 2

検索をかけてもなかなか例が見つからない

検索では 具体的に技術用語に繋がる名詞を列挙すべきです。
「ふわっとする動き」のような抽象的な表現では結果を得られません。理由は検索を絞りきれないからです。
（例えば、ダンス教室など他の業界でも使われることが容易に想像できます）。

なので、以下のような具体的な名称は知っておく必要があります。

1. フェードイン
2. フェードアウト
3. クロスフェード
4. 拡大・縮小
5. etc

2次元的な動きは「アニメーション効果」ですので、
「CSS キーフレームアニメーション」も検索候補に挙げて良いと思います。

---

ちなみに、参考にされたサイトの「フェードイン機能」は、おおよそ以下の処理で実装されているはずです。

1. スクロールイベントをトリガーにする。
2. スクロール量と表示対象画像のHTML文書中でのY位置とを比較する
3. ディスプレイで表示される範囲であれば画像のフェードイン効果を使って表示する。

javascript(jQueryライブラリ含む) だけで実現するより、CSSも絡めた実装を探してみてはどうでしょう。

jsやjqueryで記述するとなりますとどのようなコードになりますでしょうか。

まずは、再検索してみて、自己回答を目指してみてください。

Answer 3

目の前に理想とする動きがあるのでしたら、それを解析するのが第一にやるべきことです。
競合サイトのCSSとJavaScriptを丸裸にする方法

Answer 4

https://qiita.com/art_porokyu/items/0c38f0ebb44fbdbb2893

Comments

[kyoya0819]

リンクの形式についてですが、

[リンク先のタイトル・わかりやすい名前](リンク)

のようにしていただけるとありがたいです。
〜〜〜
例として、Google.co.jpへは

[Google](https://www.google.co.jp)

です。