jquery - 平滑修改 css 剪辑路径
jquery - smooth modify css clip-path
我有一个元素 css clip-path.
根据光标位置 (Xcord) jquery
修改 clip-path
点。
我的代码工作得很好,但我想放慢(缓慢而平滑)这个 "animation" 即使光标移动得很快。
我怎样才能做到这一点?
谢谢帮助
$(document).mousemove(function(getCurrentPos){
var clip = $(".element");
//x coordinates
var xCord = getCurrentPos.pageX;
//calculate %
xPercent = xCord / $(document).width() * 100;
var left = 90 + 10 * (xPercent / 100);
var right = 100 - 10 * (xPercent / 100);
$(".element").css('clip-path', 'polygon(0% 0%, 100% 0%, 100% ' + left + '%, 0% ' + right + '%)');
});
.element {
background:red;
width:500px;
height:150px;
clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element"></div>
只需在 CSS 代码上添加一个转换
$(document).mousemove(function(getCurrentPos) {
var clip = $(".element");
//x coordinates
var xCord = getCurrentPos.pageX;
//calculate %
xPercent = xCord / $(document).width() * 100;
var left = 90 + 10 * (xPercent / 100);
var right = 100 - 10 * (xPercent / 100);
$(".element").css('clip-path', 'polygon(0% 0%, 100% 0%, 100% ' + left + '%, 0% ' + right + '%)');
});
.element {
background: red;
width: 500px;
height: 150px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
transition:0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element"></div>
我有一个元素 css clip-path.
根据光标位置 (Xcord) jquery
修改 clip-path
点。
我的代码工作得很好,但我想放慢(缓慢而平滑)这个 "animation" 即使光标移动得很快。
我怎样才能做到这一点? 谢谢帮助
$(document).mousemove(function(getCurrentPos){
var clip = $(".element");
//x coordinates
var xCord = getCurrentPos.pageX;
//calculate %
xPercent = xCord / $(document).width() * 100;
var left = 90 + 10 * (xPercent / 100);
var right = 100 - 10 * (xPercent / 100);
$(".element").css('clip-path', 'polygon(0% 0%, 100% 0%, 100% ' + left + '%, 0% ' + right + '%)');
});
.element {
background:red;
width:500px;
height:150px;
clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element"></div>
只需在 CSS 代码上添加一个转换
$(document).mousemove(function(getCurrentPos) {
var clip = $(".element");
//x coordinates
var xCord = getCurrentPos.pageX;
//calculate %
xPercent = xCord / $(document).width() * 100;
var left = 90 + 10 * (xPercent / 100);
var right = 100 - 10 * (xPercent / 100);
$(".element").css('clip-path', 'polygon(0% 0%, 100% 0%, 100% ' + left + '%, 0% ' + right + '%)');
});
.element {
background: red;
width: 500px;
height: 150px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
transition:0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element"></div>