码迷,mamicode.com
首页 > Web开发 > 详细

为网格布局图片打造的超炫 CSS 加载动画

时间:2014-09-10 10:49:00      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   使用   java   ar   strong   for   

  今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果。您可以把这些效果用在你的作品集,博客或任何你想要的网页中。设置很简单。我们使用了下面这些工具库来实现这个效果:

  现在,让我们来看看一些实际的代码,这应该是大家最想知道的!

 

bubuko.com,布布扣

 

效果演示      源码下载

 

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"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/02.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/03.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/04.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#/"><img src="images/05.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/06.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/07.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/08.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/09.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/10.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/11.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/12.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#/"><img src="images/13.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/14.jpg"  /></a></li>
            <li class="masonry-item"><a target="_blank" href="#"><img src="images/15.jpg"  /></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);
                    });
            });
    });

  

您可能感兴趣的相关文章

 

本文链接:为网格布局图片打造的超炫 CSS 加载动画效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文来自【梦想天空(http://www.cnblogs.com/lhb25/)】

为网格布局图片打造的超炫 CSS 加载动画

标签:style   blog   http   io   使用   java   ar   strong   for   

原文地址:http://www.cnblogs.com/lhb25/p/css-loading-effects-grid-layout-images.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!