搜尋
首頁web前端html教學不一样的前端手指操_html/css_WEB-ITnose

看见题目可能有点好奇,不过看下去你就知道什么叫手指操了~

目录

  • 引言
  • 原理
  • 核心库
  • 实现
    • 关键帧/图片调整
    • spritesheet
    • progressbar
  • 可能会遇到的问题
  • 相关工具
  • 访问地址
  • 写在前面(特别注意)在移动端上做动画,一定不能用top,bottom,background-position等元素做动画,不管是JS动画还是CSS动画。主要是浏览器重排,重绘,合成等,只能用4个(需要加translateZ(0)开启GPU加速):translate,scale,opacity,rotate。详细资料参考:
    • 高性能动画
    • 各CSS元素渲染情况
    • 高性能 Mobile Web 开发
    • Rendering: repaint, reflow/relayout, restyle
  • 引言

    毕业季没事做,一直都对视差滚动感兴趣,感觉很新鲜(虽然现在已经不火了)不过还是决定试试看,先看看效果。

    • 片段演示(完整版访问地址在最后)

    第一部分

    第二部分

    第三部分

    第四部分


  • 原理

    用了一点视差滚动的效果,可能不明显,关于视差滚动,与很多资料,本质是不同层的移动速度不同,比如坐火车时,远处的物体移动得慢,近处的物体移动的很快,我们就人为的实现这种速度的差异参考demo。

    参考资料:

    • 视差滚动原理介绍
    • Parallax Scrolling
    • 视差滚动相关
    • 视差滚动

    如果再结合一些动画,就可以得到如下的比较cool的页面:

    参考demo:

    • http://tedxguc.com/
    • http://everylastdrop.co.uk/
    • http://nasaprospect.com/

  • 核心库为了实现上述的效果,选择了skrollr这个库,使用这个库,懂CSS就可以玩出这个效果了,用关键帧加CSS就可以了
    <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
      • 多用于桌面端,用在了移动端效果也不错,用起来很方便
    • zepto
      • 不用多说
    • imagesloaded
      • 图片预加载 相当简单nice

  • 实现
    • 关键帧/图片调整

      在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"));

      如下所示,对于横向图片,以手机高度为准,先根据手机高度设置图片高 度,再根据图片比例设置图片的长度,对于纵向显示的图片,以屏幕宽度为准,手法类似,代码非常简单。

      横向图片

      (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值实现。

      前景

      背景

      前景

      背景


    • 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,在场景越来越多,图片越来越多的情况下,不管是在微信中打开还是原生浏览器中打开,都会把微信和浏览器弄崩溃。。期间尝试了各种优化,把所有关于layoutpaint的动画部分都替换,情况稍微好一些,但是还是有崩溃的现象。最后发现网页加载时要对所有的场景进行渲染,即便这些场景一开始并不需要出现。所以根据动画情况,将需要出现的场景动态显示,且在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扁平化的风格,所以都是相关的颜色

      • flat ui colors
      • coolors
      • flatuicolorpick
      • material design
      • flatcolors

      先在上面的网站找些喜欢的颜色 然后再去下面的网站生成相关的互补色等colorhexa:颜色分析,输入一个颜 色,分析其各属性paletton:相当 好用的选色工具,还可以看效果


  • 访问地址
    • 用手机看直接点这里访问(也可以打开调试器看看效果)
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)