jQuery和css3文章头部简介全屏图片滚动特效

当前位置:主页 > jQuery库 > 布局和界面 > jQuery和css3文章头部简介全屏图片滚动特效
jQuery和css3文章头部简介全屏图片滚动特效
分享:

    插件介绍

    这是一款使用jQuery和css3制作的文章头部简介全屏图片滚动特效。该特效的每篇文章以一副全屏图片作为文章的简介,当鼠标向下滚动时,图片会有8种效果的动画特效,放大缩小或淡入淡出,然后显示文章内容。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-21
    阅读:

简要教程

这款插件向你展示了8种效果非常炫酷的jQuery和css3文章头部简介全屏图片滚动特效。这些效果主要是通过全屏图片的各种动画来产生不同的背景图片滚动特效。

第一种效果将图片推到顶部,同时,一个新的标题会在原地出现:

文章头部简介全屏图片滚动特效-1

第二种是将图片淡入淡出显示,我们使用伪元素的线性渐变来制作这种特效:

文章头部简介全屏图片滚动特效-2

第三种特效将图片分成两半,一半向上移动,一半向下移动:

文章头部简介全屏图片滚动特效-3

第四种特效将图片裁掉一半,在裁掉的地方显示文章的标题:

文章头部简介全屏图片滚动特效-4

第五种特效和上面的相似,但是他的图片是位置固定的:

文章头部简介全屏图片滚动特效-5

下一种特效是将图片移动到一个网格图片组中,好像是图片从网格中分离出来的一样:

文章头部简介全屏图片滚动特效-6

最后一种效果是全屏图片向上滚动变为一个banner:

文章头部简介全屏图片滚动特效-7