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区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
随机推荐
- python基础--absl.flags
之前在tensorflow的mnist例程中看到了使用 absl.flags的方法来载入和解析参数的,出于学习的目的,就自己试验了一下, 代码如下: # *_*coding:utf-8 *_* # a ...
- 笔记,ajax,事件绑定,序列化
1. Python序列化 字符串 = json.dumps(对象) 对象->字符串 对象 = json.loads(字符串) 字符串->对象 JavaScript: 字符串 = JSON. ...
- Git客户端(TortoiseGit)基本使用详解
1. 环境安装 Git最新版下载地址:https://gitforwindows.org/ TortoiseGit,Git客户端,32/64位最新版及对应的语言包下载地址:https://tortoi ...
- 3D 散点图的绘制
一般情况下,我们用到最多的是axes3d() 中的axes3d.Axes3D()类,AxesD() 类下面存在散点图,线性图,柱状图,曲线图等各种制图方式. 采用matplotlib 生成散点图. 一 ...
- 如何在Django中配置MySQL数据库
直接上图 在项目中直接找到settings 文件 第一步 原始Django自带数据库 第二步将配置改成MySQL的数据 第三步 在__init__文件中告知Django使用MySQL数据 ...
- 记录vue项目上线遇到的一些问题
1. 静态资源路径不对,在开发模式下正常,打包到服务器上的时候,发现静态资源全部请求不到 原因:开发模式下,本地静态服务器直接从项目目录直接起的,跟static是同目录,写绝对路径没问题,直接loca ...
- 网络远程唤醒 WOL Magic Packet
Magic Packet Magic Packet白皮书介绍: The basic technical details of Magic Packet Technologyare simple and ...
- Ubuntu 下使用 Nginx 部署 .NET Core 2.0 网站
前言 本文介绍如何在 Ubuntu 16.04 服务器上安装 .NET Core 2.0 SDK.创建项目与发布,并使用 Nginx 部署 .NET Core 2.0 Web 项目. 安装 .NET ...
- vim 使用学习操作
1 跳转 命令 作用 h 光标向左移动 l 光标向右移动 j 光标向上移动 k 光标向下移动 w 移动光标到下一个单词开头. e 移动光标到下一个单词结尾 b 移动光标到上一个单词. 0 移动光标到本 ...
- 2018-2019-2 20165319 《网络对抗技术》 Exp5:MSF基础应用
实验内容 metasploit中有六个模块分别是 渗透攻击模块(Exploit Modules) 辅助模块(Auxiliary Modules 攻击载荷(Payload Modules) 空字段模块( ...