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区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
随机推荐
- java常用类:1。包装类(以Integer类为例)2.String类 3.StringBuffer
包装类 把八大基本数据类型封装到一个类中,并提供属性和方法,更方便的操作基本数据类型. 包装类的出现并不是用于取代基本数据类型,也取代不了. 包装类位于java.lang包中. Number 类 N ...
- SP283 NAPTIME - Naptime
SP283 NAPTIME - Naptime 题意: 在某个星球上,一天由N小时构成.我们称0-1点为第一个小时,1-2点为第二个小时,以此类推.在第i个小时睡觉能恢复Ui点体力.在这座星球上住着一 ...
- Fiddler对Android应用进行抓包
一:面对安卓包的时候进行分析问题 首先下载fiddler工具进行安装. 使用:第一步:启动Fiddler,打开菜单栏中的 Tools > Fiddler Options,打开“Fiddler O ...
- 2018-2019-2 20165314《网络对抗技术》Exp1 PC平台逆向破解
实践目的 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShel ...
- WIN10远程连接,报错身份验证错误,要求的函数不受支持
我电脑是win10系统,我办公时经常需要远程连接其他电脑.突然间远程连接时就开始报错以下错误,导致无法远程连接. 这可能是由于CredSSP加密Oracle修正. 解决方法: 运行 gpedit.ms ...
- .net基础学java系列(七)赶鸭子上架看项目代码
项目用到的技术栈 序列化 com.alibaba.fastjson.JSON; https://github.com/alibaba/fastjson/wiki/Quick-Start-CN 日志 l ...
- Flink消费Kafka数据并把实时计算的结果导入到Redis
1. 完成的场景 在很多大数据场景下,要求数据形成数据流的形式进行计算和存储.上篇博客介绍了Flink消费Kafka数据实现Wordcount计算,这篇博客需要完成的是将实时计算的结果写到redis. ...
- Docker使用Dockerfile构建Asp.Net Core镜像
FROM microsoft/dotnet:2.2-aspnetcore-runtime AS base WORKDIR /app EXPOSE 80 FROM microsoft/dotnet:2. ...
- C# Aspose.Cells 如何设置单元格样式
//Instantiating a Workbook object Workbook workbook = new Workbook(); //Adding a new worksheet to th ...
- [python][matlab]使用python调用matlab程序
问题引入 在做实验的时候,需要用到python和matlab工具来进行不同的处理,比如在run神经网络的时候,需要使用pytorch框架得到网络的各个参数,在得到参数后需要使用matlab进行聚类规划 ...