使<li>在到达视口时可见并淡化

Question

我有一个无序列表，我希望按以下方式工作：不在视口中的li将被隐藏（显示：无），当它们到达视口时，我希望它们变得可见并淡入。 我想我必须使用滚动偏移但我无法弄清楚如何为每个li设置它。

<div class="my_list">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</div>


.my_list ul li{
    height:550px; /*example height*/
}

Answer 1

http://xtianmiller.com/notes/animating-elements-when-they-appear-in-viewport/

这可以帮助您理解。