#コーディング
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 件の回答
HTMLなしでどうしろと……
ちょっと見たけどそもそもscrollしてなくない?
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-->