three.js的wave特效(ivew官网首页波浪特效实现)
查看效果请访问: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官网首页波浪特效实现)的更多相关文章
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
- [WPF] 抄抄超强的苹果官网滚动文字特效实现
1. 前言 今天 ChokCoco 大佬发布了一篇博客 超强的苹果官网滚动文字特效实现,iPhone 我是买不起的,但不妨碍我对抄特效感兴趣,正好我这周安排的工作已经完成了,于是有空练练手实现了一个 ...
- React官网首页demo(单文件实现版)
本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...
- 针对石家庄铁道大学官网首页的UI分析
身为一名光荣的铁大铮铮学子,我对铁大的网站首页非常的情有独钟,下面我就石家庄铁道大学的官网首页进行UI分析: 1.在首页最醒目的地方赫然写着石家庄铁道大学七个大字,让人一眼就豁然开朗. 2.网站有EN ...
- Axure实现vcg官网首页原型图
W240第二天第三天 Axure的简单使用: 作业实现:vcg官网首页原型图 帮助文档基础篇:原型图基础之axure线框图设计 导航栏设计: 添加通用母版header 导航栏设计注意: 鼠标移动到下面 ...
- Threejs实现滴滴官网首页地球动画
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- Netty官网首页(翻译)
官网:https://netty.io/ Netty是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. Netty是一个NIO客户端服务器框架,可以快速轻松地开发协议 ...
- 开发人员如何从官网首页进入下载JDK历史版本
就是下面的这篇文章,好心好意提交到百度经验,希望给需要的人一个帮助,结果被拒,说有广告.呵呵,oracle和java真的需要在你百度上面做广告吗?倒是能理解,可能是外行人做的,只是看到链接就拒了,但是 ...
- 利用HTML和CSS设计一个静态的“小米商城官网首页”
一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
随机推荐
- Zypper常用命令
Zypper是OpenSUSE和企业版SUSE中软件包管理器ZYpp的命令行接口. 主要用于:1.管理软件包:zypper可用来安装.删除.更新和查询本地或远程的软件包.2.管理仓库:zypper可用 ...
- form 表单提交数据 不跳转解决办法
1. 利用隐藏的 iframe —— 只需form的 target 指向iframe的name:可不用form 的action默认提交,自己写ajax 提交数据. <html> < ...
- PHP7.* AES的加密解密
之前写过一篇: PHP AES的加密解密-----[弃用] 使用的是php5.*之前的mcrypt_decrypt 函数,该函数已经在php7.1后弃用了,上马的是openssl的openssl_en ...
- INotifyPropertyChanged 接口 CallerMemberName属性
调用方信息 使用调用方信息属性,可以获取关于调用方的信息传递给方法. 可以获取源代码.行号在源代码和调用方的成员名称的文件路径. 此信息用于跟踪,调试和创建诊断工具非常有用.若要获取此信息,则使用适用 ...
- jdk1.7更新visualvm插件
所有的插件全部更新到hithub上 https://visualvm.github.io/pluginscenters.html 然后,在根据不同的JDK版本选择不同的插件地址.更改VisualVM插 ...
- Luogu P3381 (模板题) 最小费用最大流
<题目链接> 题目大意: 给定一张图,给定条边的容量和单位流量费用,并且给定源点和汇点.问你从源点到汇点的最带流和在流量最大的情况下的最小费用. 解题分析: 最小费用最大流果题. 下面的是 ...
- ELK logstash geoip值为空故障排查
首先我们用的是elasticsearch+kibana+logstash+filebeat 客户端filebeat收集日志后经过服务端logstash规则处理后储存到elasticsearch中,在k ...
- Core Location实现定位
2013/4/22记录: 注意:如非必要,不应该多次轮询位置信息i 使用时,可根据需要制定精度,通过仔细制定所需的绝对最低精度级别,可以纺织不必要的电池消耗. 导入:CoreLocation.f ...
- 动态规划——Frog Jump
题目大意就是,给定一个数组,数组中数字从小到大排列,第一个元素一定是0,青蛙的初始位置就在0,后面依次从小到大排列,表示第几个石子,青蛙只有跳到最后一个石子上才算成功过河,而且青蛙第一次从0位置只能跳 ...
- DW1000 用户手册中文版 第5章 媒体访问控制(帧过滤)
由于已经在wode中排版无法直接复制到博客中,故本节博客发布使用了图片. PDF下载 http://bphero.com.cn/forum.php?mod=viewthread&tid=68