Elements with “scroll to top” effect on home page

问题

I have elements which appear/disappear at the edge of the screen when scrolled (hideme). I can animate them but the problem is the beginning, at page load. I can not do the same effect at page load... if someone can help how to do it.

HTML

<div class="section" id="home">
    <div class="avatar"><img src="uploads/avatar2.jpg" alt="IL Avatar" /></div>
    <img class="signature" src="uploads/signature.png" alt="Sign" />
    <div class="intro">This is a text...</div>     
</div>

JQUERY

<script type="text/javascript">
    $(document).ready(function() {

        $('body').hide();
        $('.avatar').css('opacity',0);
        $('.avatar img').css('width','0vw','height','0vw','margin-left','50%','margin-top','50%');
        $('.intro').css('opacity',0,'margin-top','20%');
        $('.signature').css('opacity',0,'top','75%');

        //calling jPreLoader
        $('body').jpreLoader({
            showSplash: false,
            showPercentage: true,
            loaderVPos: '10%',
            autoClose: true,        
        }, function() { //callback function
            $('body').fadeIn(50);
        });     

        // scroll effect
        function visibleHideme(){

            $('#home').each(function(){

                var half_of_object = $(this).offset().top + ($(this).outerHeight()/4);
                var top_of_window = $(window).scrollTop();
                var bottom_of_window = $(window).scrollTop() + $(window).height();  

                if(half_of_object < top_of_window) {
                    $('.avatar').delay(700).css({'opacity':'0'});
                    $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'});
                    $('.intro').css({'opacity':'0','margin-top':'20%'});
                    $('.signature').delay(1000).css({'opacity':'0','top':'75%'});
                }
                if (half_of_object > bottom_of_window){
                    $('.avatar').delay(700).css({'opacity':'0'});
                    $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'});
                    $('.intro').css({'opacity':'0','margin-top':'20%'});
                    $('.signature').delay(1000).css({'opacity':'0','top':'75%'});
                }               
                else if(half_of_object > top_of_window && half_of_object < bottom_of_window){
                    $('.avatar').delay(700).css({'opacity':'1'});
                    $('.avatar img').delay(800).css({'margin-top':'0%','margin-left':'0%','width':'25vw','height':'25vw'});
                    $('.intro').css({'opacity':'1','margin-top':'5%'});
                    $('.signature').delay(1000).css({'opacity':'1','top':'60%'});
                }
            });
        }
        visibleHideme();

        $(window).scroll(function(){
            visibleHideme();
        });

    });
</script>

CSS

#home {
    min-height: 100vh;
}
#home .intro {
    opacity: 0;
    position: relative;
    margin-left: 25%;
    margin-top: 20%;
    width: 65%;
    text-align: left;
}
#home .avatar {
    opacity: 0;
    position: absolute;
    left: 7%;
    top: 35%;
    width: 350px;
    width: 25vw;
    height: 350px;
    height: 25vw;
}
#home .avatar img {
    position: relative;
    width: 0px;
    width: 0vw;
    height: 0px;
    height: 0vw;
    margin-left: 50%;
    margin-top: 50%;
    border: 5px solid rgba(0,0,0,0.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
#home .signature {
    opacity: 0;
    position: absolute;
    left: 70%;
    top: 75%;
    width: 200px;
    height: 124px;
}

In above case, the page loads with a normal opacity animation, the elements do not do what they do at scrolling at screen edge.

If i add callback function animation (just after the "body" fade in), the elements appear first with normal opacity animation, then they do the animation... i am talking about the following additional codes :

    $('.avatar').animate({'opacity':1}, 600, 'easeInCirc');
    $('.avatar img').delay(100).animate({'width':'25vw','height':'25vw','margin-left':'0%','margin-top':'0%'}, 700, 'easeOutBounce');
    $('.intro').delay(500).animate({'opacity':1,'margin-top':'5%'}, 600, 'easeInCirc');
    $('.signature').delay(800).animate({'opacity':1,'top':'60%'}, 800, 'easeInCirc');

On live here : http://photography.igorlaszlo.com/test2.html If someone can help me...

回答1:

I checked the live link you've provided and assume you want no avatar/text/signature shown when page loads but have it fade in, similar to the effect when I scroll back to top after scrolling down far enough for them to vanish.

I'd start edit your css files and therefore initial styling to match the final animation state when the elements are hidden:
Edit: Which is actually true

Then call the code to show them when your document is ready:
Edit: Which s actually done by calling visibleHideMe();

Edit: However, there is a pre-loader rocking around and now I would say there's a timing problem. So remove the call to visibleHideMe(); from document.ready and rather add it to jPreLoader's callback:

//calling jPreLoader
$('body').jpreLoader({
    showSplash: false,
    showPercentage: true,
    loaderVPos: '10%',
    autoClose: true,        
}, function() { //callback function
    $('body').fadeIn(50, visibileHideMe); //callback after body finished fading
    $('#menu-bttn span').text('Show Menu');
});

回答2:

I am not an expert, so i am affraid to manipulate the jquery codes but somehow the answer is quiet logical...

Finally i must use the codes i gave lastly, they will give the "start" effect :

...}, function() {  //callback function
    $('body').fadeIn(50);
    $('#menu-bttn span').text('Show Menu');
    $('.avatar').animate({'opacity':1}, 600, 'easeInCirc');
    $('.avatar img').delay(500).animate({'width':'25vw','height':'25vw','margin-left':'0%','margin-top':'0%'}, 700, 'easeOutBounce');
    $('.intro').delay(500).animate({'opacity':1,'margin-top':'5%'}, 600, 'easeInCirc');
    $('.signature').delay(800).animate({'opacity':1,'top':'60%'}, 800, 'easeInCirc');
});

Then i just had to reorganize my visibleHideme and simplefy... i just deleted the visibleHideme(); from the end of the code and i put the rest in the scroll function :

$(window).scroll(function(){
    $('#home').each(function(){             
        //var top_of_object = $(this).offset().top;
        //var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var half_of_object = $(this).offset().top + ($(this).outerHeight()/4);
        var top_of_window = $(window).scrollTop();
        var bottom_of_window = $(window).scrollTop() + $(window).height();              
        if(half_of_object < top_of_window) {
            $('.avatar').delay(700).css({'opacity':'0'});
            $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'});
            $('.intro').css({'opacity':'0','margin-top':'20%'});
            $('.signature').delay(1000).css({'opacity':'0','top':'75%'});
        }
        if (half_of_object > bottom_of_window){
            $('.avatar').delay(700).css({'opacity':'0'});
            $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'});
            $('.intro').css({'opacity':'0','margin-top':'20%'});
            $('.signature').delay(1000).css({'opacity':'0','top':'75%'});
        }               
        else if(half_of_object > top_of_window && half_of_object < bottom_of_window){
            $('.avatar').delay(700).css({'opacity':'1'});
            $('.avatar img').delay(800).css({'margin-top':'0%','margin-left':'0%','width':'25vw','height':'25vw'});
            $('.intro').css({'opacity':'1','margin-top':'5%'});
            $('.signature').delay(1000).css({'opacity':'1','top':'60%'});
        }
    });
});

So now, i have the same effect at the opening of the website, just like at scrolling...

来源：https://stackoverflow.com/questions/24346609/elements-with-scroll-to-top-effect-on-home-page