Timeline effect parsing and axis effect Parsing

Timeline effect parsing and axis effect Parsing

Although the timeline is no longer a new thing, I am only interested in it, so I will study it. Recently I searched the online for a timeline demo, download and study and make the following changes. the specific effect is as follows: (this demo implements rolling image loading)

Code address: http://files.cnblogs.com/files/cby-love/html5 response time axis. Zip

How does one implement Scrolling Image loading? The most important part is the following code:

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

In our example, images are not loaded dynamically (that is, html tags and dom elements are generated dynamically, which can be implemented later ), it only hides the original page or changes the opacity attribute value from 0 to 1. by looking at the above Code, there is actually a small algorithm.

If (bottom_of_window> bottom_of_object) will be sent to the current object (that is, the class controller is. timeline. animated. timeline-row object) Add the class selector active (this class selector is not specific for the time being)
Let's first discuss the two values bottom_of_window and bottom_of_object.

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

$ (Window). scrollTop () indicates the distance from the position of the current scroll bar to the top of the page. In fact, it can be understood that the page scroll bar is pulled to a certain position and the height of the hidden page content on the top;

$ (Window). height () indicates the height of the current visible page area;

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

$ (This). position (). top indicates the distance between the current element and the parent element. In my opinion, it should be the value of margintop,

$ (This). outerHeight () indicates that the height of the current element is padding + border, but not margin.
The following box model:

If (bottom_of_window> bottom_of_object) is true, we can see that return $ (this). addClass ("active") is executed. What is the role of this code?
The transition effect of the timeline content when you drag the scroll bar. We can see that the effect is. timeline. animated. added by timeline-row. Let's see what the style file has about the object where the class selector is located.
Style effect:

.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 $ (this). addClass ("active") is executed, the following style takes effect.

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

Why is there a transitional effect?

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

The transition (css3 tag) defines the class selector. timeline. animated. timeline-row. the contained object of timeline-content only has a transitional Effect of 0.8.s for any style changes. Of course, this time

We can modify it again.

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

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

opacity: 0;

left: -20px; }

The style after execution is as follows:

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

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

 

Why is an object on the right of the timeline a cut-in effect from right to left? Before executing $ (this). addClass ("active"), the object style on the right 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 can 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.8 s, so there is a transition effect from right to left.

The above code has a well-developed place

. Timeline-row: nth-child (odd) in nth-child (odd) selector, because the css parsing sequence is from right to left, it indicates this place. objects whose timeline-row is an odd number (the odd timeline-row of its parent element)

If you have the following code,

<! DOCTYPE html> 
P: nth-child (2) indicates the second child element in the parent element of p, and the child element is p. At this time, the second child element is P, so the result is as follows:

If you change to the following
<H1> This is the first paragraph of the title 
The effect is as follows:

Because p: nth-child (2) the second child element is h2, rather than p, the matching element is not found, so the background color does not take effect.
First, we will study it here. Later we will have time to make the page elements Dynamically Loaded, instead of displaying them on the page early, just by controlling the transparency to display or hide them.