Question

当我向下滚动此网站时，网站的不同元素会出现并移动。这个设计叫做什么，我在哪里可以了解更多？

Answer 1

编写类似的HTML代码。

<div class='wordcomatAnimation'>
      <div> content </div>
      <div> content </div>
</div>
<div class='wordcomatAnimation'>
       <img src=''/>
</div>

这是我的css代码。

.wordcomatAnimation{
    position:relative;
    left:-200px;
    opacity:0;
 }

写这样的js代码。

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.wordcomatAnimation').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_objectHeight =  $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        var st = $(this).scrollTop();

        /* If the object is completely visible in the window, fade it in */

        if( (+bottom_of_window + bottom_of_objectHeight > +bottom_of_object) && (+bottom_of_window < +bottom_of_object + bottom_of_objectHeight ) ){

            $(this).animate({'opacity':'1','left': '0px'},1500);

        }

    }); 

});

这对我有用。我希望这对你有充分的帮助。

谢谢。

Answer 2

嗨这是使用https://github.com/morr/jquery.appear库。

OR

像这样，计算滚动位置，窗口高度和其他参数。

这只是示例代码。

var bottomScrollPosition, windowHeight, windowScrollPosition,
    _this = this;
  windowHeight = $(window).height();
  windowScrollPosition = $(window).scrollTop();
  bottomScrollPosition = windowHeight + windowScrollPosition;
  return $(".animate-in").not(".hidden").each(function(i, element) {
    if ($(element).offset().top + _this.animateInOffset < bottomScrollPosition) {
      return $(element).removeClass(_this.animateInClass);
    }

当我向下滚动网站时，这个效果叫做元素出现的地方是什么？

2 个答案: