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

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

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

 

 

效果演示      源码下载

 

HTML 代码

其实 HTML 代码都是很简单的,复杂和创意的部分在 CSS。代码如下:

CSS 代码

CSS 部分主要是动画效果,我们以 tada 效果为例:

jQuery

当图像被加载进来后,我们给图像添加上 CSS 效果,然后我们找到并显示该项目,最后会刷新 Masonry 布局。当用户滚动页面的时候,无限滚动插件将装载更多的图像并重复前面的步骤。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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 加载动画效果

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

posted @   梦想天空(山边小溪)  阅读(6742)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2013-09-10 字体大宝库:设计师必备的漂亮免费英文字体
2013-09-10 Parallax.js – 自适应智能设备方向的视差效果插件
2012-09-10 45个纯 CSS 实现的精美边框效果【附在线演示和源码】【下篇】
2012-09-10 2012年最新75款免费的专业英文字体下载【下篇】
点击右上角即可分享
微信分享提示