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

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

  •  4
     
  •   zazalu · 31 天前 · 1227 次点击
    这是一个创建于 31 天前的主题,其中的信息可能已经有所发展或是发生改变。
    [效果如下网页所示] :
    https://christmasexperiments.com/about

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

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

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

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

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

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

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

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

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

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

    故发此问题来求助

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