タイトルを見ると少し興味があるかもしれませんが、読んだら指の練習が何であるかわかります~
- 高性能アニメーション
- 各CSS要素のレンダリングステータス
- 高性能モバイルWeb開発
- レンダリング:再描画、リフロー/リレイアウト、再スタイル
何もない視差スクロールには、誰もが興味を持っていますが (もう人気はありませんが)、まずは試してその効果を確認することにしました。
パート 1
パート 3
第4部
参考:
視差スクロールの原理の紹介
視差スクロール
- 視差スクロール関連
- 視差スクロール
- いくつかのアニメーションと組み合わせると、次の素晴らしいページを入手できます:
参考デモ:
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>
$.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"));
まずコンテナのサイズを決定し、いくつかの小さな白い div を初期化し、CSS3 アニメーションを使用してそれらを連続的に回転させる、これは星の感覚です。そして、前景と背景の移動速度の違いに基づいて視差スクロールが発生します。アニメーションの場合、ほとんどの場合、transform:translate3d が使用され、パーセントでアニメーション化することは、親要素ではなく、独自の要素に基づいて行われることを意味します。したがって、一部の小さな要素が 100% 移動することは同等です。独自のサイズの問題を解決するには、すべての要素をフルページの div に配置します。このネストされた要素を移動して、異なる速度で移動させることができます。数値の実装。(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; })($)ログイン後にコピー
展望
背景
前景
背景
对游戏制作的同学不会肯定不会陌生
行走
这样的代码一大堆，我贴个自己实现的，简单再说一下对于这个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扁平化的风格，所以都是相关的颜色
- フラット UI カラー
- クーラー
- flatuicolorpick
- マテリアル デザイン
- フラットカラー
まず、上記の Web サイトで好きな色をいくつか見つけてから、以下の Web サイトにアクセスして、関連する補色などを生成します。 colorhexa : カラー分析、色を入力し、そのプロパティを分析しますパレット: 非常に使いやすい色選択ツールで、効果も確認できます
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
