Analysis of the effects of the timeline

Although the timeline is not a new thing, I was just interested in it, so I studied it. I recently searched for a timeline demo that I felt was better on the Internet, downloaded it, studied it, and made some modifications. Specifically The effect is as shown below: (This demo implements scrolling loading of images)

Code address: Responsive timeline.zip

How to implement scrolling loading of images ?The most important part is the following code part:

(function() {
  $(document).ready(function() {var timelineAnimate;
    timelineAnimate = function(elem) {      return $(".timeline.animated .timeline-row").each(function(i) {var bottom_of_object, bottom_of_window;
        bottom_of_object = $(this).position().top + $(this).outerHeight();
        bottom_of_window = $(window).scrollTop() + $(window).height();if (bottom_of_window > bottom_of_object) {          return $(this).addClass("active");}
      });
    };
    timelineAnimate();return $(window).scroll(function() {      return timelineAnimate();
    });
  });

}).call(this);

Because our example is not actually purely dynamically loading images (that is, dynamically generating html tags and dom elements, which can be done later) To implement), just hide the original page or change the opacity attribute value from 0 to 1. By looking at the above code, this place actually has a small algorithm.

if (bottom_of_window > bottom_of_object) 才会去给当前对象（即类控制器为.timeline.animated .timeline-row的对象)添加类选择器active(暂且先不具体该类选择器实现什么效果)
我们先讨论下这两个值bottom_of_window和bottom_of_object

bottom_of_window = $(window).scrollTop() + $(window).height();

$(window).scrollTop()表示当前滚动条的位置距离页面顶端的距离，其实可以理解为页面滚动条拉到某个位置，顶部隐藏的页面内容的高度;

$(window).height()表示当前可视页面区域的高度;

bottom_of_object = $(this).position().top + $(this).outerHeight();

$(this).position().top表示当前元素距离父元素的距离，个人理解为应该就是margintop的值吧，

$(this).outerHeight()表示当前元素的高度还有padding+border，但不包括margin
如下盒子模型：

当if (bottom_of_window > bottom_of_object)为真的情况下，我们看到执行了return $(this).addClass("active"),这段代码起什么作用呢，其实作用就是
用户在拖动滚动条时时间轴内容的过渡效果，我们可以看到添加效果是向.timeline.animated .timeline-row添加的，我们查看样式文件关于这个类选择器的所在对象都有什么
样式效果：

.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }
  .timeline.animated .timeline-row:nth-child(odd) .timeline-content {left: -20px; }
  .timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }
  .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {left: 0; }

Obviously after executing $(this).addClass("active"), the following style works.

.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }

Why is there a transitional floating effect? ​​In fact, it defines

.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }

transition (css3 tag) and defines the class selector .timeline.animated .timeline-row .timeline-content Any style change of the included object will have a transition effect of 0.8.s. Of course, we can modify this time

again.

Because before we execute $(this).addClass("active"), the style of the object on the left side of our timeline is as follows (let’s talk about the left side of the timeline first)

.timeline.animated .timeline-row:nth-child(odd) .timeline-content {

opacity: 0;

:; }

The style after execution is as follows:

.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }

So there will be an implementation effect from left to right, because the transparency and left margin have changed.

Why is the object on the right side of the timeline a cut-in effect from right to left? Before executing $(this).addClass("active") first, the style of the object on the right side of the timeline is

.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }

We see that left is 20px, opacity (transparency is 0), after executing $(this).addClass("active")

 .timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }

left is 0, opacity (transparency is 1), and transition is 0.8s, so there is a transition effect from right to left.

There is a delicate point in the above code

.timeline-row:nth-child(odd)中的nth-child(odd)选择器，因为css的解析顺序是从右到左，所以这个地方的意思表示.timeline-row为奇数的对象（属于其父元素的第奇数个timeline-row)

假如有以下代码，

<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>

where p:nth-child(2) represents the second child element in the parent element of p, and this child element is p. At this time, the second child element happens to be P, so the display effect is as follows

If changed to the following

<h1>这是标题</h1><h2>第一个段落。</h2><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p>

The effect will be as follows

Because the second child element of p:nth-child(2) is h2, not p, no matching element is found, so the background color does not take effect.

Let’s study this first, and we will have time to prepare the page later. Elements are dynamically loaded, instead of being displayed early on the page, they are only shown or hidden by controlling the transparency.

 <br>

<br><br>

The above is the detailed content of Analysis of the effects of the timeline. For more information, please follow other related articles on the PHP Chinese website!