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区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
随机推荐
- [转]PostgreSQL数据类型
第六章 数据类型 6.1概述 PostgreSQL 提供了丰富的数据类型.用户可以使用 CREATE TYPE 命令在数据库中创建新的数据类型.PostgreSQL 的数据类型被分为四种,分别是基本 ...
- python学习-抓取知乎图片
#!/bin/usr/env python3 __author__ = 'nxz' """ 抓取知乎图片webdriver Chromedriver驱动需要安装,并指定d ...
- shell脚本之不同系统上ftp交互使用
场景:当公司将有文件要自动将ubuntu系统的文件要上传到windows上面,或者windows上的文件要下载到ubuntu上面,尤其是像什么日志啊,编译结果啊,测试结果啊等等,做个备份或者做分析处理 ...
- requests补充
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中,POST 一般用来向服务端提交数据,本文 ...
- java 模拟浏览器爬虫
- 如何明确区分代码中的1和l
如poly1d 单独将其复制到记事本,然后按ctrl+F,输入要查找的对象,数字1或者小写字母l,找到的对象会已高亮表示,所以就可以确定了高亮表示的是数字1还是字母l.
- springboot引用dubbo的方式
1.以此种接口依赖的方式 这种相当于将其他模块的服务先拿过来dubbo自己在本模块中进行注入,此时可以直接用Spring的@Autowired注解引用 ,这种情况下本模块的扫描dubbo是所引用的模块 ...
- Shell编程-条件测试 | 基础篇
什么是Shell Shell是一个命令解释器,它会解释并执行命令行提示符下输入的命令.除此之外,Shell还有另一个功能,如果要执行多条命令,它可以将这组命令存放在一个文件中,然后可以像执行Linux ...
- 更新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 ...
- 2019工作计划idea
2019.2.24 工作需求: 汇总 2008-2018年 销售订单数据; 分类历史订单数据, 并可能采取方法进行预测(预测只是一种行为不代表结果) 目前已知条件: 订单生产周期; 45天(标准天数) ...