具有“向上滚动”效果在主页上 [英] Elements with "scroll to top" effect on home page

问题描述

我有滚动（hideme）时出现/消失在屏幕边缘的元素。我可以动画他们，但问题是开始，在页面加载。我不能在网页加载时效果相同...如果有人可以帮助您做到这一点。

HTML

 < div class =sectionid =home> 
< div class =avatar>< img src =uploads / avatar2.jpgalt =IL Avatar/>< / div& 
< img class =signaturesrc =uploads / signature.pngalt =Sign/> 
< div class =intro>这是一个文本...< / div> 
< / div> 
  

JQUERY

 < script type =text / javascript> 
 $（document）.ready（function（）{
 
 $（'body'）。hide（）; 
 $（'。avatar'）。css '，0）; 
 $（'。avatar img'）css（'width'，'0vw'，'height'，'0vw'，'margin-left'，'50％'， top'，'50％'）; 
 $（'。intro'）。css（'opacity'，0，'margin-top'，'20％'）; 
 $ '）.css（'opacity'，0，'top'，'75％'）; 
 
 //调用jPreLoader 
 $（'body'）jpreLoader b showSplash：false，
 showPercentage：true，
 loaderVPos：'10％'，
 autoClose：true，
}，function（）{// callback function 
 $（'body'）。fadeIn（50）; 
}）; 
 
 //滚动效果
 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&&&&&&&&& '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淡入后），元素首先出现正常不透明动画，然后他们做动画... i我正在谈论以下附加代码：

  $（'。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
如果有人可以帮助我...

p>最后，我必须使用我最后给的代码，他们会给出开始效果：

  ...} 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 = $这个）.offset（）。top + $（this）.outerHeight（）; 
 var half_of_object = $（this）.offset b $ b 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'）。 css（{'margin-top'：'50％'，'margin-left'：'50％'，'width'：'0vw'，'height'：'0vw'}）; 
 $ .int（''）。css（{'opacity'：'0'，'margin-top'：'20％'}）; 
 $（'。signature'）。delay（1000）.css opity'：'0'，'top'：'75％'};; 
} 
 if（half_of_object> bottom_of_window）{
 $（'。avatar'）。delay ）.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&&&&&&&&& '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％'}）; 
} 
}）; 
}）; 
  

现在，我在网站开头有同样的效果，就像在滚动。 。

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...

解决方案

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...

这篇关于具有“向上滚动”效果在主页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！