印刻君

我们在各大 App 活动页面，经常会看到循环播放的通知栏。那么，这种循环播放的通知栏如何实现呢？本文我会先介绍它的布局、再介绍它的逻辑，并给出完整的代码。

我最近刷微信读书时，留意到它的推荐卡片会翻转，这个效果该怎么做呢？本文我会先介绍翻转卡片的布局、动画，再并给出完整代码，最后做一个总结。

最近朋友问我，多点 App（物美超市 App）商品列表的上拉回弹效果，用 H5 怎么实现？思索过后，我发现这已经不是普通的原生滚动了，必须要出重拳，得用 CSS 的 translate 模拟一套滚动。

电商应用中我们常常看到抽奖转盘活动，比如拼多多的「抽奖大转盘」：点击中央的抽奖按钮，转盘开始旋转，一段时间后指针停止在奖品上。 这个效果如果用 H5 应该怎么实现呢？

瀑布流布局，我们既能在小红书这类图文网站看到，也能在拼多多、京东和淘宝这类电商网站看到。那么，同样是瀑布流，两种实现方式的优点、缺点是什么呢？如果想用 H5 实现瀑布流，应该用哪一种方案呢？

百亿补贴图片加载非常快，为什么呢？因为百亿补贴先加载了一张模糊小图、再加载了一张清晰大图，用户很难感知到模糊到清晰的过程，误以为图片加载很快。接下来我会先给出证据、再分析原理、并提供关键代码。

最近我在做 H5、小程序的性能优化，其中一项优化，是把 H5、小程序的 jpg、png 图片转换为 webp 格式的图片。我需要判断 H5、小程序的环境是否支持 webp 图片。

23 年 11 月末，拼多多市值超过了阿里。我想写一篇《百亿补贴为什么用 H5》，没有动笔；24 年新年，我想写《新的一年，H5 会如何发展》，也没有动笔。现在，我决定把两篇文章合为一篇，与大家分享。

上滑加载（触底加载）是 H5 常见的功能，今天我们来看下如何实现。 效果如下：分页请求开始前，列表滚动，加载动画出现在屏幕中；分页请求过程中，加载动画一直旋转；分页请求完成后，加载动画被挤出视口。