Question

我有滚动（hideme）时在屏幕边缘出现/消失的元素。我可以为它们制作动画，但问题是在页面加载时的开始。我不能在页面加载时做同样的效果...如果有人可以帮助你怎么做。

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;
}

在上面的例子中，页面加载了普通的不透明度动画，这些元素不会像在屏幕边缘滚动时那样做。

如果我添加回调函数动画（在“body”淡入之后），元素首先显示正常的不透明度动画，然后他们执行动画...我正在谈论以下附加代码：

    $('.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');

现场直播：http://photography.igorlaszlo.com/test2.html 如果有人可以帮助我...

Answer 1

我检查了您提供的实时链接，并假设您希望在页面加载时不显示头像/文本/签名，但是它会淡入，类似于滚动到足够远的时候滚动到顶部的效果消失。

我开始编辑你的css文件，因此在隐藏元素时，首先设置样式以匹配最终的动画状态：
编辑：实际上是哪个

然后调用代码在文档准备就绪时显示它们：
编辑：通过调用visibleHideMe();

实际完成了哪些操作

编辑：然而，有一个预装载器摇摆不定，现在我会说有一个计时问题。因此，从document.ready中删除对visibleHideMe();的调用，而不是将其添加到jPreLoader的回调中：

//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');
});

Answer 2

我不是专家，所以我很害怕操纵jquery代码但不知何故答案是安静的逻辑......

最后我必须使用我最后给出的代码，它们将给出“开始”效果：

...}, 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');
});

然后我只需重新组织我的visibleHideme和simplefy ...我刚刚删除了visibleHideme（）;从代码的末尾开始，我将其余部分放在滚动函数中：

$(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%'});
        }
    });
});

所以现在，我在网站开放时也有同样的效果，就像在滚动时一样......

用＆＃34;元素滚动到顶部＆＃34;对主页的影响

2 个答案: