フェードインする画像にlerp（線形補間）アニメーションを追加したい

Question

こんにちは。

実現したいこと

実現したいフェードイン

このサイトのような読み込み後に画像が下からスライドインしてくるアニメーションをjavascriptで実装したいです。
調べてみると英語ではlerpといい、追従してくるマウスカーソルのサンプルが多いのですが、このような場面ではどのように実装できるのでしょうか？

思いついた段階ですと、各画像のポジションを取得して、到達地点を決める？ transform: translateYの値を設定する。。。？？

他のアイディアやこれを実装するまでのアプローチが全くわからないので、教えていただけるととても嬉しいです！
よろしくお願いします。

参考にしたサイト

＊＊＊追記＊＊＊
そもそもこの実現したいサイトのアニメーションは、lerpは必要でなくeasingだけで実現しているのかも？と思いました。

Comments

[hatena19]

画像のホバーするとテキストが下からスライドイン、ホバーアウトすると上へスライドアウトする動作を実現したいということでしょうか。

[hatena19]

それとも読み込み時に画像が下からスライドインする動作のことでしょうか。

[tomtom199]

読み込み後に画像が下からスライドインしてくる動作です。言葉不足で失礼しました。

[hatena19]

それが分かるように質問文を編集してください。

Answer 1

CSSアニメーションを使えばいいでしょう。

<img class="img1" src="https://picsum.photos/id/237/100/150" alt="img1">

<img class="img2" src="https://picsum.photos/id/2/100/150" alt="img2">

body {
  margin: 0;
  width:100%;
  height: 100vh;
}
img {
  position: fixed;  
  animation: SlideIn 1.5s;
}
.img1 {
  top: 100px;
  left: 300px;
}
.img2 {
  top: 200px;
  left: 600px;  
}
@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(100vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

CodePenサンプル

Comments

[tomtom199]

CSSだけで実現できるんですね。実装できました。ありがとうございます！