全新的阅读体验！7个创意惊人的文本展示特效页面

之前看到国外的一些网站的文章内容页，有些喜欢使用一张大图来作为标题背景，当用户向下滚动页面时背景图标固定或以渐隐的形式消失，并带有些视差效果，真的很有趣。
这可以算是一个微创新，大家可以尝试这种交互增加你的文章展示效果，但怎么实现呢？刚好最近codrops国外博客发布了一个相关的效果源码，里面效果更棒！

查看在线演示：DEMO
源码下载：微盘

PS: 制作这类文章介绍当然不能少漂亮的图片啦，想要高清大图，一个导航满足你！戳：设计师网址导航

作者制作了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。

总结

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

原文地址：shejidaren

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量69万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：