Setting a customized background color for a designated section of a component

Question

Setting a customized background color for a designated section of a component

I am trying to create a hover effect at the position of a cursor, similar to what is shown in this example:

For reference, I have also created a code snippet: https://jsfiddle.net/onnmwyhd/

Below is the code I am using:

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); 
});

The desired color for the cursor position is:

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

javascript jquery html css

Answer 1

Answer №1

If you're curious about how canvas is used on the reference website, take a look at this fiddle for an accurate representation:

JSFiddle

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);
}

JavaScript

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

If you're curious about how canvas is used on the reference website, take a look at this fiddle for an accurate representation:

JSFiddle

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);
}

JavaScript

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 3

Answer №2

Consider incorporating a span element within #container to store cursor values without altering the existing html content of the element. Additionally, include a div element inside #container with its css properties such as position set to absolute, left positioned at x, and top positioned at y for tracking the cursor with the 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>

Explore the code on JSFiddle https://jsfiddle.net/onnmwyhd/2/

Answer 4

Consider incorporating a span element within #container to store cursor values without altering the existing html content of the element. Additionally, include a div element inside #container with its css properties such as position set to absolute, left positioned at x, and top positioned at y for tracking the cursor with the 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>

Explore the code on JSFiddle https://jsfiddle.net/onnmwyhd/2/

Setting a customized background color for a designated section of a component

Answer №1

Answer №2

Similar questions

Tips for customizing the appearance of dayMouseover in Fullcalendar

Choosing a sibling element before another using CSS

Discover a method to retrieve all recommended strings based on a search query using JavaScript

The iPhone encountering issues with Safari's interpretation of @media queries

Having issues with UTF8 encoding when utilizing AJAX to send the complete HTML source in JavaScript

How can one safeguard their JavaScript code from potential threats and unauthorized access?

Tips for saving data obtained from an ajax call

What steps are involved in bundling a Node project into a single file?

Error in JSON access permissions while using AJAX call to Webmethod in ASP.NET webforms with jquery Datatables

Is there a way to transform a string property into a custom type in a TypeScript array?

Is it possible to separate a portion of HTML into a template and reuse it in multiple locations within a webpage?

"document.createElement encounters an issue when used for creating a new window

Overridden CSS rules

Create a bootstrap table with td elements that have no wrap for their content

Exploring the functionality of ISO 8601 periods with JavaScript

Django - tallying timer in action

Can Vue.js be configured to reload specific components only?

"Utilizing JSON data to implement custom time formatting on the y-axis with AmCharts

Tips for configuring options within a jQuery widget factory using data retrieved from server-side variables stored in a JSON file

I am experiencing an issue with my Jquery file not being able to locate the Controller