7个创意惊人的文本展示特效页面

  效果1:PUSH

  PUSH的效果是当用户向下滚动页面时,图片会向上渐隐,而文章内容会跟着从下至上的渐显出来。


  查看DEMO

  效果2:FADE OUT

  FADE OUT背景图像也是向上渐移,不同的是,图像不会消失,但注意的是,图像下方有个渐变的过渡,让用户看起来很舒适。


  查看DEMO

  效果3:SLICED

  SLICED独特之处就是图像像被切割一样从图像的中心开始切开动画。


  查看DEMO

  效果4:SIDE

  Side就是向下滚动页面时,图像会以侧边形式展示。


  查看DEMO

  效果5:FIXED SIDE

  有点类似Side,但图像是布满上下屏幕,效果很不错。


  查看DEMO

  效果6:GRID

  Grid效果如下图,当用户向下滑动页面时,图像变回Grid列表形式,这可以让用户看到自己在读那篇文章。


  查看DEMO

  效果7:Jam3

  最后一个效果是作者模仿 Jam3 网站制作出来的,用户向下滑动网页,图像会自动切成一个小banner。


  总结

  这些文章效果看起来确实很赞,但因为带有动画效果,这样却给用户延迟了一阅读时间,对一些用户来说可能是不好的体验,所以大家还是考虑清楚再使用,选择最适合的方式。

时间: 2024-07-28 21:25:48

7个创意惊人的文本展示特效页面的相关文章

凡客诚品带滚动条图片展示特效

  如果现在比较专业的商城,估计凡客算是其中之一了,像当当及京东都变得啥都有了.看到凡客那么多照片,我就在想一件事,究竟得请多少人去拍照片,整理照片,还要有多少模特,不愧是大公司.今天我们进入凡客的丝袜频道(http://stockings.vancl.com/),相信许多男生喜欢这里.在这里,我们可以看到许多长腿美女.当我们把页面拉到最下面时(这个过程浏览器有点卡,估计是加载的东西太多了..),我们可以看到凡客一个很有特色的图片展示特效: 细心的朋友估计会注意到下面的滚动条,以前我们做过许多带

图图桌面关闭分组展示特效的方法

关闭分组展示特效方法如下: 右击分组文件夹,选择[组展开特效],再点击[关闭特效](如图)         注:更多精彩教程请关注三联电脑教程栏目

JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】_javascript技巧

本文实例讲述了JS实现显示带倒影的图片横排居中放大展示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery实现的产品自动360度旋转展示特效源码分享_jquery

这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的

jQuery+PHP实现动态数字展示特效_jquery

HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 复制代码 代码如下: <div class="count">当前在线:<span id="number"></span></div> jQuery 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magi

使用JQuery FancyBox插件实现图片展示特效_jquery

FancyBox是一个用于显示图像,HTML内容和多媒体的lightbox工具. jquery插件之fancybox弹出框特效,与广为人之的lightbox插件比较类拟,可以展示单张图片,也可展示一组图片,它还可以展示自定义的内容与ajax载入外部文件的内容等,功能也是很方便与实用的. Demo effect(image gallery): Sample code: <link href="~/Content/jquery.fancybox.css" rel="styl

Beyond Compare文本怎么进行页面布局设置?

  说到Beyond Compare,这是一款很专业好用的文件夹以及文件比较工具.当我们用Beyond Compare软件进行文本比较时,为了方便用户快速查看文本差异部分,符合用户个人查看习惯,接下来就和大家讲解一下,Beyond Compare文本怎么进行页面布局设置. 边并排布局 步骤一:打开Beyond Compare软件,选择文本比较会话,打开会话操作界面,单击"浏览文件"按钮,选择需要比较的文本文件. 步骤二:其中默认的会话操作界面视图的布局方式为"边并排布局&qu

初学javaweb-怎样将选中的check文本信息显示在页面上并将其保存到数据库

问题描述 怎样将选中的check文本信息显示在页面上并将其保存到数据库 怎样将选中的check文本信息显示在页面上并将其保存到数据库中,不用Javascript写是在页面上处理 解决方案 发一个请求到后台,插入到数据库就行了 解决方案二: 可以讲的具体点吗?谢谢!

asp.net分页,用一个文本框输入页面,按钮跳转到指定的分页的页面

问题描述 datalist已经查询出结果,asp.net分页已写好,用一个文本框输入页面,按钮跳转到指定的分页的页面,分页已经写好,就是不知道怎么在文文本框输入页面后跳转到指定的分页的页面,请各位给个思路 解决方案 解决方案二:傳入參數pageIndex重新執行sql語句綁定到datalist解决方案三:传入参数是指,页面跳转的时候把参数带上吗?我要跳转到本页面的,参数怎么弄呢?解决方案四:文文本框输入页面后跳转到指定的分页的页面?在跳转按钮或者链接里面想跳转到:<inputid=p><