jQuery fadeinに動きを付ける

Question

fadeinしたものに動きを付けたいです。

FLOWERのサイトのトップのアニメーションを再現したいのです。
fadeInまではできましたが、fadeInしながら上に少し動かす方法が分かりません。

教えて頂きたいです。

HTML

<div class="row no-gutters ">
      <div class="col-12 header">

        <!-- headerfadein js -->
        <div class="headerfadein" id="fadeIn"></div>
      </div>
</div>
  

jquery

$(function(){

//fadein
$('#fadeIn').fadeIn(3000);

});
  

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

CSS animation を使えば、jQueryなしで実現できます。

#fadeIn {
  position: relative;
  animation: fadein 3s both;
}
@keyframes fadein {
  0% {
    opacity:0;
    top: 30px;  
  }
  100% {
    opacity:1;
    top: 0;  
  }
}

【CSS3】@keyframes と animation 関連のまとめ - Qiita

Comments

[nollie0107]

早速ご回答いただきありがとうございます。

上記をそのまま使っていけました。

ありがとうございます。これを用いて勉強させて頂きます。

Answer 2

.fadeIn()メソッドでは難しいと思います。.animate()を使ってはいかがですか？
.animate() | jQuery API Documentation
.animate() | jQuery 1.9 日本語リファレンス | js STUDIO

また、CSS transition を使うのもいいかと思います。
スライドしながらフェードインさせるサンプル | jQueryで簡単にフェードイン・フェードアウトをする方法

Comments

[nollie0107]

早速のご返答ありがとうございます。

こちらの資料を基にこれから勉強させて頂きます。

本当に助かりました。ありがとうございます。