你是否关注过浏览、点击图片这个微妙的过程,不同的图片展现、交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提升体验。

先看下Pinterest、Flickr等时下热门图片分享类网站。

Pinterest

1

采用瀑布流式,设计者本意大概是用户对于图片这类非文本信息本身就是非线性浏览的,交错排列的图片集合使焦点最大化分散在页面各个部分。

用户实施了pin这一动作后,图片信息以board形式集合,每个board里的图片呈现规矩的网格布局,这种布局适合于有限集合的排列。

让我们停下想想,为了“分散”的注意力而采用了瀑布流式,那么究竟每张图片用多大尺寸合适,能够降低用户面对满屏图片时的不适感?不同尺寸图片如何排放?在移动端又需要采用什么布局?怎么解决多张图片加载的性能问题?这些问题留待思考。

Pinterest每张图的宽度是固定的,高度也可获取,这样在渲染页面的时候就可以先确定位置而不是等加载到图片资源。

Flickr

个人感觉体验有差距。页面采用网格布局,评论等文字都采取隐藏措施,页面整体整洁大方。但是,单张图片浏览的体验完全不在这个水平上。点击图片后页面跳转到对应图片的页面(此处设置浮层进行显示不是更优?),页面放置了左右导航来浏览相片集里前后的图,导航没有集合更多的效果例如预览,最让我感觉不适的是返回相册的入口较为隐蔽,找不到这个入口的情况下只能一步步点击浏览器的返回键,如果打开了一个相片集的多张图片,回到相册的步骤相应增加到两步以上。

Facebook

Facebook用时间轴来组织信息,相比Pinterest、Flickr这些内容型网站,fb更具sns属性。双栏加瀑布流布局,采用瀑布流可以避免双栏布局下不同高度内容单元带来的空白区域。

个人相册用网格布局紧凑整洁清晰,点击图片后浮层展示大图和赞、评论、圈图等功能,点击浮层关闭按钮返回相册,感觉布局略显小但也符合“够用就好”主义。

css3极大丰富了用户体验,本文下半篇聚焦于使用css3及部分优秀的第三方库来帮助提升图片浏览的体验,让图片浏览这个过程更美一点~

一、图片展示

1、层叠

通过设置transform :translate3d 样式可实现层叠的立体效果

 

function setTransformStyle( el, tval ) {

el.style.WebkitTransform = tval;

el.style.msTransform = tval;

el.style.transform = tval;

}

如下图:分别设transform 样式的值为translate3d(0,0,0),translate3d(0,0,-60px),translate3d(0,0,-120px)

在点击单张图片改变三个向量的值来调整当前显示在最前端的图片

2、铺放

铺放可以通过transform: rotate实现,同时加上transition样式增强动画效果。

展开:

为不同图片设相应z-index、ransform: rotate

 

{

z-index: 10;

-webkit-transform-origin: 25% 100%;

-webkit-transform: translate(0px) rotate(30deg);

-webkit-transition: -webkit-transform 500ms ease-out 0ms;

transition: -webkit-transform 500ms ease-out 0ms;

}

Transition的几个值分别对应:属性改变时执行的效果;动画的持续时间;动画类型;延迟动画的时间。

合并:

 

{

'-webkit-transition' : 'none',

'-moz-transition' : 'none',

'-ms-transition' : 'none',

'-o-transition' : 'none',

'transition' : 'none'

}

借助一些优秀的插件能够帮助我们更快的实现效果,例如baraja(http://tympanus.net/Development/Baraja/js/jquery.baraja.js)

 

$( '#baraja-el' ).baraja();

$( '#some-button' ).on( 'click', function( event ) {

baraja.fan( {

speed : 500,

easing : 'ease-out',

range : 90,

direction : 'right',

origin : { x : 25, y : 100 },

center : true,

translation : 0

} );

} );

二、图片交互

1、翻页

BookBlock这个库可以参考

2、折叠

OriDomi(http://oridomi.com/)实现了各种折叠的效果,你的图片操作起来就像张纸,让用户从潜意识出发来行为,将现实生活的习惯无缝延伸到web中的做法值得推崇。

具体来看看OriDomi如何使用,有哪些效果。我用了一张svg格式地图来作为操作对象,基于svg本身的可操作性后续可以加入更多的点期待下~

初始化一个OriDomi对象(参数可选可配置):

添加动画效果:

curl() //卷曲:正数向偏离银幕方向卷曲,值越大弯曲度越大,负数反之

accordion() //类似手风琴展开的效果

stairs() //层叠效果

foldUp() //收起

更多的效果可以参见OriDomi官网

3、拖拽

拖拽行为可通过监听dragStart,dragMove,dragEnd事件,并把position等参数传给处理事件的函数完成。

在此介绍Draggabilly这个库,实现的图片拖动效果非常顺畅。

Draggabilly初始化:

 

//elem : 控制的元素

var draggie = new Draggabilly( elem, {

// options...

});

事件:dragStart、dragMove、dragEnd

使用:

 

draggie.on( 'dragMove', function(){

//处理的函数

} );

用CSS和第三方库来提升图片浏览体验的更多相关文章

  1. Android Studio [ImageView/使用第三方库加载图片]

    ImageViewActivity.class package com.xdw.a122; import android.support.v7.app.AppCompatActivity; impor ...

  2. iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

    iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView 时间:2016-01-19 19:13:43      阅读:630      评论:0      收藏:0   ...

  3. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  4. iOS:实现图片的无限轮播---之使用第三方库SDCycleScrollView

    SDCycleScrollView API // //  SDCycleScrollView.h //  SDCycleScrollView #import <UIKit/UIKit.h> ...

  5. Python库,让你相见恨晚的第三方库

    环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具.pyenv – 简单的 Python 版本管理工具.Vex – 可以在虚拟环境中执行命令.virt ...

  6. Python3.x:第三方库简介

    Python3.x:第三方库简介 环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具. pyenv – 简单的 Python 版本管理工具. Vex ...

  7. Python常用的标准库以及第三方库有哪些?

    20个必不可少的Python库也是基本的第三方库 读者您好.今天我将介绍20个属于我常用工具的Python库,我相信你看完之后也会觉得离不开它们.他们是: Requests.Kenneth Reitz ...

  8. 20个必不可少的Python库也是基本的第三方库

    个属于我常用工具的Python库,我相信你看完之后也会觉得离不开它们.他们是: Requests.Kenneth Reitz写的最富盛名的http库.每个Python程序员都应该有它. Scrapy. ...

  9. Python常用的标准库以及第三方库

    Python常用的标准库以及第三方库有哪些?   20个必不可少的Python库也是基本的第三方库 读者您好.今天我将介绍20个属于我常用工具的Python库,我相信你看完之后也会觉得离不开它们.他们 ...

随机推荐

  1. 用CAS操作实现Go标准库中的Once

    Go标准库中提供了Sync.Once来实现"只执行一次"的功能.学习了一下源代码,里面用的是经典的双重检查的模式: // Once is an object that will p ...

  2. CSS skills: 6) auto hide the top bar javascript

    //jquery $(document).ready(function(){ $(window).scroll(function() { $(this).scrollTop() > 10 ? $ ...

  3. CSS skills: 3) show sub-navigate items when mouse hove on nav-item

    <header> <div class="am-g am-g-fixed"> <ul class="am-avg-lg-2 topbar f ...

  4. hello world from hibernate

    初次学习hibernate,第一个程序,用的是XML配置文件 准备工作:下载hibernate的JAR包,我下的是当前最新的4.2.3,SQL的数据库驱动文件SQLJDBC,导入上述架包.

  5. Linux中ifcfg-eth0配置参数解释

    Linux中设置IP地址经常使用到ifcfg-eth0这个文件.  vi /etc/sysconfig/network-scripts/ifcfg-eth0 附录文件中的内容: DEVICE=eth0 ...

  6. poj 2723 2-SAT问题

    思路:二分枚举能开的门的数量,将每次枚举转换成2-SAT问题.这里存在的矛盾是假设有门上a,b两个锁,a锁对应于1号钥匙,而一号钥匙的配对是2号钥匙,b锁对应于3号钥匙,3号的配对是4号钥匙.那么2号 ...

  7. CSS3如何实现2D转换和3D转换,他们有何区别

    CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢? 1定义 2D: 能够对元素进行移动,缩放,转动,拉长或拉伸. 3D: 允许对元素进行格式化,在三维空间进行操作.元素改 ...

  8. Unity出现 error building player exception android (invocation failed)

    今天在编译Android的时候出现这个错误 error building player exception android (invocation failed) 百度谷歌之后,看到xuanyuson ...

  9. Android 侧滑菜单的简单实现(SlidingMenu)

    在我还没有学习Android的时候就用过侧滑菜单的APP,当时第一个感觉是:哇塞,这效果不错!当然,现在自己都已经学Android了,这效果当然也要做出来啊~ SlidingMenu是一种比较新的设置 ...

  10. 和阿文一起学H5——H5工具、素材

    字体: 一般的H5工具都会提供一部分字体,如果提供的字体中没有自己想用的字体,可以在PPT或PS中进行加工,然后另存为图片,再导入到H5工具中去. 字全生成器: 1.http://www.diyizi ...