这前端效果是不是有点逆天了 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dw2693734d
V2EX    前端开发

这前端效果是不是有点逆天了

  •  
  •   dw2693734d 2023-11-23 10:09:22 +08:00 10818 次点击
    这是一个创建于 686 天前的主题,其中的信息可能已经有所发展或是发生改变。
    68 条回复    2023-11-25 08:48:02 +08:00
    wf18321589792
        1
    wf18321589792  
       2023-11-23 10:16:49 +08:00
    挺好玩的,但是没法用在工作中
    doco
        2
    doco  
       2023-11-23 10:20:29 +08:00
    好奇怎么实现的
    vk4LNh8gE08SBd9V
        3
    vk4LNh8gE08SBd9V  
       2023-11-23 10:24:04 +08:00
    厚礼谢特
    Jinyang7
        4
    Jinyang7  
       2023-11-23 10:25:13 +08:00
    牛啊,两个页面竟然能交互
    justfindu
        5
    justfindu  
       2023-11-23 10:27:34 +08:00
    wweerrgtc
        6
    wweerrgtc  
       2023-11-23 10:27:56 +08:00
    大佬就是大佬 把我看湿了

    好奇三个页面会是什么样
    oxykr
        7
    oxykr  
       2023-11-23 10:29:10 +08:00
    好玩
    digimoon
        8
    digimoon  
       2023-11-23 10:32:23 +08:00
    这个咋弄的?
    QUC062IzY3M1Y6dg
        9
    QUC062IzY3M1Y6dg  
       2023-11-23 10:39:07 +08:00
    卧槽,有没有源码想去学习一下
    labubu
        10
    labubu  
       2023-11-23 10:40:44 +08:00
    逆天
    wsli10
        11
    wsli10  
       2023-11-23 10:42:35 +08:00   1
    > window.getScreenDetails() + localStorage

    博主已经在评论区回复了实现方法:getScreenDetails 获取位置信息,存在 localStorage 里,然后通过监听 storage 事件通信。

    创意无敌
    WoneFrank
        12
    WoneFrank  
       2023-11-23 10:44:10 +08:00
    厚礼蟹啊
    InDom
        13
    InDom  
       2023-11-23 10:45:36 +08:00
    底层原理不难,但是这个创意与效果绝对无敌!
    linch97
        14
    linch97  
       2023-11-23 10:52:27 +08:00
    在别的地方见过一个相似的实现,能跨多个窗口拖动一个矩形,不过是用了 BroadcastChannel 实现的
    whosesmile
        15
    whosesmile  
       2023-11-23 10:52:27 +08:00
    不追前沿很多年了,头一次知道 storage event 。
    我最开始想的是页面计时轮训,拿到 screen 信息通过服务器做了中转,是我想复杂了,这个效果也挺炫酷的,应该就是数学公式绘图,但是会了不难,难了那是真不会...
    xudashan
        16
    xudashan  
       2023-11-23 10:54:24 +08:00
    好酷炫啊
    wyhooo
        17
    wyhooo  
       2023-11-23 10:58:48 +08:00   1
    原理想到了没错,但是这效果实现不出来。。。
    k9982874
        18
    k9982874  
       2023-11-23 11:03:04 +08:00   14
    这就和以前流行的浏览器背景跟随鼠标位置做水波纹或其它特效变换一样
    开发:OHHHHHHHHHHH ,这真 TM 酷炫
    用户:晃死了,真 TM 大沙皮
    0x663
        19
    0x663  
       2023-11-23 11:07:52 +08:00
    至此,已成艺术
    catch
        20
    catch  
       2023-11-23 11:08:07 +08:00 via Android
    6
    AntiEoom
        21
    AntiEoom  
       2023-11-23 11:12:32 +08:00
    厚礼谢!!!好酷
    NoString
        22
    NoString  
       2023-11-23 11:34:29 +08:00
    牛逼嗷
    crazyTanuki
        23
    crazyTanuki  
       2023-11-23 11:42:59 +08:00
    学习了!
    Leeeeex
        24
    Leeeeex  
    PRO
       2023-11-23 11:46:13 +08:00
    卧槽 好帅啊
    ochatokori
        25
    ochatokori  
       2023-11-23 12:00:30 +08:00 via Android
    技术原理我都会,但是我做不出来(
    Leonard
        26
    Leonard  
       2023-11-23 12:03:56 +08:00 via iPhone
    确实炫酷
    liuzhaowei55
        27
    liuzhaowei55  
       2023-11-23 12:10:15 +08:00 via Android
    抖音有类似效果的教程,搜:屏幕坐标和窗口通信
    原理不复杂,但做出这种效果就很炸裂
    topqrh
        28
    topqrh  
       2023-11-23 12:18:36 +08:00 via Android
    贼炫酷
    KMpAn8Obw1QhPoEP
        29
    KMpAn8Obw1QhPoEP  
       2023-11-23 12:25:56 +08:00 via Android   1
    这才是前端!!! Make the Frontend Great Again!!!
    anjingdexiaocai
        30
    anjingdexiaocai  
       2023-11-23 13:04:11 +08:00 via Android
    厉害
    x86
        31
    x86  
       2023-11-23 13:07:17 +08:00
    主要是这交互效果
    duanxianze
        32
    duanxianze  
       2023-11-23 13:10:39 +08:00
    创意无敌
    pianjiao
        33
    pianjiao  
       2023-11-23 13:14:34 +08:00
    真骚啊
    shui14
        34
    shui14  
       2023-11-23 13:16:34 +08:00
    创意太顶了,不得不佩服,今年还有个手表宣传页、炒币宣传页、汽车比赛的宣传页创意厉害,避嫌打广告就不贴地址了
    这些工作更偏向于 TA ,有想法又有开发能力
    xiangyuecn
        35
    xiangyuecn  
       2023-11-23 13:26:52 +08:00
    告诉大家一个秘密,只要你不嫌丑,ie6 也能做的 仅 safari 不支持,因为这货连 ie6 都不如
    MajestySolor
        36
    MajestySolor  
       2023-11-23 13:47:15 +08:00
    刚开始一个窗口的时候我想说,就这?
    第二个窗口出现时我才知道终究是我肤浅了!
    43n5Z6GyW39943pj
        37
    43n5Z6GyW39943pj  
       2023-11-23 14:03:15 +08:00
    这辈子都玩不明白 css
    LavaC
        38
    LavaC  
       2023-11-23 14:15:08 +08:00
    @MorJS 不用玩明白,因为这也不是 css
    me1onsoda
       39
    me1onsoda  
       2023-11-23 14:43:13 +08:00
    逆天。
    感觉已经不是前端的范畴了,计算机图形学大佬
    1016
        40
    1016  
       2023-11-23 14:47:24 +08:00
    有源码吗?有的话跟我说一下 学习学习
    mskumiko
        41
    mskumiko  
       2023-11-23 14:47:44 +08:00
    好帅气!
    LandCruiser
        42
    LandCruiser  
       2023-11-23 14:51:25 +08:00 via iPhone
    难点是通过计算让两个球之间的突触完美融合。两个窗口通信不是关键。
    wuxidixi
        43
    wuxidixi  
       2023-11-23 14:56:18 +08:00
    很有创意
    zljklang
        44
    zljklang  
       2023-11-23 14:57:27 +08:00
    有源码吗
    bianhui
        45
    bianhui  
       2023-11-23 15:12:47 +08:00
    虽然我打不开,但是从你们评论猜测一下。很早的浏览器就支持页面通讯了。忘了叫啥 api 了。大概就是两个页面可以相互通讯原生 api
    cxz2998
        46
    cxz2998  
       2023-11-23 15:41:47 +08:00
    这也太酷炫了
    Leon821
        47
    Leon821  
       2023-11-23 15:53:32 +08:00
    泰裤辣
    Guidoo
        48
    Guidoo  
       2023-11-23 16:03:13 +08:00
    threejs
    webgodliu
        49
    webgodliu  
       2023-11-23 16:03:32 +08:00
    jesus christ!湿了:)
    villivateur
        50
    villivateur  
       2023-11-23 16:12:21 +08:00
    不会写,但我觉得这东西多来几个会把用户显卡干报废
    TangYuSen
        51
    TangYuSen  
       2023-11-23 16:41:18 +08:00
    厚礼谢特
    roofdocs
        53
    roofdocs  
       2023-11-23 17:50:49 +08:00
    纯炫酷但实际上没有卵用
    hgc81538
        54
    hgc81538  
       2023-11-23 17:59:57 +08:00
    @344457769 不怕被刷流量? 例如 https://v2ex.com/t/993823
    344457769
        55
    344457769  
       2023-11-23 18:02:12 +08:00
    @hgc81538 不怕,不是我的。这个网站提供的,开发者也在 V2EX 有账号,估计是他 hack 的不知道谁家的。

    https://www.ikunpan.com/upload
    HeHeDaGe
        56
    HeHeDaGe  
       2023-11-23 19:14:47 +08:00
    Guidoo
        57
    Guidoo  
       2023-11-23 20:11:44 +08:00
    midstream
        58
    midstream  
       2023-11-23 20:45:47 +08:00
    得最痛快的一次
    Fx8m
        59
    Fx8m  
       2023-11-23 20:53:10 +08:00
    看似很难,实际上真的很难
    rioshikelong121
        60
    rioshikelong121  
       2023-11-23 21:09:04 +08:00
    搞可视化的就是容易传播。storage event 用来做跨页面同域通信已经是个很成熟的方案了。主要是和可视化结合起来就很有效果
    bQ3u9RAQt4125PUK
        61
    bQ3u9RAQt4125PUK  
       2023-11-24 00:12:54 +08:00
    @wf18321589792 再想想,真的没法么 :)
    Desiree
        62
    Desiree  
       2023-11-24 02:43:14 +08:00
    泰裤辣,学到了
    a132811
        63
    a132811  
       2023-11-24 03:10:20 +08:00
    还有几个也挺有创意的:

    地址栏贪吃蛇
    纯 css 打地鼠

    不过我觉得最神的是 jslinux/jswindows
    Rorysky
        64
    Rorysky  
       2023-11-24 09:55:57 +08:00
    炸裂
    gitignore
        65
    gitignore  
       2023-11-24 09:56:19 +08:00
    快下沉,千万别给产品经理看到
    Jaeger
        66
    Jaeger  
       2023-11-24 10:01:28 +08:00
    这是魔法吧
    mmdi
        67
    mmdi  
       2023-11-24 11:55:45 +08:00
    创意很好
    McCall2887
        68
    McCall2887  
       2023-11-25 08:48:02 +08:00
    真不错,牛逼!!!
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     871 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 38ms UTC 21:14 PVG 05:14 LAX 14:14 JFK 17:14
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86