首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
V2EX  ›  问与答

有大神知道这样的公众号排版黑科技是怎么实现的吗

  •  1
     
  •   s1louw · 22 天前 · 1832 次点击

    小白第一次发,工作上经常写推文,想玩点不一样的,类似这种:

    https://mp.weixin.qq.com/s/TZOxpeSHMagNRCdKHlJ4_Q

    能看出来是三张图,其中一张是透明的,我目前只学完了 HTML,想问如果要达到这种效果,我应该学 css 里面的哪些知识呢,多谢~

    16 回复  |  直到 2019-10-21 13:30:49 +08:00
        1
    ayase252   22 天前 via iPhone   ♥ 2
    线性渐变?linear-gradient
        2
    iblessyou   22 天前   ♥ 1
    学完 HTML 那简单的 CSS 应该也知道些
    用浏览器打开看代码 不懂的搜不就行了
        3
    jwenwang   22 天前   ♥ 1
    svg 实现的
        4
    qiayue   22 天前   ♥ 1
    svg
        5
    s1louw   22 天前
    @ayase252
    每张图之间过度应该是用 ps 做的把,我觉得,
        6
    s1louw   22 天前
    @iblessyou
    ok,我去试试,css 选择器和文本已经熟了
        7
    7gugu   22 天前 via Android   ♥ 1
    svg,微信好像可以在图片上面覆盖一个 svg,有一些公众号,做那种滚动切换场景就是同一个原理
        8
    rogwan   22 天前 via iPhone   ♥ 1
    可以看看网易王三三的公众号,类似玩法很多。最后总结是编辑这种互动网文体力撑不住,apple 这篇文章的制作,写篇这种文章成本太高,一般自媒体人吃不消
        9
    s1louw   22 天前
    @rogwan
    感谢!确实很有意思的公众号,可以借鉴很多,确实时间成本要花费更多,但是我觉得或许能够找到固定的模式,可以一直套用
        10
    saltedFish666   22 天前
    那个是图片吧
        11
    multiple1902   22 天前   ♥ 1
    将文本内容做成位图且不标注替代文本 (alternative text)。

    这不是什么黑科技,而是将有视觉障碍的人拒之门外的技术滥用。
        12
    s1louw   22 天前 via Android
    @multiple1902 确实值得思考,现在公众号很多都采用长图拼接,上司也是要求我用 ps 排班推文
        13
    lamada   22 天前
    记得看看 mix-blend-mode 分分钟让你用上酷炫的效果,很好用哦
        14
    by73   22 天前   ♥ 1
    大概看了下源码,是图片 + gif + mix-blend-mode,貌似没有找到 svg 的影子。中间的渐变则是直接用新图片代替(应该是图片与图片之间的渐变比较难用纯 css 做到)。上滑是靠 overflow + float: left 实现的。这里面涉及的 css 排版还是比较多的,建议开着开发者工具慢慢调试看直观效果,遇到哪里有问题就搜。而且推文对图片处理的要求比较多,因为只能靠 css,但 css 的图片处理能力不强,所以可能还需要去看一下图片相关的内容。当然只是建议,步子还是不要跨太大了 emm

    跑个题,apple.com 前端感觉有很多奇奇怪怪的点子,比如 apple musice 的页面用过 sticky ; ipad pro 用过横向滚动(这个当时研究了一天,发现原理居然是搞一个正方形的页面,绑定垂直滚动事件让它直接控制水平,这解决方案真的强,直接搞定 smooth scroll )。要是微信推文能用 js,apple 绝对能搞出花来。当然楼上所述的视觉障碍也是个问题,但考虑到这是一篇推文,而且微信自己也没有任何无障碍的东西。。唉。
        15
    s1louw   22 天前
    @lamada
    嗯嗯,看了一下,类似 ps 的图层叠加,有时间研究一下
        16
    s1louw   22 天前
    @by73
    因为我在工作中经常用到 i 排版和秀米这种公众号编辑器,虽然也可以套用模板实现一些效果,但用起来还是奇葩。只能自己研究,网上也没有前车之鉴,大概总结了一些公众号使用的技术也就是多图叠加滑动+svg 点击交互,图片处理和排版也是重点,ps 我还算熟练,就是前端技术上卡住了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4063 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 29ms · UTC 07:49 · PVG 15:49 · LAX 23:49 · JFK 02:49
    ♥ Do have faith in what you're doing.