web-dev-qa-db-ja.com

ビューポートにスクロールするとFadeIn div

さて、私はユーザーがそれをビューにスクロールしたときにdivをフェードインする単純な方法を探していましたが、まっすぐな解決策を見つけることができません。

[〜＃〜] html [〜＃〜]

<div class="container">

<div class="topdiv">This is a 100% height div. User scrolls down from here.</div>

<div class="fadethisdiv">This content should be faded in 
once .fadethisdiv is [so many]px into the bottom of the viewport.
Let's use 150px as an example.</div>

</div>


[〜＃〜] css [〜＃〜]

.container {
       width:100%;
       height:600px;
}

.topdiv {
       height:100%;
       background-color:#09f;
       text-align:center;
       font-size:24px;
}

.fadethisdiv {
       height:100%;
       background-color:#36afff;
       text-align:center;
       font-size:24px;
}


[〜＃〜] js [〜＃〜]

// Talk to me.

ここにフィドルがあります： http://jsfiddle.net/kz2z5/2/

jqueryhtmlscrollfadeinopacity
11
benbuffone

.topdiv divでスクロールした後、fadeInjQuery関数をトリガーするソリューションを次に示します。

scrollTop関数からビューポートサイズを差し引いてスクロール位置の下部を取得し、その値が.topdiv divの高さに150pxを加えた値よりも大きいか、または必要なだけ下にあるかを確認します。フェードインで。

Divを最初にページに表示して、どこかにスクロールダウンできるようにする必要があるため、display:noneを使用する代わりに、visibilityをhiddenに設定します。 fadeInを使用しています。これは、要素がdisplay:noneで始まることを想定しているため、.fadethisdivdivを非表示にしてフェードインします。

次に、スクロールリスナーを削除して、要素が継続的に非表示にならないようにし、.fadethisdivdivを超えてスクロールした後にfadeInを実行します。

$(window).scroll(function () {
    console.log($(window).scrollTop());
    var topDivHeight = $(".topdiv").height();
    var viewPortSize = $(window).height();

    var triggerAt = 150;
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

    if ($(window).scrollTop() >= triggerHeight) {
        $('.fadethisdiv').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});

フィドル

11
Sterling Graham

ライブラリAOSはこの目的に非常に役立つことがわかりました（ https://github.com/michalsnik/aos#-animations ）。さらに、divがビューポートに入ったときにフェードインするために、他のエフェクトを使用できます。以下の例を参照してください

<script src="js/aos.js"></script>
<link href="css/aos.css" rel="stylesheet" />

<div id="content1" data-aos="flip-down" data-aos-delay="0">
     <p>Some content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        AOS.init();
        AOS.refreshHard();  //optional
    });
</script>
4
BernieSF

これが解決策で、300pxに設定されています

$(document).ready(function(){
var view = {};

var checkPosition = function(){
   var elem = $('.fadethisdiv'), top = elem.offset().top;

                if (top - view.limit < 300) {
                    elem.css('display','none'); 
                }
            };

       $(window).bind('scroll', function() {

            view.top = $(window).scrollTop();
            view.limit = view.top + $(window).height();

            checkPosition();
        }); 

});

http://jsfiddle.net/kz2z5/4/

楽しい！ :)

0
dbucki