I am trying to recreate the same effect showed below on mobile devices. I have tried to use .vmousemove
however, the div
only move when I touch and realise. What I am trying to achieve is that the div
follows the finger movement on screen.
Is this something possible to achieve with jQuery? Also I can I centre the mouse in the middle of the div
?
$('#cont').mousemove(function(e) { var offs = $(this).offset(), p = { x: offs.left, y: offs.top }, mPos = { x: e.pageX, y: e.pageY }, x = mPos.x - px - 100, y = mPos.y - py - 100; $('.gray', this).css({ left: x, top: y, backgroundPosition: -x + 'px ' + -y + 'px' }); });
#cont { width: 100%; height: 100%; overflow-x: hidden; } .gray { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: url('img/grid.png'); opacity: 0.9; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5defb2+0,edd92d+46,d156ea+57,7eea9b+100 */ background: rgb(93, 239, 178); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5defb2', endColorstr='#7eea9b', GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="cont"> <div class="gray"></div> </div>
var timer;
$('#cont').mousemove(function(e) {
timer = window.setTimeout(function() {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 100,
y = mPos.y - p.y - 100;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
},10000)
return false;
})
I am not sure if it works or not just idea
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.