Ways to utilize jQuery for adjusting CSS opacity properties

Question

Ways to utilize jQuery for adjusting CSS opacity properties

I have received jQuery code to determine the position of the user's mouse and adjust the opacity of elements on the page based on how close it is to the center. The goal is to create a fading effect as the mouse moves closer to the center, with a full-screen logo fading to opacity: 0, the background transitioning from black to white, and white text becoming visible. Take a look at the code snippet below:

$('body').on('mousemove', function(e) {
var x_val = 2 *(e.pageX - $(window).scrollLeft()) / $(window).width() - 1,
    y_val = 2 * (e.pageY - $(window).scrollTop()) / $(window).height() - 1,
    opacity = (1 - Math.abs(x_val)) * (1 - Math.abs(y_val));

    console.log(opacity)
});

As I am still learning jQuery, any guidance on applying this code to achieve the desired CSS effects would be greatly appreciated! Wishing you all a Merry Christmas!

javascript jquery html css

Answer 1

Answer №1

To begin, create a new element where you would like to adjust the opacity.

  $('#body').on('mousemove', function(e) {
    var x_val = 2 * (e.pageX - $(window).scrollLeft()) / $(window).width() - 1,
      y_val = 2 * (e.pageY - $(window).scrollTop()) / $(window).height() - 1,
      opacity = (1 - Math.abs(x_val)) * (1 - Math.abs(y_val));
    $(".MyDiv,.something").css("opacity", opacity);
  });

.MyDiv {
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  display: block;
  margin-top: 150px
}
.something {
  text-align:center;
  vertical-align:middle;
}
#body {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<div id="body">
  <div class="MyDiv"></div>
  <h3 class="something">Something else</h3>
</div>

Answer 2

To begin, create a new element where you would like to adjust the opacity.

  $('#body').on('mousemove', function(e) {
    var x_val = 2 * (e.pageX - $(window).scrollLeft()) / $(window).width() - 1,
      y_val = 2 * (e.pageY - $(window).scrollTop()) / $(window).height() - 1,
      opacity = (1 - Math.abs(x_val)) * (1 - Math.abs(y_val));
    $(".MyDiv,.something").css("opacity", opacity);
  });

.MyDiv {
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  display: block;
  margin-top: 150px
}
.something {
  text-align:center;
  vertical-align:middle;
}
#body {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<div id="body">
  <div class="MyDiv"></div>
  <h3 class="something">Something else</h3>
</div>

Answer 3

Answer №2

As you can observe, the function provided returns an opacity value and is triggered when the mouse is moved. The variable e represents the element currently being hovered over. To apply this opacity value to the element, use the code snippet below.

$(e.target).css('opacity',opacity)

This code will adjust the opacity of the element being hovered over to the calculated value. However, a potential issue arises when the mouse leaves the element but it still retains the previous opacity setting.

To address this issue, you need to attach an event listener to the element like so:

$(e.target).bind('mouseleave',function(){
    $(this).css('opacity','100') ;
    $(this).unbind('mouseleave'); //removes unnecessary event listeners after the mouse has left
})

All of the aforementioned code should be contained within your function for proper functionality.

Answer 4

As you can observe, the function provided returns an opacity value and is triggered when the mouse is moved. The variable e represents the element currently being hovered over. To apply this opacity value to the element, use the code snippet below.

$(e.target).css('opacity',opacity)

This code will adjust the opacity of the element being hovered over to the calculated value. However, a potential issue arises when the mouse leaves the element but it still retains the previous opacity setting.

To address this issue, you need to attach an event listener to the element like so:

$(e.target).bind('mouseleave',function(){
    $(this).css('opacity','100') ;
    $(this).unbind('mouseleave'); //removes unnecessary event listeners after the mouse has left
})

All of the aforementioned code should be contained within your function for proper functionality.

Ways to utilize jQuery for adjusting CSS opacity properties

Answer №1

Answer №2

Similar questions

The function res.send is undefined in this context

Most effective method for integrating a JS module across all browsers

method that provides route-specific variable outputs

Creating a vibrant and mesmerizing inward spiraling rainbow of colors on canvas using JavaScript

The Rails application utilizes a background process application callback to initiate a specific event

What is the best way to toggle the color of the circle div in the center between yellow and white with every click within the circle?

Modifying properties using jQuery

Preserving the selected date in a textbox using jQuery DatePicker after a postback

Dynamic mouse parallax effect enhances the experience of a full-screen responsive background

Issues with jQuery tabs "load" function not functioning properly

Gruntjs Live Reload is actively monitoring for changes, yet fails to refresh the page

An easy way to select multiple checkboxes from an array using Angular 6

Why is jquery.each unable to detect dynamically generated DOM structure?

Can anyone help me identify the cause of this CSS issue?

Tips for adjusting the hue of a single color in a JPEG image

What steps should I take to correct the color selection of a button that has been pressed down

Utilize Various Guidelines for Clicking on Various Thumbnails (jquery)

Creating a unique Bootstrap 5 layout for various sized cards, inspired by the popular Pinterest design

Designing personalized sass components

AngularJS 2 customClass tab with conditional styling