- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我需要像 here 中那样用液体效果实现图像变化
我有一个带有图像的简单 block 我需要在 onmouseover
中使用此效果更改此图像(到其他图像)并返回到 onmouseout
中的初始位置也使用此效果
const avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
const avatar = document.querySelector(".avatar");
avatarQuantumBreak.style.opacity = "0";
let hover = () => avatarQuantumBreak.style.opacity = "1";
let normal = () => avatarQuantumBreak.style.opacity = "0";
avatar.onmouseover = () => hover();
avatar.onmouseout = () => normal();
html , body {
height:100%;
}
.avatar {
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
position: absolute;
display: block;
text-align:center;
transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
border-radius: 50%;
display: inline-block;
width: 86%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<div class=avatar>
<span class=avatar_simple>
<img src="https://pixel.nymag.com/imgs/fashion/daily/2014/05/27/27-amber-heard.w330.h330.jpg">
</span>
<span class=avatar_quantum_break>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/05/31/31-amber-heard.w330.h330.jpg">
</span>
</div>
下面是触发液体动画的图像transition
函数
transitionNext() {
TweenMax.to(this.mat.uniforms.dispPower, 2.5, {
value: 1,
ease: Expo.easeInOut,
onUpdate: this.render,
onComplete: () => {
this.mat.uniforms.dispPower.value = 0.0
this.changeTexture()
this.render.bind(this)
this.state.animating = false
}
})
我尝试使用此功能,但这对我没有帮助。
我也尝试更改 Array
行 15 中的图像,但这也没有帮助。
this.images = [ //1
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'
]
这个函数启动了动画
listeners() {
window.addEventListener('wheel', this.nextSlide, { passive: true })
}
下一张幻灯片功能
nextSlide() {
if (this.state.animating) return
this.state.animating = true
this.transitionNext()
this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1
this.data.next = this.data.current === this.data.total ? 0 : this.data.current + 1
}
请帮忙..
最佳答案
不错的一个 - 实时 vfx 与 web 开发相结合:)
这个效果的所有魔法都是用 GLSL 着色器完成的(你可以在示例 html 的底部看到它)我在这里添加了一些评论
// next lines are input data that gpu gets form javascript
varying vec2 vUv; // uv coordinate of current pixel
uniform sampler2D texture1; // picture 1
uniform sampler2D texture2; // picture 2
uniform sampler2D disp; // noise texture
uniform float dispPower; // effect progress
uniform float intensity; // effect scale
void main() {
vec2 uv = vUv;
vec4 disp = texture2D(disp, uv); // read noise texture
vec2 dispVec = vec2(disp.x, disp.y); // get red and green values
// calculate uv displacement
vec2 distPos1 = uv + (dispVec * intensity * dispPower);
vec2 distPos2 = uv + (dispVec * -(intensity * (1.0 - dispPower)));
// sample images with displaced uv
vec4 _texture1 = texture2D(texture1, distPos1);
vec4 _texture2 = texture2D(texture2, distPos2);
// mix both pictures using effect dispPower value and output pixel color
gl_FragColor = mix(_texture1, _texture2, dispPower);
}
它需要 3 个纹理作为输入:picture1 picture2 和用于扭曲 uv 的噪声纹理并在 GPU 上动态生成一帧过渡效果的一个像素的颜色值此着色器应用于表面的所有像素
此处使用的技术称为“纹理失真”或“UV 位移”这个想法是使用存储在噪声纹理中的数据调整 UV 坐标。
开始学习 GLSL 的好地方是 https://thebookofshaders.com/
GLSL 引用 http://www.shaderific.com/glsl/
另外,我建议访问 https://www.shadertoy.com/
欢迎来到实时视觉特效的神奇世界
关于javascript - onmouseover onmouseout 图像变化液体效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54118016/
所以,我正在使用的这个 Web 应用程序有三个垂直列扩展到整个窗口高度,还有一个页脚 div 扩展到整个宽度。布局如下所示: +|+ --- 其中 + 表示流动列,| 表示固定列,- 表示页脚。 我已
谁能帮我区分{% %}和 {%- -%} .这些语法之间有什么区别。在我的所有用法中,我可以使用任何主题 最佳答案 唯一的区别是一个去掉空白,另一个不去掉。 所以这个{% %}将保留它周围的任何空白。
我正在尝试根据用户查看某个网页的时间启用 div 类,例如:博客、索引或 ../page/webpage 代码是这样的: {% unless template contains "index" and
我是第一次用 Eleventy 建立一个网站,尽管我已经和 Liquid 合作了一段时间,但我还是无法破解这个网站。 我想尽可能地简化架构。这就是为什么我将我的集合分配给变量的原因: {% assig
我想要一组链接 Random Articles Old article 1 Old article 1 Old article 1 但我想从我的帖子中随机
从屏幕截图中,您可以看到当我按下到下一张幻灯片时,箭头不会根据内容高度自动调整。 我希望箭头的动态高度显示在内容的中间。 我引用了Liquid Slider的代码,你可以查看here或在下面查看我的问
好的,我的个人网站有一个基于 CSS liquid div 的布局。地址是 http://danberinger.com/preview.html 问题是我不希望页 footer 分表现得像内联显示一
我正在这个网站上工作:http://www.justaddsolutions.com/SampleSite/ 主要区域的宽度为 1024 像素并且始终居中,这已实现。但是,当浏览器窗口宽度超过 102
我正在使用带有 ajax 的 Liquid Slider,但我遇到了高度问题。 这是我的脚本: var api2 = $.data( $('#slider-7')[0], 'liquidSlider'
我有一个很像 this user 的问题,但我想更进一步,使我的图像具有能够流畅响应其容器的高度。 我做了一个东西来演示here . 我想要做的是给容器 div 类“navcont”(灰色区域)一个流
我想要一个 [Fixed][Liquid][Fixed] 跨浏览器兼容的布局。 HTML: body div#col-1 div#col-2 div#col-3 CSS: #col
如何在我的 spriteKit 应用程序中获取少量液体? 我想要那种液体放在一个容器里,它会被密封在里面,但我希望它能够四处移动。 有没有更好的方法来实现这个?也许没有 SpriteKit 的选项?
假设我有一堆 _data 文件,用于为特定页面创建列表。所有具有这些列表的页面都有一个自定义的前端变量 pageName。 pageName 的值恰好将 _data 文件与列表匹配。 我不想将 htm
我是 Shopify 新手,我正在尝试了解以下内容。我知道 Liquid 模板引擎会解析 Shopify 服务器上的 JavaScript。 有办法防止这种情况发生吗?例如,我有一个变量来配置我的插值
我被困在我正在处理的网站的 css 布局上。它是一个报告工具,将在宽屏显示器和上网本上使用。该站点已完成,除了可以从(非常)宽屏格式很好地降级为窄(上网本)格式的样式表。 这是它在宽屏上的显示方式:
我正在尝试部署我的 RoR 应用程序。当 RAILS_ENV 设置为开发时,它似乎在我的开发机器上运行良好。但是,当我将它放在生产服务器上并将其设置为生产模式时,导航到起始页后出现以下错误: => B
我正在读这个page并遇到了这段代码: {% if form.posted_successfully? %} {{ 'contact.form.post_success' | t
我正在开发 google chrome 扩展程序。我使用 Liquid slider 来帮助我处理弹出窗口,当我在括号中并进行实时预览时,我得到了我想要的结果。 https://gyazo.com/d
我在 jekyll 中学习 liquid,但我很难按月获取帖子数量。计算每个标签或类别的帖子数量似乎很容易(因为有变量 site.tags 和 site.categories),我没有问题。这是 my
我很难将外部 jQuery 库集成到我自己的 liquid 页面中。我想用 CDN 加载它。 在 theme.liquid 页面上,我以这种方式加载 Javascript: {{ 'spot-the
我是一名优秀的程序员,十分优秀!