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

苏南South 2020-11-13 12:48:36
分析 css CSS3 思路 swiper


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

前言

继一次的3D魔方之后,这次带你一起玩转性感美女秀,正常套路,请先一堵为快,有兴趣继续,没兴趣也可以看看美女养眼哦?!想直接在线预览 ?

本文由@IT·平头哥联盟-首席填坑官∙苏南分享,公众号:honeyBadger8

这里是@IT·平头哥联盟,我是首席填坑官∙苏南,用心分享 做有温度的攻城狮。
公众号:honeyBadger8,群: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);
}
}
立体感的构成 :
  • 旋转的立体感是如何构成的呢?
  • 原理其实很简单,可以理解成每列都是一个立体魔方,它们都是相互独立的,
  • 每列 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`;
};
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);
}

单列的html布局及重点样式

切换 :
  • 布局完成后,我们只需要操控系列[div-col]来进行旋转即可,
  • 下图为 transform-origin:50% 50% -180px,即设置旋转的中心点:

单列的鼠标经过

  • 鼠标经过都实现了,上下页切换还远吗?
  • 之前创建结构的时候,我们已知div的列数,
  • 为了更好的装B,我们在旋转的时候,给每列都要添加一定延时setTimeout,得以达到缓冲的视差,
  • 然后requestAnimationFrame就该它出场了,setInterval已经成为过去式,
  • 同时旋转前,还要设置下一页,要显示的图片,
  • 当然记得旋转完成,后要重置角度哦。

动画javascript,3D旋转
javascript,3D旋转缓冲效果


...省略NswiperAnimate(){

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);
},index*this.delayMilli);
}
...省略N
上下翻页 :
  • 上面基本已实现了旋转的效果,再加一些修饰,
  • 上下点击切换的功能,注意的地方在于,防止重复点击,当前旋转中时不能点:
pageDown(){

if(this.status){

console.log("下翻,不能点击")
return ;
};//首席填坑官∙苏南的专栏
this.status = 1;
this.pageNum = this.pageNum>=this.imageList.length ? 1 :++this.pageNum;
this.swiperAnimate();
}

javascript,3D旋转

预加载 :
  • 因轮播图图片较多,且此示例的图片每次只加载了两张,故要对图片进行一个预加载,
  • 以及图片加载出错后的过滤,避免影响后续效果的呈现:
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到了吗?如果觉得不错,记得给个赞哦,想第一时间获得最新分享,欢迎扫码关注我的个人公众号:honeyBadger8,?!

用心分享 一起进步 做有温度的攻城狮

更多文章:

如何用CSS3画出懂你的3D魔方?
SVG Sprites Icon的使用技巧
immutability因React官方出镜之使用总结分享!
小程序项目之又一填坑小记
做完小程序项目、老板给我加了6k薪资~
面试踩过的坑,都在这里了~
你应该做的前端性能优化之总结大全!
如何给localStorage设置一个过期时间?
手把手教你如何绘制一辆会跑车

作者:苏南 - 首席填坑官

来源:@IT·平头哥联盟

链接:https://segmentfault.com/blog/honeybadger

交流:912594095、公众号:honeyBadger8

本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权,非商业转载请注明原链接及出处。

版权声明
本文为[苏南South]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_43254766/article/details/84137483

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple