主页上具有“滚动到顶部”效果的元素答案

【问题标题】：Elements with "scroll to top" effect on home page主页上具有“滚动到顶部”效果的元素
【发布时间】：2014-08-12 08:28:34
【问题描述】：

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

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

});

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

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

在上述情况下，页面以正常的不透明动画加载，元素不会像在屏幕边缘滚动时那样做。

如果我添加回调函数动画（就在“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 如果有人可以帮助我...

【问题讨论】：

试图了解你的程序流程......你的 dom 被加载......调用 visibleHideMe - 它处理你想要做的所有 css 东西......在你的问题中你说你想要在页面加载时做这些事情......并且您正在调用 $(document).ready 函数中的函数......我有点困惑
你到底想用$('.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');做什么？它在哪里？
@ewizard 感谢您的回复！当我滚动头像、文本和签名 img 时，它们会出现效果。头像随着easeOutBounce效果变大，文字从下方出现，签名与文字相同，但稍后。我可以分别做同样的效果。我可以在页面加载时执行此操作，并且我可以在滚动时执行此操作，但不能同时执行。 我希望它们在页面加载时产生这些效果，当我滚动时，它们会以相同的方式消失，而当我再次滚动主页时，它们会以相同的方式出现......
好的 - 那么现在会发生什么？您在页面加载时调用 visibleHideMe 函数（加载 dom 时） - 会发生什么？这样做有什么不妥？
所以 - 当你说“再次滚动主页”时 - 你的意思是你已经离开页面 - 只是返回到它？

标签： jquery css scroll opacity

【解决方案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');
});

【讨论】：

谢谢 Yoshi... 不知何故，问题和混乱来自我的代码末尾 visibleHideme(); $(window).scroll(function(){visibleHideme();});... 我从最后删除了它，我把所有 hideme 代码放在滚动功能中...另外，我添加了开头的回调代码，以便在body淡入后生效。再次感谢您的关注！
很高兴你能成功！ \^^/不要忘记接受一个你喜欢的答案，这样这个问题就不会被标记为未回答:)

【解决方案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 并简化...我刚刚删除了 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%'});
        }
    });
});

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

【讨论】：