フロントエンドのさまざまな指の練習_html/css_WEB-ITnose

タイトルを見ると少し興味があるかもしれませんが、読んだら指の練習が何であるかわかります~

目次

• はじめに
• 原理
• コアライブラリ
• 実装
  • キーフレーム/イメージ調整
  • スプライトシート
  • プログレスバー
• 発生する可能性のある問題
• 関連ツール
• アクセスアドレス

• 前に書いてください（特に注意してください）モバイル端末でアニメーションを作成する場合、 top、bottom、Background-positionなどの要素は、JSアニメーションでもCSSアニメーションでもアニメーション化されます。主にブラウザのリフロー、再描画、合成などに使用できるのは 4 つだけです (GPU アクセラレーションを有効にするには translateZ(0) を追加する必要があります): translate、scale、opacity、rotate。詳細については、以下を参照してください:

  • 高性能アニメーション
  • 各CSS要素のレンダリングステータス
  • 高性能モバイルWeb開発
  • レンダリング:再描画、リフロー/リレイアウト、再スタイル

• はじめに

  何もない視差スクロールには、誰もが興味を持っていますが (もう人気はありませんが)、まずは試してその効果を確認することにしました。

  • クリップデモ (フルバージョンのアクセスアドレスは最後にあります)

  パート 1

  パート 3

  第4部

原則

視差スクロール効果は少し使用されていますが、これは多くのマテリアルとは異なり、本質的には、異なるレイヤーが異なる速度で移動することです。たとえば、電車に乗っているとき、遠くにあるオブジェクトはゆっくりと移動します。近くの物体は非常に速く動きますが、この速度差はリファレンス デモとして人工的に実現されています。

---

• 参考:

  視差スクロールの原理の紹介

  視差スクロール

  • 視差スクロール関連
  • 視差スクロール
  • いくつかのアニメーションと組み合わせると、次の素晴らしいページを入手できます:

  参考デモ:

  http://tedxguc.com/

  http://everylastdrop.co.uk/

  • http://nasaprospect.com/

のコアライブラリ上記の効果を実現するために、私は skrollr ライブラリを選択しました。CSS を理解していれば、この効果を再生できます。一般的に、私は skrollr を使用しました

---

多目的に動作します。デスクトップでもモバイルでもとても使いやすいです
• • zepto
    言うまでもなく
  • 画像のプリロードは非常にシンプルで素晴らしいです
  • 実装
    キーフレーム/画像の調整
    skrollrを初期化する前に、画像にいくつかの調整を行う必要があります。まず、画像を選択した後、携帯電話に表示されたときに画像が変形しないことを確認する必要があります。そのため、さまざまな携帯電話の画面サイズに応じて画像を調整し、結果の画像に基づいて終了キーフレームを設定する必要があります。
background は終了キーフレームの比率を設定します

<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;        })($)

    このネストされた要素を移動して、異なる速度で移動させることができます。数値の実装。

    展望

    背景

    前景

    背景

  ---

  • spritesheet

    对游戏制作的同学不会肯定不会陌生

    行走

    这样的代码一大堆，我贴个自己实现的，简单再说一下对于这个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

    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);                    }

---

• 可能会遇到的问题 对于配置稍低的手机，比如我的4S，在场景越来越多，图片越来越多的情况下，不管是在微信中打开还是原生浏览器中打开，都会把微信和浏览器弄崩溃。。期间尝试了各种优化，把所有关于layout和paint的动画部分都替换，情况稍微好一些，但是还是有崩溃的现象。最后发现网页加载时要对所有的场景进行渲染，即便这些场景一开始并不需要出现。所以根据动画情况，将需要出现的场景动态显示，且在css中加入下面的语句,让所有场景及信息一开始都不渲染。

      .scene1,.scene2,.scene3,.scene4,.scene5,.scene6,.infomation{      display: none;      }

  最后根据skrollr的值来选择显示的场景。

  通过这样的做，我的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
      • Pinterest
      • 站酷
      • freevectors
      • icon
      • freevec

    • 配色:

      本人喜欢flat扁平化的风格，所以都是相关的颜色

      • フラット UI カラー
      • クーラー
      • flatuicolorpick
      • マテリアル デザイン
      • フラットカラー

      まず、上記の Web サイトで好きな色をいくつか見つけてから、以下の Web サイトにアクセスして、関連する補色などを生成します。 colorhexa : カラー分析、色を入力し、そのプロパティを分析しますパレット: 非常に使いやすい色選択ツールで、効果も確認できます

  ---

  • アドレスにアクセス
    • 携帯電話を使用して、直接表示 ここをクリックしてアクセスします (デバッグをオンにして効果を確認することもできます)