[英]Animated mouse effect when scrolling over element
因此,我一直在尋找一種方法來復制Land Rover網站,並在將鼠標懸停在某個元素上時添加動畫鼠標效果。 例如,查看以下頁面: http : //www.landroverusa.com/index.html ,看看在“滑塊”區域中移動鼠標時會發生什么。 看起來像它的CSS來處理鼠標圖像,但是像上面的站點一樣,如何復制對鼠標指針圖像加標題的動畫?
到目前為止,這是我對這個鏈接的感謝:
<style>
* {
cursor: none;
}
figure#mouse-pointer {
background-image: url('http://cdns2.freepik.com/image/th/318-70851.png');
background-size:44px 44px;
width: 44px;
height: 44px;
position: absolute;
margin-left: -8px;
display: block;
}
</style>
<figure id="mouse-pointer"></figure>
<script>
$(function (){
// Based on example found here: http://creative-punch.net/2014/01/custom-cursors-css-jquery/
$(window).mousemove(function(event) {
$('#mouse-pointer').css({
'top' : event.pageY + 'px',
'left' : event.pageX + 'px'
});
});
});
</script>
這是一個小提琴: https : //jsfiddle.net/yqd5xzvc/1/
這是一個刺...
$(function() { var windowMid = $(window).width() / 2; $(window).mousemove(function(event) { $('#mouse-pointer').css({ 'top': event.pageY + 'px', 'left': event.pageX + 'px' }); if (event.pageX > windowMid) { $('#mouse-pointer').css('transform', 'rotate(180deg)'); } else { $('#mouse-pointer').css('transform', 'rotate(0deg)'); } }); });
* { cursor: none; } figure#mouse-pointer { background-image: url('http://cdns2.freepik.com/image/th/318-70851.png'); background-size: 44px 44px; width: 44px; height: 44px; position: absolute; margin-left: -8px; display: block; transition: 0.5s transform; } .rotate { transform: rotate(180deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <figure id="mouse-pointer"></figure>
您可以使用transform: rotate()
和一些JS來捕獲光標位置:
$(function () {
// Based on example found here: http://creative-punch.net/2014/01/custom-cursors-css-jquery/
$(window).mousemove(function (event) {
$('#mouse-pointer').css({
'top': event.pageY + 'px',
'left': event.pageX + 'px'
});
var windowSize = $(window).width();
var cursorLocation = windowSize / event.pageX;
if (cursorLocation <= 2) {
$('#mouse-pointer').addClass('rotate');
} else {
$('#mouse-pointer').removeClass('rotate');
}
});
});
添加了旋轉類:
figure#mouse-pointer.rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
並在鼠標指針旋轉時對其應用transition
:
figure#mouse-pointer {
transition: transform .3s;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.