0
我试图让我的div移动顺畅地与“缓动”效果相反。鼠标移动让div移动顺利翻转
当我将鼠标悬停在div上时,我希望图像顺利地从鼠标移开,就像他们在toyfight.co网站的第一部分中对两个玩具的图像一样。
我检查了他们的代码,无法找到我的答案。
难道你们能提供吗?
我已经设法做了一个稍微粗略的图像移动与下面的代码。也是link to my project on Codepen。 (更多最小here)
回答 这个插件帮助我实现我的目标
HTML
<div class="section-0">
<div class="phone-container" >
<div class="phone-front" id="layer-one"></div>
</div>
</div>
<section class="section-1 parallax parallax-1">
<div class="container" id="section-1">
<div class="text-block animation-element">
<h1>Gemaakt van het fijnste staal</h1>
<p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>
</div>
</div>
</section>
JQUERY
$.fn.smoothWheel = function() {
// var args = [].splice.call(arguments, 0);
var options = jQuery.extend({}, arguments[0]);
return this.each(function (index, elm) {
if(!('ontouchstart' in window)){
container = $(this);
container.bind("mousewheel", onWheel);
container.bind("DOMMouseScroll", onWheel);
currentY = targetY = 0;
minScrollTop = container.get(0).clientHeight - container.get(0).scrollHeight;
if(options.onRender){
onRenderCallback = options.onRender;
}
if(options.remove){
log("122","smoothWheel","remove", "");
running=false;
container.unbind("mousewheel", onWheel);
container.unbind("DOMMouseScroll", onWheel);
}else if(!running){
running=true;
animateLoop();
}
}
});
};
您的图像似乎顺利移动到我身上。有什么问题? –
ToyFights网站上的一个似乎有一个缓动的效果,这使得它非常流畅 – Salman
我建议你用CSS转换来做到这一点,它允许缓动效果,并且比使用JavaScript的效果简单得多。 –