今天，我想與大家分享一些專門為網格布局的圖像制作的很酷的 CSS 加載動畫效果。您可以把這些效果用在你的作品集，博客或任何你想要的網頁中。設置很簡單。我們使用了下面這些工具庫來實現這個效果：
- Normalize.css 來替代傳統的 CSS 復位；
- ZURB Foundation 創建具有響應式的網格；
- Masonry 創建一個動態的網格布局；
- imagesLoaded 檢查是否已加載圖像；
- Infinite Scroll 加載更多圖片並追加到畫廊。
現在，讓我們來看看一些實際的代碼，這應該是大家最想知道的！
HTML 代碼
其實 HTML 代碼都是很簡單的，復雜和創意的部分在 CSS。代碼如下：
<div class="row">
<div class="large-12 columns main">
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3 masonry">
<li class="masonry-item"><a target="_blank" href="#"><img src="images/01.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/02.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/03.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/04.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#/"><img src="images/05.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/06.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/07.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/08.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/09.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/10.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/11.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/12.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#/"><img src="images/13.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/14.jpg" alt="" /></a></li>
<li class="masonry-item"><a target="_blank" href="#"><img src="images/15.jpg" alt="" /></a></li>
</ul>
<ul class="pagination">
<li><a class="next" href="index-02.php">Next Page</a></li>
</ul>
<div class="loading"></div>
</div><!-- End .main -->
</div><!-- End .row -->
CSS 代碼
CSS 部分主要是動畫效果，我們以 tada 效果為例：
@keyframes tada
{
0%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10%,
20%
{
-webkit-transform: scale(.8) rotate(-2deg);
-moz-transform: scale(.8) rotate(-2deg);
-ms-transform: scale(.8) rotate(-2deg);
-o-transform: scale(.8) rotate(-2deg);
transform: scale(.8) rotate(-2deg);
}
30%,
50%,
70%,
90%
{
-webkit-transform: scale(1.04) rotate(2deg);
-moz-transform: scale(1.04) rotate(2deg);
-ms-transform: scale(1.04) rotate(2deg);
-o-transform: scale(1.04) rotate(2deg);
transform: scale(1.04) rotate(2deg);
}
40%,
60%,
80%
{
-webkit-transform: scale(1.04) rotate(-2deg);
-moz-transform: scale(1.04) rotate(-2deg);
-ms-transform: scale(1.04) rotate(-2deg);
-o-transform: scale(1.04) rotate(-2deg);
transform: scale(1.04) rotate(-2deg);
}
100%
{
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.tada
{
-webkit-animation-name: tada;
-moz-animation-name: tada;
animation-name: tada;
}
jQuery
當圖像被加載進來后，我們給圖像添加上 CSS 效果，然后我們找到並顯示該項目，最后會刷新 Masonry 布局。當用戶滾動頁面的時候，無限滾動插件將裝載更多的圖像並重復前面的步驟。代碼如下：
jQuery(document)
.ready(function($) {
// Replace "tada" with an effect from the "effects.css" file.
var effect = 'animate tada';
var masonry_selector = '.masonry';
var masonry_item_selector = '.masonry-item';
// Initialize Masonry.
var $masonry = $(masonry_selector)
.masonry({
itemSelector: masonry_item_selector
});
// Find and hide the items.
var $masonry_items = $masonry
.find(masonry_item_selector)
.hide();
// Wait for the images to load.
$masonry
.imagesLoaded()
// An image has been loaded.
.progress(function(instance, image) {
// Add the effect.
var $image = $(image.img)
.addClass(effect);
// Find and show the item.
var $item = $image
.parents(masonry_item_selector)
.show();
// Lay out Masonry.
$masonry
.masonry();
});
// Load more items.
$masonry
.infinitescroll({
navSelector: '.pagination',
nextSelector: '.pagination .next',
itemSelector: masonry_item_selector,
loading: {
finishedMsg: 'No more pages to load.',
img: 'images/loader.gif',
msgText: 'Loading the next page.',
selector: '.loading'
}
}, function(items, data, url) {
var $items = $(items)
.hide()
.imagesLoaded()
.progress(function(instance, image) {
var $image = $(image.img)
.addClass(effect);
var $item = $image
.parents(masonry_item_selector)
.addClass('infinite-scroll-item')
.show();
$masonry
.masonry('appended', $item);
});
});
});
您可能感興趣的相關文章