3D carousel控件一览
3d carousel是常用于slide图文展示的效果,通过css transform修饰相邻的几张图文,用简单的代价呈现3d场景效果。
经过比较,收费控件中我比较欣赏的是:royal-3d-carousel
截图如下:
而开源的控件,我选中的是:Cloud 9 Carousel
该控件采用MIT license。
截图如下:
聊聊过渡帧
为什么相中他两呢?最重要的一点,是它们都应用了requestAnimationFrame。
虽然只是一个简单的甚至可以用 setInternal代替的API,但我认为它却是传统pc界面与移动终端界面的分水岭。为什么大家总感觉pc界面呆滞无趣,而移动终端的界面却让人爱不释手呢?
我认为ios开创的移动界面其中一个重大的革新就是在界面的交互中采用了过渡帧动画,界面的切换过程从而变得平滑有趣,即使响应时间慢一点,人们也愿意等待这个切换的过程。
过渡帧动画再与物理引擎结合的话,比如:手指滑动越快,界面的滑动响应就越长。这会让人们在现实世界中形成的经验在移动终端的交互中得到验证,符合他们的操作预期。当然就受人喜爱了。
对requestAnimationFrame有兴趣的朋友,可以移步这篇文章。
对Cloud9 Carsousel的增强
要用这个carsousel控件来进行抽奖的话,需要解决的关键问题是:如何将控件只能加载几张图,扩展到加载几百上千张图?
我的策略是:
1. 图标滚动到最近处,认为获得过中奖几率一次,打标记;
2. 该图标继滚动到最远处时,检查图标的标记,如果已经打过标记,则将其移除滚动池,将下一个图标移入滚动池。
3. 对每一次rendered最近图标重复上述逻辑。
关键代码如下:
对carsousel 增加方法,用于移除图标和加入新图标:
//c4w add this.replaceItem = function(item_index,attr) { var item= this.items[item_index]; item.rendered=false; $(item.element).remove(); var img = new Image(); $(img).attr(attr).css( "opacity", 0 ); $container.append(img); var me=this; img.onload=function(){ me.items[item_index] = new Item(img,me.itemOptions); //$(this).css( "opacity", 1 ); $(this).parent().css( "opacity", 1 ); } };
响应最近图标的rendered事件,并进行上述处理:
function rendered( carousel ) { var item = carousel.nearestItem(); var it_near = carousel.nearestIndex(); var len = carousel.items.length; for(var i=0; i<2; i++){ var it_far = it_near+4+i; if(it_far>=len) it_far-=len; var item_far = carousel.items[it_far]; //rendered item, repalce it with another img el if(item_far.rendered){ carousel.pos++; if(carousel.pos>=img_total) carousel.pos=1; carousel.replaceItem(it_far,{ src:"images/png/"+carousel.pos+".png", alt:"Title "+carousel.pos }); } } item.rendered=true; title.text( item.element.alt ) // Fade in based on proximity of the item var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI) title.css('opacity', 0.5 + (0.5 * c)) }
图片下载自:http://www.haotu.net/pack/3406/my-senven-icons
请自行下载,控件使用请尊重原作者license声明。
最终效果
http://v.youku.com/v_show/id_XMTQwMzQ5MDcxMg==.html
相关推荐
jQuery 3d Carousel轮播图插件Waterwheel-Carousel.zip
React Spring 3D轮播一个3D Carousel组件,用于使用构建的图像并利用 控制幻灯片过渡。 它的主要目的是通过goToSlide道具进行控制,但是如果您不想自己进行导航,我还提供了showNavigation道具。 这应该不言而喻,...
一个 Flutter Carousel 控件
jQuery Carousel 3D 图片旋转显示插件 v1.1
Vue轮播3D 该存储库已恢复运行。 我将尝试使其保持更新并偶尔合并合并请求。... 用法(本地) 使用导入将Carousel 3d包含到您的组件中: import { Carousel3d , Slide } from 'vue-carousel-3d' ;export default { ...
Carousel-开源3d,自定义路径动画,可以自行修改panel模式
cloud9carousel, 用于 jquery/zepto的高性能 3D 透视图 carousel 云 9-carousel基于 carousel/zepto的3D 透视图,基于原始云 carousel 插件,它是由教授云( 云) 云。特性适用于 jQuery 和 Zepto超快易于使用。( 可选...
3DCarousel:具有鼠标控件的3D Carousel
3D-angular-3d-carousel.zip,用于可自定义的交互式三维旋转木马的angular.js指令。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
jR3DCarousel是一款效果非常炫酷的3D旋转木马jQuery插件。该旋转木马插件可以通过参数设置来修改旋转木马的类型,可以设置显示模式和easing动画缓动模式等。
React 3D Carousel 组件React中的 3D 轮播组件(支持滑动)。演示 jsfiddle ( )安装新产品经理 npm i 3d-react-carousal纱 yarn add 3d-react-carousal在 public.html 中为箭头添加 fa-css <link href=...
安卓 3D 轮播一个简单的 3D 轮播,您可以集成到您的 Android 应用程序中。 此版本的库没有额外的依赖项,但需要 Android v9+ 才能运行。 基于 Igor Kushnarev 的 Android 3D Carousel,可在代码项目中获得: :用法...
react-3d-carousel React从sratch制作的3D。 演示位于: :
一个PV3D做的例子,可以到以下网址看效果。 http://user.qzone.qq.com/1041243341/blog/1328586244
jquery.cloud9carousel.js 开发炫酷3D轮播图滚动效果插件
非常实用的特效代码,可以完美运行,可以二次修改!
owl.carousel.min.js
Ant Design of Vue Carousel 走马灯 实现简单的分页效果demo 内容简单