查看详情

新博客改造的一些有趣的技术要点

最近随着 Ghost 升级,博客主题也做了一些动效的调整,这里面有一些比较有意思的细节,可以和大家分享下。 Ghost-Theme 落地页动画衔接 从首页列表点击进去,实际上是比较简单的 transition 过渡,主要是利用透明度变化和背景图片的放大缩小来完成的。 .cover, .overlay{ content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: #000; background-position: center center; opacity: .2; background-size: cover; } .cover{ opacity: 0; transition: opacity 1.5s, transform 2s; transition-timing-function: cubic-bezier(0.5, 0, 0.2, 1); background-color: 详情 »

查看详情

使用 JavaScript 探测网络状态

同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96 在某些情况下,我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后,我们需要执行一些代码。 naviagtor.onLine naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。 navigator.onLine caniuse figures 而在比较老的 IE8 浏览器,我们小使用 online 事件进行监听。 document.addEventListenner(‘online’, () => { // todo }); document.addEventListenner(‘offline’, () => { // todo }) 网络心跳检测 然后很早的时候,很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHR 和 Image 发送心跳轮询来判断是否还处在网络连接的状态。 const pingUrl = ‘https://ipv4.icanhazip.com'; 详情 »