最初に少し溜めを作ってから左または右から対象(テキストや画像)をフェードインさせたいです。

Question

■前提・実現したいこと
・最初に少し溜めを作ってから左または右から対象(テキストや画像)をフェードインさせたいです。

参考サイト ※やりたい事はこのサイトの動きです。
https://ring.education/

■発生している問題
・今出来ているものだとフェードインからフェードアウトまで一定間隔なので躍動感を出したく最初少し溜めがあってから一気に表示させたいです。

■ソース　※スクロールで対象が画面内に表示された時に動くようにしています。

◇JS

$(function(){
$(window).scroll(function (){
$('.fadein').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight){
$(this).addClass('scrollin');
}
});
});
});

◇CSS

/* 画面外にいる状態 */
.fadein {
opacity : 0.1;
transform : translate(0, 0);
transition : all 1s;
}

/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(500px, 0);
}

◇HTML

<div> <section class="fadein"> <img src="test.jpg" /> </section> </div>

お手数をおかけいたしますが何かアドバイスを頂けると幸いです。
ご確認のほどよろしくお願いいたします。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[zakioka]

承知しました！以後気をつけます！

[kei344]

ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

Answer 1

jQuery Easing Pluginを利用すれば様々なエフェクトが使用できます

Comments

[zakioka]

ありがとうございました！活用させていただきます！

Answer 2

transition には「どうアニメーションさせるか」というパラメータも書くことができます。多分あなたの思う「溜めてから移動」というのはeaseInと呼ばれる種類のものです。その中でも三次関数な加速をするのがeaseInCubicです。

transition: all 1s easeInCubic;

アニメーションの種類はたくさんあるので、こちらを参考に選んでください。
http://easings.net/ja

Comments

[zakioka]

アドバイスありがとうございます！うまく出来ました！