Single parallax movement determined by the position of the mouse cursor, with no margins

Recently came across this interesting code snippet [http://jsfiddle.net/X7UwG/][1]. It displays a parallax effect when moving the mouse to the left, but unfortunately shows a white space when moving to the right. Is there a way to achieve a seamless single parallax effect without the white margins?

I'm looking for a solution where a full-width image moves slightly based on the mouse position, similar to the example provided, but without any white space. Perhaps zooming the image could help with this issue.

Answer №1

Utilize percentages on the x-axis and adjust the image size to 110%

View Demo

$('#landing-content').mousemove(function(e){
    var amountMovedX = (( e.pageX / window.innerWidth ) * 100) ;
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + '% ' + amountMovedY + 'px');
});

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

Can you explain the distinction between using router.METHOD() versus router.route() in Express?

There are two different ways I've come across of writing this code. router.get(path, callback) and router.route(path).get(callback) Based on the surrounding code, they seem to have the same functionality. The documentation for these methods can be ...

The API request for /api/auth/callback/credentials was resolved successfully, but no response was sent back. This could potentially lead to delays

When attempting to log in with Talend API Tester, I encountered the following message in the terminal: API resolved without sending a response for /api/auth/callback/credentials, this may result in stalled requests. Additionally, here is the screenshot ...

Pattern to locate a CSS class identifier

I've been working on creating a regex to match valid CSS class name structures. Currently, my progress looks like this: $pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)"; $regex = preg_match_all($pattern, $html, $matches); However, there are certai ...

An interesting quirk within CSS is that when a field is hidden, it can

I am currently developing a Chrome extension to modify certain text fields, but I have run into an issue. Specifically, I need to hide the "Stato" field so I implemented the following CSS code: https://i.stack.imgur.com/9blvz.png https://i.stack.imgur. ...

Main page cluttered with irrelevant data from PHPExcel

I am facing an issue where, upon generating a PDF file with information obtained from a database using PHPExcel and clicking the 'report' button to transfer this data into the PDF, my page is flooded with unreadable symbols resembling random garb ...

Troubleshooting problem with CSS alignment within Bootstrap framework

Having trouble with the alignment when using bootstrap CSS. My desired layout is as follows: Place name: dropdownbox Gender (radio-button)Male (radio-button)Female Amount Max: textbox Min: textbox Any advice on how to achieve this? ...

Execute protractor to open chrome in incognito mode and disable web security for cross-origin resource sharing

Our application performs well in production with CORS enabled. I am working on a project that is not CORS-enabled locally. Is there a way to disable web security for protractor? Can I modify the selenium instance by adding arguments? We are interested in ...

Having trouble displaying the Primevue dialog modal in Vue 3?

I am using [email protected] and [email protected] Main script import { createApp } from 'vue' import App from './App.vue' import router from './router' import PrimeVue from 'primevue/config'; import &apos ...

Whenever I hit the refresh button, `$locationprovider.html5mode` seems to deactivate my CSS styling

Things go smoothly as long as I remove $locationprovider.html5mode(true). However, enabling html5mode seems to be causing some troubles. The main issue is that the css styles stop working after page refreshes. Any ideas on what could be causing this and ...

In the past, I've crafted buttons and other elements using Photoshop, and subsequently saved them for web use. However, I'm now contemplating whether it's more advantageous to employ CSS in

In the past, I have utilized Photoshop to create visually appealing buttons and footer bars for my websites. However, I'm now pondering if it's more beneficial to utilize CSS for button creation. I've noticed that manually coding them can re ...

Struggling with integrating Bootstrap 4 Modals in Angular 2 environment

I attempted to incorporate a modal from into my navbar, but nothing happens when I click on it. <div class="pos-f-t fixed-top header"> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> <button class="navbar- ...

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

How can I upload an image file using VueJS and Django Rest Framework?

Hello, I am currently in the process of editing a blog page using VueJS and Django Rest Framework. However, I am facing an issue when trying to upload a photo - I keep receiving an error message stating that "the sent data is not a file." Additionally, I a ...

What is the method to create a button that links to a page when selected using a radio button?

How can I create radio buttons that link to different pages, where each radio button is associated with a specific website and directs me to that link when I press a button (not on click)? I've attempted the following but need some help: <h3&g ...

Tips and tricks for ensuring images maintain their aspect ratio and height when resizing for responsiveness

I am facing an issue with my two-column layout. One column contains an image and the other column has text and buttons with a fixed height. To ensure the image is responsive, I have set the width to 100% and height to auto. However, upon resizing, the aspe ...

Exploring the hidden contents within the zip file

I have been exploring methods for reading 'zip' files. Two libraries that I have used are zip.js and JSzip. I have successfully viewed the contents of the zip file. However, here lies the challenge: My goal is to identify specific file types ...

Tips for implementing Papa Parse to parse CSV files using JavaScript

I've been exploring their API without much luck. My goal is to extract data from CSV files that are sent to the client upon server entry. Here's the code snippet I attempted: // Attempting to parse local CSV file Papa.parse("data/premier leagu ...

Why isn't JQuery's .prependTo('body') function functioning correctly?

It's getting late and I should probably call it a night, but I am completely puzzled. I hate to admit it, but why isn't this working?? var informationBox = ''; informationBox += '<div class="informationBox">'; informati ...

Extract a free hour from the JavaScript time array without any filtering

In my Javascript array, I have the teaching schedule of a teacher for the day. { "time": [ { "start":"10:00","end":"11:00" }, { "start":"12:00","end":"01:00" }, { "start":"04:00","end":"06:00" } ] } My goal is to determine the free hours in the abo ...

A step-by-step guide on enabling Autoclick for every button on a webpage

I am currently using Jquery and Ajax to carry out an action, my goal is for a code to automatically click on every button once the page has finished loading. Although I attempted to use the following javascript code to achieve this at the end of my page, ...