jQueryで消えていた要素が表記されるようにする

Question

下記のように、.address--telが、ファーストビューからスクロールしていってフッターの画面が、出た時に、表記されるようにしたかったのですが、
表記されません。
.ready(function ()は、DOMが読み込み終わった直後に実行されるので、フッターのような下にある場合は、スクロールでつくって、
コンテンツが増えて長くなったらまたスクロールの数値をふやすという形で対応するしかないでしょうか？

・HTML

<footer class="footer-common" role="contentinfo">
				<ul class="address address-footer">
					<li><a class="address--tel animation-hover action-hover" href="tel:[phone]">TEL&nbsp;080-1111-1111</a></li>
					<li><a class="address--mail animation-hover action-hover" href="mailto:[e-mail]">MAIL&nbsp;[e-mail]</a></li>	
			
			</footer><!-- /.footer -->

・JS
```ここに言語を入力

<!-- fadein-from-bottom-画面表記後すぐに実行 -->

		```ここに言語を入力

<script> $(function(){ $(window).ready(function (){ $('.address--tel,.top-header__address--mail').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 0){ $(this).addClass('scrollin'); } }); }); }); </script>

・CSS

/* 要素がfadeinして動く効果 */
/* 対象の要素-下から */
.address--tel,.top-header__address--mail,.top-gnav__link-fifth,.contact__submit-btn {
    opacity : 0;/* 対象の要素の初期の不透明度 */
    transform : translate(0, 5rem);
    transition : all 1500ms;/* どれくらいで動きが終了するか */
}
/* /対象の要素 */

/* /要素がfadeinして上から下に動く効果 */
.translate3d-lower-right {
    opacity : 0;/* 対象の要素の初期の不透明度 */
    transform: translate3d(-1rem,-2rem,-5rem);
    /*transform : translate(5rem, 0);横からスライド*/
    transition : all 2500ms;
}
/* /対象の要素 */

/* /要素がfadeinして下から上に動く効果 */
/* 対象の要素 */
.translate3d-to-upper-left {
    opacity : 0;/* 対象の要素の初期の不透明度 */
    transform: translate3d(5rem,2rem,1rem);
    transition : all 1500ms;
}
/* /対象の要素 */

/* 元の位置に戻す-translateすべて共有 */
.scrollin {
    opacity : 1;/* opacity:0;に勝つように、必ず一番下に配置する */
    transform : translate(0, 0);
    }
/* /元の位置に戻す-translateすべて共有 */

Answer 1

jquery.inview.jsというプラグインを使うと、
要素が表示されたときに何かを実行
ということができます。

私は見てませんが、
中身を見ればどうやって実装しているかもわかると思います。

Comments

[退会済みユーザー]

ありがとうございます。

下記のJSはWEBページ表記時に表記されるという形のJSとしてあっているが、
画面が見えた時点での実行というものではないということですね。

＞＞＞
<script>
$(function(){
$(window).ready(function (){
$('.address--tel,.top-header__address--mail').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 0){
$(this).addClass('scrollin');
}
});
});
});
</script>
jquery.inview.jsというプラグインを使うしか、その方法はないのですね。