酷毙了!7分钟学会插画视差效果小技巧

时间:2018-08-13
B站视频:av29189960
类别:其他教程
水平:入门
观众:35597
2021年最值得学的涨薪技能!突破设计瓶颈的优质小课,哪项薄弱学哪里 → 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

教程作者:@leizingyiu

原效果微博:weibo.com/1773655610/GtFBwtr64

代码来源:codepen.io/leizingyiu/pen/mjaxrV

酷毙了!7分钟学会插画视差效果小技巧

⬆️微博的视频太大,我做了个小小的动图哟⬆️


需要粘贴到svg的代码:

<script type="text/javascript">var layer=document.getElementsByClassName("layer");var rotaA=0;var rotaB=0;var rotaG=0;var rotaA0=0;var rotaB0=0;var rotaG0=0;var nowA=0;var nowB=0;var nowG=0;var makeInitial=false;var dist=[];for(var i=0;i<layer.length;i++){dist[i]=Number(layer[i].getAttribute("distance"));console.log(dist[i])}window.addEventListener("deviceorientation",orientationHandler,false);function orientationHandler(event){ /*UIIIUIII*/ if(makeInitial===false){rotaA0=event.alpha>180?event.alpha-180:event.alpha;rotaB0=event.beta;rotaG0=event.gamma;makeInitial=true}rotaA=(event.alpha>180?event.alpha-180:event.alpha)-rotaA0;rotaB=event.beta-rotaB0+90;rotaG=event.gamma-rotaG0;nowA=rotaA/360;nowB=rotaB<-90&&rotaB>-180?(rotaB+270)/360:(rotaB-90)/360;nowG=rotaG/360;for(var i=0;i<layer.length;i++){var moveX=(nowG*dist[i]);var moveY=(nowB*dist[i]);layer[i].setAttribute("style","transform:translate("+moveX+"vw,"+moveY+"vh);")}}/*by leizingyiu*/</script>

⬆️直接三击全选复制即可⬆️


需要用到的工具:

node.js下载地址:https://nodejs.org/en/

http-server说明网址:https://www.npmjs.com/package/http-server

酷毙了!7分钟学会插画视差效果小技巧


一个人做练习的时候,做得好没人发现,做得差没人点评,总感觉很难坚持下去呢···

从今天开始参与「优优教程网 365 天打卡计划」,每天一个小练习, 4 位U站管理员与大家一起打卡练习,点赞点评,互帮互助。优秀练习还有机会被优优转发 【参与方式】每天在 #优设每日作业# 内,上传打卡练习,话题微博格式【 DAY 01~365 】转发视为参加。(动图为打卡演示) 【收获】更好的自己

1 收藏 10

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接

发表评论 已发布 68

还可以输入 800 个字
 
 

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片