网页滚动图片设计 第1篇
“我们真的很喜欢通过故事去触发人们的情感。”
Immersive Garden 这个网站在没有使用3D技术的前提下,借用视差滚动和旋转营造出类似3D的深度和沉浸式的体验。即使界面不大,也能够让人觉得直观。
这个网站会预加载许多短片,然后作为访客你可以灵活的控制它们播放、暂停等。
这个网站最有趣的地方之一是它内置的多功能光标,你可以借助它按照不同的速度播放,控制比例和大小,非常有意思。
网页滚动图片设计 第2篇
Fluttuo 的页面设计足够优秀,流畅的动画,鲜明的色彩对比,干净的界面中文本字体显得华丽又沉稳,整个网站的视觉在最优秀的电商网站中,也算得上是突出。而视差特效的加入,则让整个网站的浏览和购物体验再一次提升。
网站背景和前景的元素位于不同的图层,当预先加载的前景元素随着用户滚动的时候,视差特效就出现了。背景层承载着主要的内容,塑造整体风格,而前景的元素则协同展示产品细节和主要的故事。
平滑的视差滚动特和传送带动画赋予了页面以良好的互动性,这一点和品牌“始终尝试新材料和新设计”的精神不谋而合。
网页滚动图片设计 第3篇
Hot Dot 的视差特效略有一点差别,它的页面滚动方向是横向的。页面水平滚动的方向是从左到右,背景图像也不是固定的,这对于设计和开发而言,都更容易实现一些。
整个网站不仅仅适合桌面端设备,而且对于触摸屏也颇为友好,你在iOS 和 Android 平台上也能拥有不错的浏览体验。水平的视差滚动还可以针对移动端进行响应式的适配,用户甚至可以在移动端设备上将浏览方向从横向切换为纵向,所有的屏幕内容都能相应地调整。
网页滚动图片设计 第4篇
Well,虽然 Cyclemon 这个网页排在最后,但是它并不逊于其他的另外9个网页。这个网站简直是将骑行爱好者的梦想给呈现了出来。当你向下滚动网页的时候,会有不同的环境和不同的自行车呈现出来。它会让你好奇下一屏会是怎样的场景,会有什么样的自行车出现,会让你停不下来。
事实上,Cyclemon 并不是一个卖自行车的网站,它只是两位设计师用来销售他们设计作品的网站。但是这个网站也正是视差动效引人入胜的一个实例。
来自: 涂鸦吧 > 《网页网站》
0条评论
发表
请遵守用户 评论公约
涨姿势!悄然流行的混合型视差网页设计趋势 | 产品壹佰
悄然流行的混合型视差网页设计趋势 | 产品壹佰.新的混合型视差不同于以往,它不是属性单一的视差滚动,它是诸多设计手法和技术有机而无...
带你梳理正在流行的长滚动页面设计
带你梳理正在流行的长滚动页面设计。就像上面的Beagle的网站,Bowbead 的页面设计充分运用了长滚动页面的优势,将他们的价值观逐个清晰...
这四种大胆前卫的背景设计技巧,能让你的设计脱颖而出
粒子动效还能和鼠标运动以及触发事件结合起来:可以让粒子避开光标,也能让粒子围绕这光标运动,甚至让运动轨迹紧跟光标运动,等等。在...
半扁平化成2017前沿设计趋势
半扁平化成2017前沿设计趋势。扁平化设计的兴起是为了适应现代科技所推崇的极简设计风格,2017年扁平化设计还会继续存在,但也在经历着...
10款超酷实用的jQuery焦点图赏析及源码
10款超酷实用的jQuery焦点图赏析及源码。它是不依赖于其它框架的独立类库,可以让你快速打造出视差滚动效果。Nivoslider:丰富的图片切...
Web滚动性能优化实战
介绍滚动的原理绘制分析图像缩放代价昂贵的样式Reflow与重绘滚动事件防抖结论扩展阅读介绍。你可以用Chrome浏览器的DevTools来看看这个...
苹果的设计为什么那么厉害!
▲整个滚动视差效果,将产品的每一个细节呈现在用户面前,虽然很多厂家都是模仿苹果这个效果,但是流畅感和细腻都还不如苹果精致,有兴...
优秀网页设计:20个立体动感的视差滚动效果网站
优秀网页设计:20个立体动感的视差滚动效果网站。作为新兴的网页制作技术,视差滚动(Parallax Scrolling)效果受到越来越多的人喜欢。...
YES|着陆页设计优化值得注意的小细节
3 粒子背景 △Justin Windle30,000个粒子Jet Up融合了这些技术,页面从加载动画开始,在用户与页面交互时使用微妙的粒子动画配合鼠标的...
微信扫码,在手机上查看选中内容
微信扫码,在手机上查看选中内容
网页滚动图片设计 第5篇
Hello Monday 这个网站创造了分屏式3D 视差特效,设计师让屏幕的一边用来展示设计案例,另外一边屏幕用来展示相关的描述和细节。每个设计案例都有不一样的视觉特征和独特的体验。
整个网站设计使用了颇为有吸引力的过渡效果,这些效果有助于营造无缝的视觉流和清晰的布局。不少案例都采用了鲜艳的色彩和漂亮的图片,大胆的版式让整个布局显得非常有气势。