■前提・実現したいこと
・最初に少し溜めを作ってから左または右から対象(テキストや画像)をフェードインさせたいです。
参考サイト ※やりたい事はこのサイトの動きです。
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>お手数をおかけいたしますが何かアドバイスを頂けると幸いです。
ご確認のほどよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー