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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

You may have encountered the problem of green lines appearing on the screen of your smartphone. Even if you have never seen it, you must have seen related pictures on the Internet. So, have you ever encountered a situation where the smart watch screen turns white? On April 2, CNMO learned from foreign media that a Reddit user shared a picture on the social platform, showing the screen of the Samsung Watch series smart watches turning white. The user wrote: "I was charging when I left, and when I came back, it was like this. I tried to restart, but the screen was still like this during the restart process." Samsung Watch smart watch screen turned white. The Reddit user did not specify the smart watch. Specific model. However, judging from the picture, it should be Samsung Watch5. Previously, another Reddit user also reported

On the Douyin platform, many users are eager to obtain level certification, and the level 10 light sign shows the user's influence and recognition on Douyin. This article will delve into the price of Douyin’s level 10 light boards and the time it takes to reach this level to help users better understand the process. 1. How much does a level 10 Douyin light sign cost? The price of Douyin's 10-level light signs will vary depending on market fluctuations and supply and demand. The general price ranges from a few thousand yuan to ten thousand yuan. This price mainly includes the cost of the light sign itself and possible service fees. Users can purchase level 10 light signs through Douyin’s official channels or third-party service agencies, but they should pay attention to legal channels when purchasing to avoid false or fraudulent transactions. 2. How many days does it take to create a level 10 fan sign? Reach level 10 light sign

Speaking of ASSASSIN, I believe players will definitely think of the master assassins in "Assassin's Creed". They are not only skilled, but also have the creed of "devoting themselves to the darkness and serving the light". The ASSASSIN series of flagship air-cooled radiators from the appliance brand DeepCool coincide with each other. Recently, the latest product of this series, ASSASSIN4S, has been launched. "Assassin in Suit, Advanced" brings a new air-cooling experience to advanced players. The appearance is full of details. The Assassin 4S radiator adopts a double tower structure + a single fan built-in design. The outside is covered with a cube-shaped fairing, which has a strong overall sense. It is available in white and black colors to meet different colors. Tie

Players can experience the main plot of the game and collect game achievements when playing in Elden's Circle. Many players don't know how long it takes to clear Elden's Circle. The player's clearance process is 30 hours. How long does it take to clear the Elden Ring? Answer: 30 hours. 1. Although this 30-hour clearance time does not refer to a master-like speed pass, it also omits a lot of processes. 2. If you want to get a better game experience or experience the complete plot, then you will definitely need to spend more time on the duration. 3. If players collect them all, it will take about 100-120 hours. 4. If you only take the main line to brush BOSS, it will take about 50-60 hours. 5. If you want to experience it all: 150 hours of base time.

With the arrival of spring, everything revives and everything is full of vitality and vitality. In this beautiful season, how to add a touch of color to your home life? Haqu H2 projector, with its exquisite design and super cost-effectiveness, has become an indispensable beauty in this spring. This H2 projector is compact yet stylish. Whether placed on the TV cabinet in the living room or next to the bedside table in the bedroom, it can become a beautiful landscape. Its body is made of milky white matte texture. This design not only makes the projector look more advanced, but also increases the comfort of the touch. The beige leather-like material adds a touch of warmth and elegance to the overall appearance. This combination of colors and materials not only conforms to the aesthetic trend of modern homes, but also can be integrated into

With its compact size, the ITX platform has attracted many players who pursue the ultimate and unique beauty. With the improvement of manufacturing processes and technological advancements, both Intel's 14th generation Core and RTX40 series graphics cards can exert their strength on the ITX platform, and gamers also There are higher requirements for SFX power supply. Game enthusiast Huntkey has launched a new MX series power supply. In the ITX platform that meets high-performance requirements, the MX750P full-module power supply has a rated power of up to 750W and has passed 80PLUS platinum level certification. Below we bring the evaluation of this power supply. Huntkey MX750P full-module power supply adopts a simple and fashionable design concept. There are two black and white models for players to choose from. Both use matte surface treatment and have a good texture with silver gray and red fonts.

A large model that can automatically analyze the content of PDFs, web pages, posters, and Excel charts is not too convenient for workers. The InternLM-XComposer2-4KHD (abbreviated as IXC2-4KHD) model proposed by Shanghai AILab, the Chinese University of Hong Kong and other research institutions makes this a reality. Compared with other multi-modal large models that have a resolution limit of no more than 1500x1500, this work increases the maximum input image of multi-modal large models to more than 4K (3840x1600) resolution, and supports any aspect ratio and 336 pixels to 4K Dynamic resolution changes. Three days after its release, the model topped the HuggingFace visual question answering model popularity list. Easy to handle

Xiaohongshu, a platform full of life and knowledge sharing, allows more and more creators to express their opinions freely. In order to get more attention and likes on Xiaohongshu, in addition to the quality of content, the time of publishing works is also crucial. So, how to set the time for Xiaohongshu to publish works? 1. How to set the time for publishing works on Xiaohongshu? 1. Understand the active time of users. First, it is necessary to clarify the active time of Xiaohongshu users. Generally speaking, 8 pm to 10 pm and weekend afternoons are the times when user activity is high. However, this time period will also vary depending on factors such as audience group and geography. Therefore, in order to better grasp the active period of users, it is recommended to conduct a more detailed analysis of the behavioral habits of different groups. By understanding users’ lives
