1

I have a unordered list which i want to make to work in the following sense: li's that are not in viewport will be hidden (display:none), and when they reach the viewport i want them to become visible and fade in. I figured i have to work with the scroll offsets but i cant figure it out how to make it for for each 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*/
}
mheonyae
  • 581
  • 2
  • 8
  • 24

1 Answers1

0

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

This should help you understand.

maximast
  • 118
  • 8
  • or follow this question: http://stackoverflow.com/questions/27462306/css3-animate-elements-if-visible-in-viewport-page-scroll – maximast Mar 23 '17 at 13:54
  • 1
    **Links to external resources are encouraged, but please add context around the link** so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. [Please don't just post links to external sites as answers](http://stackoverflow.com/help/how-to-answer) – George Mar 23 '17 at 13:54
  • i get it how it works, but i dont know how to go about doing it for each li since there is no id or anything to sepparate between them... – mheonyae Mar 23 '17 at 14:13