jquery - 首页上 "scroll to top"效果的元素

Question

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

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

在上面的例子中，页面加载了一个普通的不透明动画，元素不会做它们在屏幕边缘滚动时所做的事情。

如果我添加回调函数动画(就在“主体”淡入之后)，元素首先出现正常的不透明动画，然后它们执行动画……我说的是以下附加代码:

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