css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website:

This is the HTML code I currently have:

<section id="home" data-speed="3" data-type="background"></section>

While the 'data-speed' attribute controls the scrolling speed of the background image, I'm looking for a way to make the background image move based on mouse movements instead. Is there a code similar to 'data-speed' that achieves this effect?

javascriptjqueryhtmlcss

Answer №1

For those looking to create a parallax effect on their website, there are several JS libraries available to assist with this task. One library that I have personally utilized frequently is located at the following link:

While this library is user-friendly, achieving the desired effect may require some trial and error experimentation. However, the end result is definitely worth the effort!

Another option, which is simpler than the previous one but still very effective, can be found here:

I recommend trying out both libraries to determine which one best suits your specific needs and preferences.

Answer №2

To create your own rolling effect, you can utilize a combination of the jQuery mousemove function along with CSS3 transforms. Here's an example of how this can be done:

$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log( "<div>" + msg + "</div>" );
$("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)');
});

I have created a jsfiddle demonstration where you can see this in action. Keep in mind that you may need to customize the movement function according to your specific requirements.

http://jsfiddle.net/ZmZhw/

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

Is it possible to implement a code that will organize a dropdown list alphabetically?

Could someone assist me in sorting the location items alphabetically in this search form at: I would like the locations to be displayed in alphabetical order. Any help with updating the code below would be greatly appreciated. Here is the current code sn ...

phphtmlwordpressformssorting

Is it possible to expand the Angular Material Data Table Header Row to align with the width of the row content?

Issue with Angular Material Data Table Layout Link to relevant feature request on GitHub On this StackBlitz demo, the issue of rows bleeding through the header when scrolling to the right and the row lines not expanding past viewport width is evident. Ho ...

javascripthtmlcssangulartypescript

The Github API checks are currently not properly parsing style attributes when given in the form of HTML within comment text

I have integrated github's create check run API to create a check run for my pull request. The JSON structure I am using for the request body is as follows: { "name" : name, "head_sha" : script.env.CI_COMMIT_SHA, ...

htmlgithubcontinuous-integrationgithub-check-run

The function WebGLRenderer() from three.js allows for rendering in

When initializing the WebGLRenderer, I am passing in a canvas DOM element like shown below: var jqc = $('#myCanvas'); //accessing canvas with jQuery; var par = {canvas:jqc.get()}; //creating parameter object with canvas DOM element var renderer ...

javascriptthree.js

Transform JSON time data from Coordinated Universal Time (UTC) to Indian Standard

Hello, I consider myself an amateur in the world of online javascript learning. Currently, I have come across a challenge that has left me stuck. I am working with a JSON time data provided in UTC format (e.g. 16:00:00Z) and my goal is to convert it to IS ...

javascriptdatetime

How to retrieve grandchildren elements using jQuery?

Just a simple HTML question here: <div class="parents-of-all"> <p> <a> <span class="thechild">Something</span> </a> </p> The jQuery code is $('.parents-of-all').click(function(){ a ...

jquery

How can the Angular Js framework be utilized to create a pop-up feature in combination with Bootstrap?

I'm currently working on a website using AngularJS and Bootstrap. When the site is loading, I make a server call to fetch some data. This process takes some time, and during this interval, I want to display a pop-up message indicating that the user s ...

javascriptjqueryangularjs

retrieving JSON data within HTML elements

How can I access the JSON values {{u.login}} from HTML instead of just through JavaScript? Currently, I am only able to access them using JS. Is there a way to directly access JSON values in HTML? At the moment, I am getting them as text. Could you please ...

javascriptjqueryhtmlangularjstypescript

PHP is capable of showing echo statements from the function, however it does not directly showcase database information

My current challenge involves using AJAX to pass the ID name of a div as a string in a database query. Despite being able to display a basic text echo from my function, I'm unable to retrieve any content related to the database. // head HTML (AJAX) $( ...

javascriptphpjquerymysqlajax

Save all user information annually from the date they first sign up

Greetings! I am facing an issue where every time a year is added, it gets inserted between the day and month in the date of entry for a user at our company. var yearOnCompany = moment(user.fecha_ingreso_empresa, "YYYYMMDD").fromNow(); var dateStart = mome ...

javascriptmomentjs

How to save HTML content in a variable for future use in Next.js

When working with Next JS, my code resembles something like this: function Test() { return ( <section> <div>Test</div> </section> ); } Now, imagine that I want to have multiple entries here, gen ...

javascripthtmlnext.js

Unable to Display Embed Request Using Javascript in IE9 and IE10

My website allows users to embed content they create on the site into their own blogs or pages using a series of embeds. Here is the code we provide them: <script src="[EMBED PROXY URL]" type="text/javascript"></script> When this code calls ...

javascriptinternet-exploreriframeinternet-explorer-9internet-explorer-10

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated Click here for an image reference Reference code snippe ...

javascriptcssreactjsreact-reduxmaterial-ui

What could be the reason my view is not updating with the use of a js.erb file in Rails 4?

I found a helpful guide on this blog to implement a toggle feature for an attribute in my database. While the toggling functionality is working fine, I'm struggling to update my view to reflect the changes. This is my first time using js.erb files so ...

jqueryruby-on-railsajaxruby-on-rails-4

Send a pair of values using a set of two parameters

My current code is currently passing only one parameter value. However, I would like to modify it to pass two values with two parameters. This is my current code: <script> function getfilter(str){ document.getElementById("result"). ...

javascriptajax

MUI Autocomplete causing a never-ending cycle of requests

One of the challenges I'm facing involves an Autocomplete component in my code. Here's a snippet of the code: <Autocomplete filterOptions={(x) => x} options={items} getOptionLabel= ...

javascriptreactjsmaterial-ui

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

javascriptcsscss-animationstypescriptweb-animations-api

How to submit form data with a POST request in Flask using fetch without having to reload

Despite reading numerous similar questions, I am still unable to determine how to achieve my goal. I have multiple forms on a single page and I am trying to submit data from each form without refreshing the page. Below is an example of one of the five form ...

javascriptpythonflaskfetch-api

Creating a mobile-friendly navigation bar with Vuetify for optimal responsiveness

I am attempting to utilize a vuetify tab component as my navigation menu in order to create a responsive navbar using vuetify. The goal is to have a normal navbar that functions like usual, but when viewed on a mobile device, it should hide the menu and di ...

csslaravelvue.jsnavigationvuetify.js

Get binary information without relying on the use of arraybuffer

I have a specific resource that I am utilizing: function _arrayBufferToBase64(buffer) { var binary = ''; var bytes = new Uint8Array(buffer); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String. ...

javascriptangularjs