玩转3D Swiper美女性感秀之思路分析

CSS3 玩转3D Swiper性感秀之思路分析总结

前言

  继一次的3D魔方之后,这次利用CSS3的transform、translate、rotate、preserve-3d等结合JS的requestAnimationFrameclass带你一起玩转性感美女秀,正常套路,请先一堵为快,有兴趣继续,没兴趣也可以看看美女养眼哦🤪!想直接在线预览 👈

3D Swiper实例展示

这里是@IT·平头哥联盟,我是首席填坑官∙苏南,用心分享 做有温度的攻城狮。 群:912594095

回顾:

  看过上次的3D魔方的同学对于本次的分析会有一定的帮助,当然如果大佬您本身就对css3就已经玩的很666了,那么对于下文的分解就请扮演老师的角色吧,小弟如有不足之处,欢迎斧正。

解析:

创建列DIV :
  • 从上图中我们能看出,每次旋转的动画是由多列小卡片组成的;
  • 每列根据它的下标,对背景进行位移,做到拼接的效果,整体看起来就成了一张图
  • 一起来看一下真像是啥样的:
旋转的动画是由多列小卡片组成
colNode(){
    //生成列的节点
    for (var i=0;i<this.colLen;i++){
        let iDivCol = document.createElement('div'); //列
        iDivCol.className = "div-col";
        iDivCol.style.width = this.colW+'px';
        iDivCol.style.height = this.cubeH+'px';
        iDivCol.style.zIndex = (i>this.colLen/2?this.colLen-i:i);
        this.swiperEle.appendChild(iDivCol);
    }//首席填坑官∙苏南的专栏 交流:912594095、公众号:honeyBadger8
}
立体感的构成 :
  • 旋转的立体感是如何构成的呢?
  • 原理其实很简单,可以理解成每列都是一个立体魔方,它们都是相互独立的,
  • 每列 backgroundPosition:index*xcolW,进行一个位移,
  • 简单来说,即每列内部都有6个面组成,每个面都以父级为目标进行 position、transform等设置,
  • 一张图,让你看懂全世界:—— 图五为完成输出
单列的构成之四个面的展示
//——[正、上、左、右]
for(var i = 0;i<4;i++){
    let dividingLine = i<2;
    let span = document.createElement('span');
    span.className = `${dividingLine?'bg-img':'pure-color'} i${i}`;
    span.style.width = `${dividingLine? this.colW:this.cubeH}px`;
    span.style.height = this.cubeH+'px';
    if(dividingLine){
        span.style.backgroundPosition = `-${index*this.colW}px 0`;
    };//首席填坑官∙苏南的专栏 交流:912594095、公众号:honeyBadger8
    iDivCol.appendChild(span);
};
单列的布局结构 :
  • colNode方法中的 zIndex,需要注意一下,层级的调整,可以覆盖立体透视造成的影响,
  • 单列的html布局及重点样式,
Zindex的重要性
transform 等角投影
 /*四个面的样式*/
 ...省略N行
.div-col span.i1{
    /*top*/
    transform-origin:top;
    transform:translateZ(-360px) rotateX(90deg);
}
.div-col span.i2{
    /*left*/
    transform-origin: left;
    transform: rotateY(90deg);
}
.div-col span.i3{
    /*right*/
    transform-origin:left;
    transform:translateX(25px) rotateY(90deg);
}//首席填坑官∙苏南的专栏 交流:912594095、公众号:honeyBadger8
单列的html布局及重点样式
切换 :
  • 布局完成后,我们只需要操控系列div-col来进行旋转即可,
  • 下图为 transform-origin:50% 50% -180px,即设置旋转的中心点:
单列的鼠标经过
  • 鼠标经过都实现了,上下页切换还远吗?
  • 之前创建结构的时候,我们已知div的列数,
  • 为了更好的装B,我们在旋转的时候,给每列都要添加一定延时setTimeout,得以达到缓冲的视差,
  • 然后requestAnimationFrame就该它出场了,setInterval已经成为过去式,
  • 同时旋转前,还要设置下一页,要显示的图片,
  • 当然记得旋转完成,后要重置角度哦。
javascript,3D旋转
javascript,3D旋转缓冲效果
...省略N行
swiperAnimate(){
    const _requestAnimationFrame_ = window.requestAnimationFrame||window.WebkitRequestAnimationFrame;
    const iDivCol = this.swiperEle.querySelectorAll(".div-col");
    for(var i=0;i<iDivCol.length;i++){
        //让动画更逼真,给个过渡,当然也可以调整,requestAnimationFrame每次递增的值,
        iDivCol[i].style.WebkitTransition=`.8s -webkit-transform ease`;
        iDivCol[i].style.WebkitTransformOrigin=iDivCol[i].style.transformOrigin = "50% 50% -180px";
        this.animateMove(iDivCol[i],i,_requestAnimationFrame_);
    }
}
animateMove(Col,index,animationFrame){

    let ColNum =0;
    let spanSurface =  Col.querySelectorAll("span");
    //即将旋转到的面,展示的图片
    spanSurface[1].style.backgroundImage="url(./2.jpg)";
    setTimeout(()=>{
        //每列进行一个延时,以达到缓冲效果
        this.rotate(Col,0,spanSurface,animationFrame);
//首席填坑官∙苏南的专栏 交流:912594095、公众号:honeyBadger8
    },index*this.delayMilli);
}
...省略N行
上下翻页 :
  • 上面基本已实现了旋转的效果,再加一些修饰,
  • 上下点击切换的功能,注意的地方在于,防止重复点击,当前旋转中时不能点:
pageDown(){
    if(this.status){
        console.log("下翻,不能点击")
        return ;
    };//首席填坑官∙苏南的专栏 交流:912594095、公众号:honeyBadger8
    this.status = 1;
    this.pageNum = this.pageNum>=this.imageList.length ? 1 :++this.pageNum;
    this.swiperAnimate();
}
3D Swiper实例展示,上下点击展示
预加载 :
  • 因轮播图图片较多,且此示例的图片每次只加载了两张,故要对图片进行一个预加载,
  • 以及图片加载出错后的过滤,避免影响后续效果的呈现:
preloadingImage(){
    this.imageList.map((k,v)=>{
        let imgNode = new Image();
        imgNode.onerror=err=>{
            this.imageList.splice(v,1);
        }
        imgNode.src = k;
    });
}
javascript,图片加载出错后的过滤

总结:

  一个效果实现的方式有很多种,比如我们可以设置6个面,每设置一次,都是展示一张图,这样就不用每次旋转完后又去重置图片、角度等问题,包括requestAnimationFrame动画切换的过渡过程,也应该有更好的方式,新手上路中,欢迎各位大佬指点。以上就是今天为您带来的分享,你GET到了吗?如果觉得不错,记得给个赞哦!

宝剑锋从磨砺出,梅花香自苦寒来,做有温度的攻城狮!

更多文章:

easy-mock 最好的备胎没有之一

immutability因React官方出镜之使用总结分享!

面试踩过的坑,都在这里了~

你应该做的前端性能优化之总结大全!

如何给localStorage设置一个过期时间?

动画一点点 - 如何用CSS3画出懂你的3D魔方?

作者:苏南 - 首席填坑官 来源:@IT·平头哥联盟 链接:https://susouth.com/ 交流:912594095、公号:honeyBadger8 本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权,非商业转载请注明原链接及出处。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

4427
来自专栏Jerry的SAP技术分享

SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么

身边有些年轻同事曾经向我表达过这种困扰:尽管完成日常工作没有任何问题,但是还想更进一步,把代码写得更好些,做到精益求精。现在写的代码能实现功能,但是不知道可以怎...

1663
来自专栏lhyt前端之路

css菜鸡的自我救赎0. 前言1. 一些实践方案深入浅出2. 开始试试水

我们看百度搜索的顶部,顶部的#head(搜索框这一行都是)是fixed的,紧接着的那个div是一个tab。当然fixed脱离文本流,就用padding把自己的主...

953
来自专栏琯琯博客

awesome-css-cn命名习惯和方式参考其他资源原文链接

CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

4718
来自专栏域名资讯

香飘飘奶茶上市 域名为“zjxpp”?

香飘飘终于走完了其六年的IPO之路:经证监会网站发布消息,香飘飘食品股份有限公司首发申请获通过。

520
来自专栏数据小魔方

案例|产品介绍(喜力啤酒价格构成图)

今天要跟大家分享的是产品介绍的一般思路! 产品介绍可能是我们日常做演示文稿需求最频繁的任务之一。 它见诸于课堂演示、新品发布会、业绩报告会以及融资路演的大屏幕...

3675
来自专栏企鹅号快讯

web前端薪资分为九段,你是哪一段?

互联网的疯狂开展,让企业对开发人员的需求缺口越来越大,以至于呈现年薪40万前端职位,关键是:竟然仍是招不到人,够悲催的吧;而另一端,越来越多的人认识到这是一块大...

1988
来自专栏葡萄城控件技术团队

MultiRow发现之旅(五)- MultiRow版俄罗斯方块(exe + 源码)

前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 MultiRow发现之旅(三)- 模板管理器和Ta...

2115
来自专栏ytkah

给微信图文消息添加修饰方框更简洁大方

  我们在编辑微信公众号的时候,如果篇幅比较长,或者要点比较多,可以用方框分几个小版块,用户浏览更明了,排版美观许多,也不会给人一种长篇大论的感觉,一眼瞄过去就...

3134
来自专栏Timhbw博客

iOS10.1.X 已经可以越狱!逆向的同学有福了

2016-12-2215:28:54 发表评论 1,316℃热度 1.支持系统 2.支持设备 3.越狱工具 4.小白鼠越狱测试 5.总结 目录 最近...

3717

扫码关注云+社区

领取腾讯云代金券