Image Loading Display Effects (8 Effects)

Add-ons

2026-07-25 23:31 4 次浏览 • 0 次下载 425.1KB

Image Loading Display Effects (8 Effects)

Plugin description: Many websites now use a fade-out effect when images are loading. How is it implemented? Below, we'll use Loading Effects for Grid Items to achieve this effect.

Many websites now use a fade-out effect when images are loading. How is it implemented? Below, we'll use Loading Effects for Grid Items to achieve this effect.

Usage Instructions

Reference

 <script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>

html

 <ul class="grid effect-4" id="grid">
    <li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
    <li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
    <li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li>
    <li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li>
    <!-- ... -->
</ul>

css

 /* Effect 4: fall perspective */
.grid.effect-4 {
    perspective: 1300px;
}
  
.grid.effect-4 li {
    transform-style: preserve-3d;
}
  
.grid.effect-4 li.animate {
    transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    animation: fallPerspective .8s ease-in-out forwards;
}
  
@keyframes fallPerspective {
    100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}