This idea is the most recent time to write the Xscroll.js class to understand. Usually we say the fade effect, generally divided into two parts, half is fade in, the other half is fade out. But after analyzing it, I think it's just half the line. title, only train of thought, no code.
This idea is the most recent time to write the Xscroll.js class to understand. Usually we say the fade effect, generally divided into two parts, half is fade in, the other half is fade out. But after analysis, I think it's just half the line.
For example, write a picture switch class, the transition effect is fade in, usually we will write: When the switch occurs, the current display of the picture fade (gradually hidden), the image will be displayed fade (gradually appear), usually two pictures of the animation speed is consistent, So that when the current picture is completely hidden, it is the day the next picture is fully displayed.
Let's list A simple step:
The current picture fades, the transparency is changed from 100% to 90%, and the next picture fade, the transparency is changed from 0 to ten.
Current figure transparency 80%, next image transparency 20%
current Figure 70%, figure 30% below.
....
Current Figure 10%, the next picture 90%
Complete the switchover
In fact, this is a waste of a whole!
Let's think about it, if the next picture ZIndex is on the current graph, and when it fade, because it's getting more opaque, visually, his lower-level current picture looks more and more transparent!
For example, when the next image is 20% transparent, because he is overlaid on the current graph, the current picture looks like transparency is 100%-20%=80%!
therefore, in the production of fade transition effect, in fact, only need to fade the effect can fade in the same time, fade out occurs; At the end of the fade, fade out the end. This way, you never have to worry about the fade-in and fade-out issues.
The key is that it only uses the same loop to set the transparency of a picture (i.e. the next picture), saving half of the operation without the tube being blocked (that is, the current picture). Does this optimize the execution efficiency of JavaScript?
So, my idea for fading transitions is:
set the zindex of the next picture above the current picture
the next picture fades in (fade), and the current picture doesn't work.
Fade- out synchronization occurs when fading in, fade-in, fade-out, and finish.
Note: This idea only fits in the case where the current diagram overlaps with the next one (most of the time). Note: Reproduced from the script house author unknown
Javascrip Fading Ideas
