Background color in a specific area of ​​an element

Question

what I want to achieve is to put a freezing effect on the cursor position.

something like this: http://drmportal.com/

Here's the script: http://jsfiddle.net/onnmwyhd/

Here is my code.

HTML

<div id="container"></div> 

CSS

 #container{ background-color: #6fc39a; height:200px; } 

JQuery

 $("#container").mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; $(this).html("X: " + x + " Y: " + y); }); 

this is the color i want at the cursor position ....

  background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); 

Answer 1

Your reference website uses canvas, see this script for accurate reuse

js violin

HTML

 <div id="container" class="stalker"> <canvas id="canvas" width="1600" height="433"></canvas> </div> 

CSS

 .stalker { background-color: #6fc39a; height:200px; border-top-color: rgba(168, 228, 165, 0.7); border-bottom-color: rgba(53, 162, 142, 0.3); } 

script

 var stalker = $('.stalker'); var canvas = $('#canvas')[0]; var ctx = canvas.getContext('2d'), gradient, initialized = false; $("#container").mousemove(function(e){ setTimeout(function(){ initialized = true; canvas.width = stalker.width(); canvas.height = stalker.height(); gradient = ctx.createRadialGradient(e.pageX, e.pageY, 0, e.pageX, e.pageY, canvas.width); gradient.addColorStop(0, stalker.css('border-top-color')); gradient.addColorStop(1, stalker.css('border-bottom-color')); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); }, initialized ? 200 : 0); }); 

Answer 2

Try adding a span element to #container to hold cursor values ​​to avoid overwriting the html element; adding a div to the #container element with css position set to absolute , left to set x , top to y to use to track the cursor with div

 $(function() { $("#container").mousemove(function(e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; $("div", this).css({ left: x - (75 / 2), top: y - (75 / 2) }) $("span", this).html("X: " + x + " Y: " + y); }).mousemove(); }) 

 #container { background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); background-image: linear-gradient(125deg, #35a28e, #a8e4a5); background-color: #6fc39a; height: 200px; } #container div { background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); width: 75px; height: 75px; position: absolute; border-radius: 100px; opacity: 0.5 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="container"> <span></span> <div></div> </div> 

jsfiddle http://jsfiddle.net/onnmwyhd/2/