查看效果请访问:https://521lbx.github.io/Web3D/index.html
公司的好几个vue项目都是用ivew作为UI框架,所以ivew官网时不时就得逛一圈。每一次进首页都会被首页的波浪特效惊艳到,一时手痒,就有个这篇随笔!
猜了猜应该是使用three.js写的,就上three.js官网上逛荡逛荡,果不其然,官网有个wave的特效,但要做成ivew官网的样子,还是需要做些功夫的。

首先是点点的颜色(官网例子是白色的),然后是特效的区域(官网是满屏),最后是设置特效只在波浪上层有效(官网的特效波浪是可以翻过来的,好尴尬!!!)
点点的颜色可以在初始化中设置,如下图:

特效区域直接设置容器的宽度、高度即可。

设置特效只在波浪上层有效,其实只要设置鼠标左右滑动时将mouseY设置在合适的位置,并在鼠标移动时保持不变。

代码详见:https://github.com/521lbx/Web3D

three.js的wave特效(ivew官网首页波浪特效实现)的更多相关文章

  1. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  2. [WPF] 抄抄超强的苹果官网滚动文字特效实现

    1. 前言 今天 ChokCoco 大佬发布了一篇博客 超强的苹果官网滚动文字特效实现,iPhone 我是买不起的,但不妨碍我对抄特效感兴趣,正好我这周安排的工作已经完成了,于是有空练练手实现了一个 ...

  3. React官网首页demo(单文件实现版)

    本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...

  4. 针对石家庄铁道大学官网首页的UI分析

    身为一名光荣的铁大铮铮学子,我对铁大的网站首页非常的情有独钟,下面我就石家庄铁道大学的官网首页进行UI分析: 1.在首页最醒目的地方赫然写着石家庄铁道大学七个大字,让人一眼就豁然开朗. 2.网站有EN ...

  5. Axure实现vcg官网首页原型图

    W240第二天第三天 Axure的简单使用: 作业实现:vcg官网首页原型图 帮助文档基础篇:原型图基础之axure线框图设计 导航栏设计: 添加通用母版header 导航栏设计注意: 鼠标移动到下面 ...

  6. Threejs实现滴滴官网首页地球动画

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  7. Netty官网首页(翻译)

    官网:https://netty.io/ Netty是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. Netty是一个NIO客户端服务器框架,可以快速轻松地开发协议 ...

  8. 开发人员如何从官网首页进入下载JDK历史版本

    就是下面的这篇文章,好心好意提交到百度经验,希望给需要的人一个帮助,结果被拒,说有广告.呵呵,oracle和java真的需要在你百度上面做广告吗?倒是能理解,可能是外行人做的,只是看到链接就拒了,但是 ...

  9. 利用HTML和CSS设计一个静态的“小米商城官网首页”

    一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...

随机推荐

  1. [转]PostgreSQL数据类型

    第六章  数据类型 6.1概述 PostgreSQL 提供了丰富的数据类型.用户可以使用 CREATE TYPE 命令在数据库中创建新的数据类型.PostgreSQL 的数据类型被分为四种,分别是基本 ...

  2. python学习-抓取知乎图片

    #!/bin/usr/env python3 __author__ = 'nxz' """ 抓取知乎图片webdriver Chromedriver驱动需要安装,并指定d ...

  3. shell脚本之不同系统上ftp交互使用

    场景:当公司将有文件要自动将ubuntu系统的文件要上传到windows上面,或者windows上的文件要下载到ubuntu上面,尤其是像什么日志啊,编译结果啊,测试结果啊等等,做个备份或者做分析处理 ...

  4. requests补充

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中,POST 一般用来向服务端提交数据,本文 ...

  5. java 模拟浏览器爬虫

  6. 如何明确区分代码中的1和l

    如poly1d 单独将其复制到记事本,然后按ctrl+F,输入要查找的对象,数字1或者小写字母l,找到的对象会已高亮表示,所以就可以确定了高亮表示的是数字1还是字母l.

  7. springboot引用dubbo的方式

    1.以此种接口依赖的方式 这种相当于将其他模块的服务先拿过来dubbo自己在本模块中进行注入,此时可以直接用Spring的@Autowired注解引用 ,这种情况下本模块的扫描dubbo是所引用的模块 ...

  8. Shell编程-条件测试 | 基础篇

    什么是Shell Shell是一个命令解释器,它会解释并执行命令行提示符下输入的命令.除此之外,Shell还有另一个功能,如果要执行多条命令,它可以将这组命令存放在一个文件中,然后可以像执行Linux ...

  9. 更新mysql驱动5.1-47 Generated keys not requested. You need to specify Statement.RETURN_GENERATED_KEY

    今天在更新mysql驱动后运行程序突然报如下错误: java.sql.SQLException: Generated keys not requested. You need to specify S ...

  10. 2019工作计划idea

    2019.2.24 工作需求: 汇总 2008-2018年 销售订单数据; 分类历史订单数据, 并可能采取方法进行预测(预测只是一种行为不代表结果) 目前已知条件: 订单生产周期; 45天(标准天数) ...