首页
学习
活动
专区
圈层
工具
发布

如何做一个让人闻风丧胆的H5

作为一个 UI 工程师,在这个移动互联网叱咤风云的时代,每次看到朋友圈中被分享的各种花样 H5 页面,总是心痒难耐,也想做有着酷炫动画和带感声效的 H5 呢。...3.动画如何才有代入感 ? 这个活动页面我个人最喜欢的地方就是星星砸下去的动画,感觉所有的戏份都在它身上。...还有一个教训就是,页面果然应该做一个测试一个啊QAQ。因为这个项目是重构和前端并行开发的……把伪元素改成实际 DOM 元素的时候,是怀着一颗对不起前台的心的。 3.请写好注释 ?...拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面顶部到底部都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现;或者在不影响交互的情况下,隐藏哪些元素。...还有一个方案是使用 media query 结合 rem (或百分比)完成这样的布局,不过目前 gaga 不支持 background-size 的 rem,所以要采用什么方式合成雪碧图以及如何生成新的样式

1.6K61

如何做一个让人闻风丧胆的H5 - 腾讯ISUX

作为一个 UI 工程师,在这个移动互联网叱咤风云的时代,每次看到朋友圈中被分享的各种花样 H5 页面,总是心痒难耐,也想做有着酷炫动画和带感声效的 H5 呢。...3.动画如何才有代入感 ? 这个活动页面我个人最喜欢的地方就是星星砸下去的动画,感觉所有的戏份都在它身上。...还有一个教训就是,页面果然应该做一个测试一个啊QAQ。因为这个项目是重构和前端并行开发的……把伪元素改成实际 DOM 元素的时候,是怀着一颗对不起前台的心的。 3.请写好注释 ?...拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面顶部到底部都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现;或者在不影响交互的情况下,隐藏哪些元素。...还有一个方案是使用 media query 结合 rem (或百分比)完成这样的布局,不过目前 gaga 不支持 background-size 的 rem,所以要采用什么方式合成雪碧图以及如何生成新的样式

93830
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    H5直播源码是什么?H5直播源码如何开发?

    H5直播源码是什么? H5直播也有着一套完整的直播系统,含视频录制端、视频播放端、视频服务器端。...H5直播,推流还是需要移动端或者摄像头,H5直播源码提供更多的依旧是观看,其实与传统直播系统是差不多的。 H5直播源码具有怎样的优势? 做品牌宣传的朋友都知道,H5是一个重要的表现方式。...H5直播源码研发周期较短,尤其强化了web网页的表现性能。 除了微信之外,不少浏览器都可用H5观看视频,所以相对flash而言,不需要安装插件,所以传播更快。...H5相比flash而言,对CPU及内存的占用都要低一些,所以能够有效减少卡顿及发烫的现象。 想要搭建H5直播源码,WebRTC必不可少。...H5直播源码开发中的WebRTC,主要有以下几个优点: 具有良好的通用性,几乎在任何平台都可以正常使用。

    2.7K20

    如何做一个自适应网页?

    或者在各种屏幕上都有一个较好的体验,出现了网页设计的概念,自适应的概念,也就是随着屏幕尺寸的不同能够适配各种内容 ea6ac8_8abc6421adcc4f48abe6d09cb2b995c1_mv2.gif 如何做好各种屏幕的适配工作...一个网站在设计的时候就要考虑较这些屏幕,如果针对每个版本都提供一个不同的页面,这样维护成本较高,并且比较麻烦,迭代一个需求要做几遍,大大增加项目需求的复杂度 Pasted image 20230607174648.png 概念 那如何做到同一套代码的自适应...20230606174604.png 页面上并没有展示更多的内容,反而变成了更大的字和图像,并且需要通过js计算根元素font-size的大小,或者使用媒体查询进行动态设置 实践 那既然有了上述的一些概念,我们如何做一个响应式的页面呢

    1.6K20

    H5如何与原生App通信?

    前言 为了提高开发效率,开发人员往往会使用原生app里面嵌套前端h5页面的快速开发方式,这就要涉及到h5和原生的相互调用,互相传递数据,接下来就实践项目中的交互方式做一个简单的记录分享,废话不多说,直接上正文...WKWebView重构了原有UIWebView的14个类,3个协议,性能提升的同时,赋予了开发者更加细致的配置(这些配置仅针对客户端IOS开发,对于前端H5来说,保持两种容器调用方法的一致性很重要)。...内页面滚动失效 h5向ios客户端发送消息; 在ios中,并没有现成的api让js去调用native的方法,但是UIWebView与WKWebView能够拦截h5内发起的所有网络请求。...所以我们的思路就是通过在h5内发起约定好的特定协议的网络请求,如'jsbridge://bridge2.native?...window.jsBridge.getShare()"); H5端将方法绑定在window下的对象即可,无需与IOS作区分 H5调用RN客户端 我们知道RN的webView组件实际上就是对原生容器的二次封装

    7.1K20

    简说H5与App如何通讯

    前言 现在不管是「桌面客户端」还是「移动客户端」,都会夹杂着一部分H5页面,这种混合式的应用也是我们常说的「Hybrid App」。...有兴趣的小伙伴自行百度搜索「JSBridge」的相关知识,或请教下客户端(Windows、MacOS、Android、iOS)开发的同学,看看如何桥接JS与其他编程语言之间的联系。...❝优点 ❞ H5页面交由前端进行开发,页面模块之间分开开发和维护,有效减少App的开发周期 H5页面不受限于应用商店繁琐的审核流程和冗长的等待时间,新增页面和功能、修复缺陷都可随时部署到线上 H5页面在有需要时才加载...❝缺点 ❞ 协定好H5和App之间的通讯协议,定义好全局属性和全局方法在两者之间如何调用 H5页面接入App Webview中,可能会出现很多兼容问题,需要前端和客户端多加注意 开发前需按照需求和交互进行页面划分...哪些页面归前端开发,哪些页面归客户端开发 页面出现Bug有时候很难发现是在哪个环节出错,需要前端和客户端共同调试找出问题所在(可能各抒己见,打架都有份) 通讯方式 以下代码全部基于前端(React)进行演示,客户端如何实现

    1.6K30
    领券