基于GSAP CDN的Robin效果上的图像悬停动画缺陷
基于GSAP CDN的Robin效果上的图像悬停动画缺陷
提问于 2021-11-20 20:59:56
我应用了一个简单的过渡效果与“罗宾德拉Hover效应”插件。虽然它只适用于TweenMax和ThreeJS cdn，但是如果我添加GSAP，动画就会变成一个错误。当你从左到右在图片上滑动鼠标时，它会在几秒钟后显示另一张图片，而没有进入动画。我需要在不同的应用中使用GSAP。我举不起这个。我把链接和密码留给你，让你更好地理解问题。
诚挚的问候。
var hoverDistort = new hoverEffect({
parent: document.querySelector('.wrapper'),
intensity: 0.5,
image1: 'https://test.culturebandit.com/bug/1.jpg',
image2: 'https://test.culturebandit.com/bug/2.jpg',
displacementImage: 'https://test.culturebandit.com/bug/8.jpg'
}); html,
body {
margin: 0%;
padding: 0%;
width: 100%;
height: 100vh;
background: #161616;
}
.wrapper {
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"
integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://tympanus.net/Development/DistortionHoverEffect/js/hover.js"></script>
<div class="wrapper"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-23 21:43:00
我在想，输入和输出时间可能有异常，我修正了过渡动画的输入和输出宽松值，并解决了问题。下面您可以看到我向JS行添加了哪些命令。我不知道如何使旧内核中的命令适应新版本，也许这是主要的解决方案，但我实现的还不错。
诚挚的问候。
var hoverDistort = new hoverEffect({
parent: document.querySelector('.wrapper'),
intensity: 0.5,
image1: 'https://test.culturebandit.com/bug/1.jpg',
image2: 'https://test.culturebandit.com/bug/2.jpg',
displacementImage: 'https://test.culturebandit.com/bug/8.jpg',
speedIn: 1.5,
speedOut: 1.5,
hover: true,
easing: Expo.easeOut,
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70049824
复制相关文章
相似问题
腾讯云开发者
