What is the best way to create an impact?

Need help fixing the parallax effect on this page. I attempted to implement a parallax effect but encountered some issues.

Here is the JavaScript code:

$objWindow = $(window);

$('section[data-type="background"]').each(function(){
    var $bgObj = $(this);

    $(window).scroll(function() {
        console.log(11);

        var yPos = -($objWindow.scrollTop() / $bgObj.data('speed'));

        var coords = '100% '+ yPos + 'px';

        console.log(coords);

        $bgObj.css({ backgroundPosition: coords});
    });

However, there seems to be an issue where the y-coordinate in the #apex background block does not change when scrolling.

javascriptjquerycss

Answer №1

There seems to be an error:

Original code snippet:

$bgObj.css({ backgroundPosition: coords});

Please update it as follows:

$bgObj.css({ 'background-position': coords});

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

Sliding with jQuery to eliminate a div element

I wanted to dive into jQuery and decided to recreate the slick animation from Jay-Z's new album commercials. In these ads, a bar slides left over his name while simultaneously disappearing. I also wanted to add a flashing effect by fading out, fading ...

javascriptjqueryhtmlcss

Do not procrastinate when updating the navbar elements while navigating through pages

This specific NextJS code is designed to alter the color of the Navbar elements once scrolling reaches 950px from the top or when navigating to a different page that includes the Navbar. Strangely, there seems to be a delay in updating the Navbar colors wh ...

javascriptreactjsnext.jstailwind-css

Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png This seems t ...

cssbootstrap-4responsive-designhtml5-canvas

Vue Material - Effortlessly integrate native transitions within router views

In the project I'm currently working on, I have chosen to use Vue Material for the development of a single-page application. The approach I am taking follows a common trend in which a central "container" component is utilized to manage the shifting vi ...

javascriptvue.jsvuejs2vue-routervue-material

Inconsistencies in latency experienced when making calls to Google Sheets V4 API

Recently, I've been encountering latency issues with the following code: var latency = Date.now(); const sheetFile = await google.sheets({version: 'v4', auth}); var result = await sheetFile.spreadsheets.values.get({spreadsheetId: shee ...

javascriptnode.jsherokugoogle-sheets-api

Sending emails to multiple recipients with different content using Nodemailer

I have been working on a method to send emails to multiple recipients while also passing the user attribute, which contains the name of the recipient, to the html template. (I AM UTILIZING NODEMAILER as a nodejs module) My current code looks like this: S ...

javascripthtmlnode.jsemailnodemailer

What is the best way to demonstrate the impact of autocomplete using a local array in jqGrid?

For this particular scenario, I am referencing this example The AutoComplete and effect are functioning, but with the URL as: ' http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName ' In the code belo ...

jqueryajaxjsonjqgrid

Looping through an array in Vue using v-for and checking for a specific key-value pair

As I dive into my first Vue app, I've encountered a minor setback. Here's my query: How can I iterate through a list of dictionaries in Vue, specifically looping through one dictionary only if it contains a certain value for a given key? Provi ...

javascriptvue.jssyntaxiteration

The information displayed in the tooltip exceeds the capacity of the column

Is there a way to display data in a tooltip when a column contains long sentences due to width constraints? To achieve this, I have implemented a renderer function as shown below: { header: xppo.st('SDE_INCIDENT_DESCRIPTION1'), width: 1 ...

cssextjs

Leveraging AngularJS for parent-child communication through bindings in a unique and effective manner

I've come across the following code snippet: <div class="parent"> <div class="child"> and I have two directives, one for parent and one for child. When an event (such as a click) occurs on parent, I want something to happen on child ...

javascriptjqueryangularjs

Error message: When working with Protobuf, an uncaught reference error occurs because the 'exports

Currently, I am in the process of configuring protobuf to work with typescript. According to the official Google Documentation, all that is needed is to execute npm install google-protobuf and then to include require('google-protobuf'). Unfortu ...

javascripttypescriptnpmprotocol-buffers

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...

htmlcssnode.jsexpress

What is the URL I need to visit in my browser to monitor updates while running npm?

I am interested in utilizing npm to monitor any changes made in my project and immediately view them in my browser. Essentially, I have been implementing npm using this modified code snippet from this source, which allows me to run the command npm run buil ...

javascriptnode.jsnpm

Troubleshooting Tips for Node.js and MongoDB Socket Closure Issue

I'm running into an issue while working on the login system for my NodeJS application. Everytime I attempt to retrieve a collection, MongoDB throws me this unusual error. The Error Message [MongoError: server localhost:27017 sockets closed] name: &a ...

javascriptnode.jsmongodbexpress

How to extract data from Google Sheets using NODEJS?

When utilizing the REST API to extract data from a cell range in Google Sheets, the response returned is as follows: { "range": "RECORD!A2:J2", "majorDimension": "ROWS", "values": [ [ "07/11/2016", "21:20:10", "3", "MAIN" ...

javascriptjsonnode.jsgoogle-sheets

Why is the jQuery ajax file uploading feature failing to function properly in the IE9 standard mode?

My file upload function works well in browsers like Chrome and IE10, but encountered an issue when tested on IE9. The Action controller reported that Request.Files were returning files with '0' length. I'm unsure if this problem is related ...

javascriptjqueryajaxinternet-explorerfile-upload

A guide on passing an array parameter using JavaScript

I need to transfer an array of ids from one page to another. I have created the $ids variable in PHP, and I am using it with jQuery like this: var ids = <?php echo json_encode($ids); ?>; jQuery(ids).each(function() { filters.push('ids[]=&a ...

javascriptphpjqueryarraysjson

What is the Best Way to Retain My Firefox Settings While Handling a JavaScript Alert?

I'm encountering an issue when trying to download a file by clicking on a link. I have set my Firefox preferences to save the file in a specific location. However, upon clicking on this particular link, a popup appears that I must accept before the do ...

javascriptpythonfirefoxseleniumpopupwindow

Attempting to dispatch data from Vue.js event bus

I am attempting to increase the count of quotes by one and also add the text from a textarea to an array. While the text is successfully added to the array, the number of quotes always remains zero. I have tried combining the two actions in one method as w ...

javascriptvue.jsemit

JavaScript is failing to execute the DELETE SQL transaction

I've been attempting to clear out my html5 local sql database, but for some reason, it's not working as expected. Below is the code I'm using, and no matter what I try, the alert always shows that the length is greater than 0. Any ideas why ...

javascriptsqlhtml