看见题目可能有点好奇，不过看下去你就知道什么叫手指操了~
- 高性能动画
- 各CSS元素渲染情况
- 高性能 Mobile Web 开发
- Rendering: repaint, reflow/relayout, restyle
毕业季没事做，一直都对视差滚动感兴趣，感觉很新鲜（虽然现在已经不火了）不过还是决定试试看，先看看效果。
第一部分
第二部分
第三部分
第四部分
用了一点视差滚动的效果，可能不明显，关于视差滚动，与很多资料，本质是不同层的移动速度不同，比如坐火车时，远处的物体移动得慢，近处的物体移动的很快，我们就人为的实现这种速度的差异参考demo。
参考资料：
- 视差滚动原理介绍
- Parallax Scrolling
- 视差滚动相关
- 视差滚动
如果再结合一些动画，就可以得到如下的比较cool的页面：
参考demo:
- http://tedxguc.com/
- http://everylastdrop.co.uk/
- http://nasaprospect.com/
<section class="scene1 fullpage" data-6300="transform:translate3d(0,0%,0);display:block" data-10000="transform:translate3d(0,-100%,0);display:block" data-30000="transform:translate3d(0,-100%,0);display:block" data-33000="transform:translate3d(0,-130%,0);display:none"></section>
在skrollr初始化之前，需要对图片进行一些调整，首先选好了图片之 后，得保证显示在手机上不变形，因而需要根据不同的手机屏幕大小调整 图片的大小，然后再根据所得的图片设置一下结束的关键帧。
background是设置结束关键帧ratio是设置背景图片的比例
$.plug.background(true,".scene1-1",6700,$.plug.ratio(true,1080,1920,".scene1-1"));$.plug.background(false,".scene2-1",18000,$.plug.ratio(false,4500,1667,".scene2-1"));$.plug.background(false,".scene2-2",22000,$.plug.ratio(false,4500,1667,".scene2-2"));$.plug.background(false,".scene3-1",42000,$.plug.ratio(false,3840,2160,".scene3-1"));$.plug.background(false,".scene3-2",48000,$.plug.ratio(false,3840,2160,".scene3-2"));$.plug.background(false,".scene4-1",58000,$.plug.ratio(false,2560,1496,".scene4-1"));$.plug.background(false,".scene4-2",62000,$.plug.ratio(false,2560,1496,".scene4-2"));$.plug.background(false,".scene5-1",76000,$.plug.ratio(false,2857,1216,".scene5-1"));$.plug.background(false,".scene6-1",112000,$.plug.ratio(false,800,800,".scene6-1"));$.plug.background(true,".scenev-1-1",94000,$.plug.ratio(true,600,1200,".scenev-1-1"));$.plug.background(true,".scenev-1-2",98000,$.plug.ratio(true,600,1200,".scenev-1-2"));$.plug.background(true,".scenev-1-3",102000,$.plug.ratio(true,600,1200,".scenev-1-3"));Copier après la connexion
如下所示，对于横向图片，以手机高度为准，先根据手机高度设置图片高 度，再根据图片比例设置图片的长度，对于纵向显示的图片，以屏幕宽度为准，手法类似，代码非常简单。
横向图片
(function($){ function ratio(iswidth,width,height,dom,scale,isback){ var ratioo=scale||1; var ratio=width/height; if(iswidth){ var wi=window.innerWidth*ratioo; var numb=Math.round(wi/ratio); var _pxheight=numb+"px"; document.querySelector(dom).style.height=_pxheight; return numb; } else{ var he=window.innerHeight*ratioo; var numb=Math.round(he*ratio); var _pxwidth=numb+"px"; document.querySelector(dom).style.width=_pxwidth; return numb; } } if(!$.plug)$.plug={}; $.plug.ratio=ratio; })($)一开始确定好容器大小，初始化一些白色的小型div,再通过CSS3动画让他们不停旋转，即是星星的感觉。再根据前景和背景的运动速度不同，造成视差滚动。对于动画，大多使用transform:translate3d，且以百分比做动画，以百分比做动画意味着是以自身元素为参照，不是父级元素，因而为了避免有些小型元素移动100%的距离只相当于移动了它自身大小的问题，将所有的元素都套在一个fullpage的div中:
.fullpage{width: 100%;height: 100%; position: absolute;left: 0;top:0}对这个嵌套元素进行移动，下面是各背景与前景，使他们以不同速度移动，可以通过设置不同的data-number值实现。
前景
背景
前景
背景
对游戏制作的同学不会肯定不会陌生
行走
这样的代码一大堆，我贴个自己实现的，简单再说一下对于这个5793*158的spritesheet，如果在手机上显示高度为100px，则宽度为5793/1.58=3666px，则每次spritesheet移动的距离为3666px/36(动画一共有36帧）=102px，对应下面的JS代码中的interval参数，同时为了停止有个缓冲，加了个停止帧stopframe参数。
(function($){ function animate(totaltime,dom,parts,interval,stopframe){ var temp=0; var stop_flag=false; var timer=null; var num=temp*(interval); $(dom).css({"background-position-x":num+"px"}); temp++; if(stop_flag&&temp===stopframe){ clearInterval(timer),timer=null stop_flag=false; } if(temp===parts)temp=0; return { animating:function(){return timer!==null?true:false}, stop:function(va){ stop_flag=true; //clearInterval(timer),timer=null }, resume:function(){ if(timer!==null)return var str=$(dom).css("background-position-x"); var matched=str.match(/-?[0-9]+/); var num=parseInt(matched[0]); temp=num/interval; timer=setInterval(function(){ var num=temp*(interval); $(dom).css({"background-position-x":num+"px"}); temp++; if(stop_flag&&temp===stopframe){ clearInterval(timer),timer=null stop_flag=false; } if(temp===parts)temp=0 },totaltime/parts); } } //$(dom) } if(!$.plug)$.plug={}; $.plug.animate=animate;})($)progressbar的实现使用了2个半圆的形式 利用border-radius：50%做一个圆，再利用clip: rect(0,auto,auto,50px)裁切为半圆。
右半圆旋转
之后再从垂直正中开始裁切clip: rect(0,auto,auto,50px);
clip裁切
左半圆类似:
左半圆旋转
clip裁切
将2个区域合并：
饼图效果
加一个背景色相同的mask覆盖在中间，这样的好处是圆环宽度可以方便调整：
加个背景颜色相同的覆盖在中间
之后就可以通过代码设置其百分比：
(function($){ function circleprogress(dom,value){ $(dom).each(function(index, el) { var num = value * 3.6; num=Math.round(num); if (num<=180) { $(this).find('.right').css('-webkit-transform', "rotate(" + num + "deg) translateZ(0px)"); $(this).find('.right').css('transform', "rotate(" + num + "deg) translateZ(0px)"); $(this).find('.left').css('-webkit-transform', "rotate("+0+ "deg) translateZ(0px)"); $(this).find('.left').css('transform', "rotate("+0+ "deg) translateZ(0px)"); } else { $(this).find('.right').css('-webkit-transform', "rotate(180deg) translateZ(0px)"); $(this).find('.left').css('-webkit-transform', "rotate(" + (num - 180) + "deg) translateZ(0px)"); $(this).find('.right').css('transform', "rotate(180deg) translateZ(0px)"); $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg) translateZ(0px)"); }; }); } if(!$.plug)$.plug={}; $.plug.circleprogress=circleprogress;})($)在滑动的过程中，配置好滑动的区间即可：
if(data.curTop>=20000 && data.curTop<25000){ var num=Math.round((data.curTop-20000)/55); $('.circle-1').find('span.value').text(num); $.plug.circleprogress('.circle-1',num); } .scene1,.scene2,.scene3,.scene4,.scene5,.scene6,.infomation{ display: none; }通过这样的做，我的4s终于再也不崩溃了，即便在有些低配手机还是有点卡。
- 图片压缩
- 图像处理：不管是jpg还是 gif都能去除背景，强烈推荐，特别是gif功能，相当好用
- 字体
- webfont/icon
- 图片处理：国内工具
再贴几个图像处理工具，都是在线的，相当不错
- http://animizer.net/en/gif-apng-converter 很强大，有自动根据 gif生成spritesheet的功能，不过有时候生成的效果不大好
- http://www190.lunapic.com/editor/?action=transparent
- http://ezgif.com/
这些图像处理网站后台可能用的的是imagemagick（瞎猜的）
都是免费无水印，但是还是自己用就好了
- 设计导航
- wallhaven: 高分辨率大图
- dribbble：不用多说 很多素材都来自这，也有很多gif
- freepik
- gif: gif集合
- vectorhq
- 站酷
- freevectors
- icon
- freevec
本人喜欢flat扁平化的风格，所以都是相关的颜色
- flat ui colors
- coolors
- flatuicolorpick
- material design
- flatcolors
先在上面的网站找些喜欢的颜色 然后再去下面的网站生成相关的互补色等colorhexa：颜色分析，输入一个颜 色，分析其各属性paletton：相当 好用的选色工具，还可以看效果
Le rôle du Serverlet en Java
Comment lire une colonne dans Excel en python
Quelle est la différence entre les vues et les tables de base de données
Le rôle de la balise de base
Tutoriel C#
Quelles sont les utilisations du dézender ?
Comment partager une imprimante entre deux ordinateurs
Utilisation de UpdatePanel
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
