Using jQuery to create a dynamic fullscreen background image that responds to mouse movement

I am currently working on creating a dynamic full screen background that responds to the movement of the mouse. The idea is that as you move the mouse around, the background image will shift accordingly.

For instance, if you were to move the mouse to the top left corner, the viewport would display the corresponding section of the image while still fitting it within the screen. In this scenario, let's assume that the screen size is 1280 * 960, but the image itself is 1800 * 1300.

I have seen something similar to this concept in the past, but I can't recall where or find the specific term used to describe it. It is not exactly parallax or traditional scrolling background techniques...

If anyone knows about a suitable jQuery plugin and the necessary CSS code to make this happen, your help would be greatly appreciated!

Thanks in advance for any insights and solutions provided!

jquerycssbackgroundviewport

Answer №1

To offer a more concise response, the phenomenon is known as panning and a jQuery plugin can be utilized to achieve this effect:

For implementing panning in jQuery, consider using the plugin available at this link.

If you are interested in exploring an example of left-to-right panning with a fullscreen image, you can refer to this resource. Although it may not be suitable for all browsers due to its CSS cover usage, it does provide valuable insights into creating a mouse-over effect.

Additionally, take a look at another live demonstration showcased within a theme:

Access the live example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying CSS to an iframe using JavaScript: A Step-by-Step

I have an Iframe editor and I am trying to change some CSS inside the editor. However, when I attempt to apply the CSS, it does not affect the styles within the Iframe. <div id="editor" style="flex: 1 1 0%;"> <iframe src="https://editor.unlay ...

javascripthtmlcssreactjsdom

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

Set onfocus for DOM elements dynamically

I have a question regarding assigning onfocus or similar functions to DOM elements during runtime. Here is the scenario: <input type="text" id="box" onfocus="inputFocused()"/> Now, in a runtime assignment case: <input type="text" id="box"/> ...

javascriptjquerydomruntimeonfocus

Dealing with issues of toggling visibility with jQuery when using a dropdown menu

Inside a hidden drop down div, the focus is on "DC" right now. In the image below, we are looking at sales: HTML: <td class="edit"> <select class="touch" style="display: none;"> <option value="11">Rebuying</option><option value ...

javascriptjqueryshow-hidemouseup

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

cssinternet-explorerprinting

The radio button default selection is checked, but the desired styles are not being applied

My webpage features two radio buttons, "No" and "Yes," with the default selection being "No." I have implemented CSS styles for the checked elements, but they only work once physically selected. My goal is to apply these styles immediately on page load wit ...

htmlcssradio-button

Tips for implementing a "loading spinner" for each new ajax call using jQuery

Each time an ajax call is made, I want to display the loading icon/image. However, in my current code, the image only appears once and then disappears. Even when there are multiple ajax calls within a for loop, the image only shows once and vanishes after ...

jqueryajaxloading

Managing JSON data through AJAX in ColdFusion

For my external API call using AJAX, I am incorporating a local API setup as an intermediate step. The process is as follows: The Ajax call sends data to localAPI.cfm. Within localAPI.cfm, there is a <cfhttp> tag to forward the data to an external ...

javascriptjqueryjsonajaxcoldfusion

Optimizing Chrome's Precious Load Time

Encountering issues with Chrome browser auto-filling passwords, usernames, etc. Creating a problem where input field validation for emptiness is not possible in Chrome while it functions correctly in other browsers. $(document).ready(function() { ...

javascriptjquerygoogle-chrome

Trouble with the Bootstrap navbar loading correctly

Recently I started using Bootstrap and decided to implement one of their templates. Everything is working fine, except for my navbar which is not loading correctly. It should look like this: Desired Navbar However, in both Chrome and Firefox, it appears l ...

htmlcsstwitter-bootstrap

Unable to display an image prior to its upload

I'm facing an issue with changing the image for my second data. It's not updating, but when I try it with the first data, it works fine. I'm unsure why this is happening and would appreciate any help in resolving it. Here is the form where ...

javascriptphpjqueryimage-uploadingpreview

Arrange the menu items in a column layout based on a given condition

Can someone assist me with displaying the menu subitems? I have created a plunker. Take a look at it to understand what I need (open plunker in full screen) https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview In the plunker above, there are two dropdown ...

htmlcssangularjsangular-ui-bootstrap

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Belo ...

javascriptjqueryhtmlcss

Changing the color of a Highcharts series bar according to its value

Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colo ...

javascriptcssangularjshighcharts

Using Jquery to target all elements except for their child elements

I have the following code: <div id="mn"> <span></span> <span> <span></span></span> <span></span> <span> <span></span></span> <span></span> </div& ...

javascriptjqueryhtml

Refresh the table every couple of seconds

I need to regularly update a table every two to three seconds or in real-time if possible. The current method I tried caused the table to flash constantly, making it difficult to read and straining on the eyes. Would jQuery and Ajax solve this issue? How c ...

javascriptphpjqueryajaxjson

Make sure to attach a resize event handler just once

I am working with a widget that inserts a div element into the DOM. This div requires some JavaScript to handle the resize event effectively. Here's the issue: The widget may be added multiple times on the same page, but I want to avoid adding re ...

javascriptjqueryresizewindow-resize

Ways to determine when a page has reached the end of its scrollable content

I'm working on a web page that extends beyond the viewport, requiring users to scroll or swipe to see the entire content. I want to dynamically change the message from "swipe right" to "swipe left" based on the user's scrolling behavior. However, ...

jqueryscroll

Retrieving & Refreshing Data with ajax and Jquery

I have been working on developing a forum system using jQuery, PHP, Bootstrap, and other technologies. The forum allows users to post, delete, and edit their posts. I have implemented an edit button for the author of the post, which triggers a modal wind ...

javascriptphpjqueryajaxtwitter-bootstrap