jQueryのスクロールやfadeInの実装

Question

下記ページのようなjQueryのアニメーションを実装したいです。
https://tapiocahero.com/

3つほど実装の仕方がわかりません。
簡単なコードを教えていただけることありがたいです。

1.1番上左のロゴが右下に大きくなるエフェクト。(animateメソッドでwidthとheightを多くしているのでしょうか。ただanimateが起こる条件がscrollTop>0になったときでいいのでしょうか。)

2.1番上のスライドがページスクロールされると下のセクションが現れて隠れる。
(上のスライドのセクションと下のページセクションのz-indexの差で上のスライドが隠れるのでしょうか。)

3.色々なテキストや写真が横や下からfadeInする。
(fadeInだと思うのですが、横や下からの出現する指定方法がわかりません。あと、fadeInが発生する条件がページが出てからになっていますが、その辺も条件設定があるのでしょうか。)

大まかなで結構ですので、実装方法を教えていただけると助かります。

それを参考にして作ってみたいです。

宜しくお願い致します。

Answer 1

質問に記載されているサイトの JavaScript のソースコードを一度ご覧になってみてはいかがでしょうか。
アニメーション（トランジション）の実装はトップページのソースコード12行目で読み込まれている js/hero.js にあります。

1. hero.js の65-75行目にあります。スクロール位置によって body 要素に smaller クラスを付与／削除しています。body 要素に smaller クラスが付いている場合に、h1.logo の幅が変わります。詳しくはインスペクタで .logo 要素を確認してみてください。scrollTop の条件は hero.js の65-75行目に書いてあります。
2. はい、z-index の差で隠れるようになっています。こちらもインスペクタで確かめてみてください。
3. hero.js の139-198行目です。スクロール位置に応じて scrollin というクラスを付与するようにしておいて、あとは CSS でフェードインを実現しています。fi、fi2、fi3 などのクラスが用意されていますが、それぞれフェードインの動きが異なります。トップページで読み込んでいる css/style.css で探してみてください。

1, 3について当該サイトでは jQuery のanimateメソッドを使用せず、JavaScript でスクロール位置に応じてクラスを付与／削除して（jQuery のaddClass/removeClass）、あとは CSS トランジションで実装していますので、是非 CSS トランジション／CSS アニメーションを勉強してみてください。

Comments

[Tsuyoshi777]

ありがとうございます。調べてみます。