纽约时报悼念新冠去世患者页面是怎么做出来的？

起因是高中同学发微博感叹这个网站的交互做得很漂亮，本能地就去看了一下。这是纽约时报悼念因新冠去世的人的一个页面，确实很漂亮，大家可以先去看看（需要fq）Remembering the Nearly 100,000 Lives Lost to Coronavirus in America - The New York Times

下面我们来分析一下这些效果是怎么做出来的。

One hundred thousand统计

页面里每隔一段距离就会讲述一下关于十万的一些意义，这个其实比较简单，看html对应的代码。

<div id="g-total">
	<div class="g-slide g-header">
		<header id="g-interactive-header" style="transform: translate(-50%, -1728.13px);">
			<h1 id="g-interactive-heading" class="interactive-heading" itemprop="headline">An Incalculable Loss</h1>
			
			<p id="g-interactive-leadin" class="interactive-leadin">America is fast approaching a grim milestone in the coronavirus outbreak — each figure here represents one of the nearly 100,000 lives lost so far. But a count reveals only so much. Memories, gathered from obituaries across the country, help us to reckon with what was lost.</p>
			<div class="g-interactive-byline">
				<span class="g-byline" itemprop="name">By The New York Times</span>
				<time id="interactive-timestamp" class="interactive-timestamp" datetime="2020-05-24">May 24, 2020</time>
			</div>
		</header>
	</div>

	
		<div class="g-slide">
			<div class="g-slide-inner">
				
					<p>One hundred thousand.</p>
				
					<p>Toward the end of May in the year 2020, the number of people in the United States who have died from the coronavirus neared 100,000 — almost all of them within a three-month span. An average of more than 1,100 deaths a day.</p>
				
			</div>
		</div>

		<div class="g-slide g-spacer"></div>
	
		<div class="g-slide">
			<div class