V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zazalu
V2EX  ›  JavaScript

请教实现此网页的特效应该掌握的技术栈有哪些

  •  4
     
  •   zazalu · 2019-06-21 11:36:12 +08:00 · 3550 次点击
    这是一个创建于 1981 天前的主题,其中的信息可能已经有所发展或是发生改变。
    [效果如下网页所示] :
    https://christmasexperiments.com/about

    [我的问题] :
    1. 在前端工程师圈中,这种效果的术语(或者说术语集)应该叫什么?

    我目前只知道是 Three.js ,WebGL,从开发者工具的 resource 目录分析出,还用到了 Node.js

    但是我没法区分真正实现这种效果需要哪些技术就够用了,希望前辈们指点

    2. 这种效果是否可以通过简单的移植方式,移植到一些静态 html 页面上

    我以前使用某类 js 特效的时候,往往直接引入一个 js 文件,然后指定一个 div 去初始化这个特效,就完事。

    但是我发现这次不同,这个效果的实现貌似背后的依赖关系比较复杂,所以我猜测其无法进行简单的移植。

    如果无法简单移植,那么就回归了正题,我该掌握哪些技术栈去自我实现这个特效。

    希望可以得到各位前辈的帮助。

    [尾]
    我问此问题前使用了多次 google 来希望可以得到不错的答案。但是也许是我没有 get 到关键字,所以毫无收获。

    在 V2EX 中也没有类似问题的回答。

    故发此问题来求助

    一名野生程序员敬上。
    第 1 条附言  ·  2019-06-21 15:00:31 +08:00
    请在 pc 端浏览器
    第 2 条附言  ·  2019-06-21 15:00:56 +08:00
    查看
    11 条回复    2019-06-22 11:49:58 +08:00
    ztmqg
        1
    ztmqg  
       2019-06-21 11:52:58 +08:00   ❤️ 1
    parallax.js
    momocraft
        2
    momocraft  
       2019-06-21 11:58:27 +08:00
    先学图形学...然后你才知道 3.js 能做什么,css 3d transform 能做什么
    agdhole
        3
    agdhole  
       2019-06-21 12:06:12 +08:00
    原生 js + css 能做,不过性能不好优化
    davin
        4
    davin  
       2019-06-21 12:11:46 +08:00
    一般叫做视差滚动吧
    dixeran
        5
    dixeran  
       2019-06-21 12:12:33 +08:00 via Android
    css translate3d
    wunonglin
        6
    wunonglin  
       2019-06-21 12:16:46 +08:00
    这种用 js 监听鼠标移动,然后设置 transform 就行了,不过是不很建议用 transform,直接上 canvas 会更好,要是页面不复杂的话用什么都行
    zazalu
        7
    zazalu  
    OP
       2019-06-22 01:09:52 +08:00
    @davin 恩,是的,谢谢
    zazalu
        8
    zazalu  
    OP
       2019-06-22 01:10:31 +08:00
    @ztmqg 感谢,是我想要的可插拔式的 js,非常感谢!
    zazalu
        9
    zazalu  
    OP
       2019-06-22 01:12:45 +08:00
    @wunonglin 谢谢回复!你说的应该没错!不过我前端这块不熟所以不敢多言。不过一楼的答案是非常不错的一个实现方案,是我想要的东西!
    zazalu
        10
    zazalu  
    OP
       2019-06-22 01:19:42 +08:00
    总结一下:
    parallax.js 是个不错的项目,可插拔,移植简单,做到了一定的视差滚动。
    不过 https://christmasexperiments.com/about 的效果不是单纯的视差滚动,还带有一定的 3d 立体感(会感觉字体是漂浮在空中的那种感觉)不知道那是怎么实现的
    agdhole
        11
    agdhole  
       2019-06-22 11:49:58 +08:00 via Android
    @zazalu 给背景的 div 创建一个随着 transformY 向上滚动,然后字体漂浮抖动的感觉要写一个根据鼠标偏移而偏移的事件,曾经写过一个小 demo: https://codepen.io/agdholo/pen/xeOjPv
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1051 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 23:03 · PVG 07:03 · LAX 15:03 · JFK 18:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.