Lazy 懒加载
使用说明 JS
给需要懒加载的元素添加ax-lazy类即可。元素超出屏幕会自动隐藏（opacity=0），当元素进入屏幕会渐显（opacity=1）。如果需要更炫酷的进入效果请自行修改代码。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<ul>
<li class="ax-lazy demo-section-border" style="background-color: #cae2b3">1</li>
<li class="ax-lazy demo-section-border" style="background-color: #ffc600">2</li>
<li class="ax-lazy demo-section-border" style="background-color: #ff9c00">3</li>
<li class="ax-lazy demo-section-border" style="background-color: #7df7ca">4</li>
<li class="ax-lazy demo-section-border" style="background-color: #bcf77d">5</li>
<li class="ax-lazy demo-section-border" style="background-color: #7dd6f7">6</li>
<li class="ax-lazy demo-section-border" style="background-color: #ea7df7">7</li>
<li class="ax-lazy demo-section-border" style="background-color: #f77db4">8</li>
<li class="ax-lazy demo-section-border" style="background-color: #f7b97d">9</li>
<li class="ax-lazy demo-section-border" style="background-color: #f7887d">10</li>
<li class="ax-lazy demo-section-border" style="background-color: #7d8ef7">11</li>
<li class="ax-lazy demo-section-border" style="background-color: #b47df7">12</li>
<li class="ax-lazy demo-section-border" style="background-color: #f7ed7d">13</li>
<li class="ax-lazy demo-section-border" style="background-color: #7df7b9">14</li>
<li class="ax-lazy demo-section-border" style="background-color: #f77db1">15</li>
</ul>
放大进入 JS
给需要放大进入的元素添加ax-scale类即可。当元素进入屏幕会从0放大正常大小。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<ul>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #cae2b3">1</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #ffc600">2</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #ff9c00">3</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #7df7ca">4</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #bcf77d">5</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #7dd6f7">6</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #ea7df7">7</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #f77db4">8</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #f7b97d">9</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #f7887d">10</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #7d8ef7">11</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #b47df7">12</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #f7ed7d">13</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #7df7b9">14</li>
<li class="ax-lazy ax-scale demo-section-border" style="background-color: #f77db1">15</li>
</ul>
飞入 JS
给需要飞入的元素添加ax-fly类即可。当元素进入屏幕会从底往上飘入。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<ul>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #cae2b3">1</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #ffc600">2</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #ff9c00">3</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #7df7ca">4</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #bcf77d">5</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #7dd6f7">6</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #ea7df7">7</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #f77db4">8</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #f7b97d">9</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #f7887d">10</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #7d8ef7">11</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #b47df7">12</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #f7ed7d">13</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #7df7b9">14</li>
<li class="ax-lazy ax-fly demo-section-border" style="background-color: #f77db1">15</li>
</ul>