-
1:ID:Z4EvNX · 2018-03-27

#コーディング web制作においてpagepiling.jsを使いフルスクリーンでの実装を試みていますが、
下記のようなfadeIn系のjQuery記述と相性が悪いのか、うまく要素がfadeInしてくれません。

お分かりの方、ご教授いただけると幸いです。(pagepilingのフルスクリーン表示は問題なく出来ます。)
$(".show").css("opacity","0");
$(window).scroll(function(){
$(".show").each(function(){
var imgpos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgpos - windowHeight + windowHeight/5){
$(this).css("opacity","1");
}
else {
$(this).css("opacity","0");
}
});

2 件の回答

2:ID:Ar4K5u · 2018-03-28

HTMLなしでどうしろと……
ちょっと見たけどそもそもscrollしてなくない?

3:ID: · 2018-03-28

Re:2
失礼いたしました。
classにshowが付与してあるものにスクロールイベントをつけたいです。
ちなみに今の段階では、画面が表示されたらチラッと見えて消えるという、逆の現象が起きています。。
やはりpagepiling.jsとの相性が悪いのでしょうか、、??

<div id="content">

<div id="works" class="clearfix">

<div class="pic_box clearfix">
<div>
<ul>
<li class="show"><a href="img/works/rd_pvs.jpg" data-lightbox="group"><img src="img/works/thumb/rd_pvs.jpg" alt="50off" /></a></li>
</ul>
<ul class="show inline clearfix">
<li class="show"><a href="img/fab_bn/50off.jpg" data-lightbox="group"><img src="img/fab_bn/op_col.jpg" alt="50off" /></a></li>
<li class="show"><a href="img/works/uvcut.png" data-lightbox="group"><img src="img/works/uvcut.png" alt="50off" /></a></li>
</ul>
</div>

</div><!--works-->
</div><!--content-->

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る