查看效果请访问: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. python基础--absl.flags

    之前在tensorflow的mnist例程中看到了使用 absl.flags的方法来载入和解析参数的,出于学习的目的,就自己试验了一下, 代码如下: # *_*coding:utf-8 *_* # a ...

  2. 笔记,ajax,事件绑定,序列化

    1. Python序列化 字符串 = json.dumps(对象) 对象->字符串 对象 = json.loads(字符串) 字符串->对象 JavaScript: 字符串 = JSON. ...

  3. Git客户端(TortoiseGit)基本使用详解

    1. 环境安装 Git最新版下载地址:https://gitforwindows.org/ TortoiseGit,Git客户端,32/64位最新版及对应的语言包下载地址:https://tortoi ...

  4. 3D 散点图的绘制

    一般情况下,我们用到最多的是axes3d() 中的axes3d.Axes3D()类,AxesD() 类下面存在散点图,线性图,柱状图,曲线图等各种制图方式. 采用matplotlib 生成散点图. 一 ...

  5. 如何在Django中配置MySQL数据库

    直接上图 在项目中直接找到settings 文件 第一步       原始Django自带数据库 第二步将配置改成MySQL的数据 第三步  在__init__文件中告知Django使用MySQL数据 ...

  6. 记录vue项目上线遇到的一些问题

    1. 静态资源路径不对,在开发模式下正常,打包到服务器上的时候,发现静态资源全部请求不到 原因:开发模式下,本地静态服务器直接从项目目录直接起的,跟static是同目录,写绝对路径没问题,直接loca ...

  7. 网络远程唤醒 WOL Magic Packet

    Magic Packet Magic Packet白皮书介绍: The basic technical details of Magic Packet Technologyare simple and ...

  8. Ubuntu 下使用 Nginx 部署 .NET Core 2.0 网站

    前言 本文介绍如何在 Ubuntu 16.04 服务器上安装 .NET Core 2.0 SDK.创建项目与发布,并使用 Nginx 部署 .NET Core 2.0 Web 项目. 安装 .NET ...

  9. vim 使用学习操作

    1 跳转 命令 作用 h 光标向左移动 l 光标向右移动 j 光标向上移动 k 光标向下移动 w 移动光标到下一个单词开头. e 移动光标到下一个单词结尾 b 移动光标到上一个单词. 0 移动光标到本 ...

  10. 2018-2019-2 20165319 《网络对抗技术》 Exp5:MSF基础应用

    实验内容 metasploit中有六个模块分别是 渗透攻击模块(Exploit Modules) 辅助模块(Auxiliary Modules 攻击载荷(Payload Modules) 空字段模块( ...