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

教程作者：@leizingyiu

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

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

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

需要粘贴到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

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

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