JQuery Parallax issue not resolved

While working on a web page, I decided to implement a parallax background effect. I have three divs with the same background, which you can see in this fiddle.

Interestingly, when I use different background images for each div, the parallax effect works perfectly. However, if I use the same background image for all three divs, the parallax effect does not function as expected.

To create the parallax effect, I am utilizing the jQuery Parallax plugin which can be found at .

Here is the jQuery code snippet I am using:

$(document).ready(function(){
  $('.sep').parallax("50%", 0.6);
});

Answer №1

To achieve the desired effect, it is necessary to invoke the parallax function on each element separately. This can be done using the each method:

$('.sep').each(function(){
   $(this).parallax("50%", 0.6); 
});

http://jsfiddle.net/PmYsC/1/

Answer №2

Make sure to assign a unique identifier to each one.

$(document).ready(function(){
  $('.section1').parallax("50%", 0.6);
  $('.section2').parallax("50%", 0.6);
  $('.section3').parallax("50%", 0.6);
});

http://jsfiddle.net/wEpMM/

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

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

Disabling Immediate Row Checkbox in Angular Datatable Based on Column Data

Is there a way to prevent the checkbox in a row from being checked based on certain column data? In my datatable, I need to implement a condition where if firstname="Superman", then the checkbox for that particular row should be disabled to preve ...

Acquire the input value of a form field prior to its submission

In my Django form, I have a field called monitoring_method that is using an autocomplete-light widget. This widget filters the results based on what the user enters in another field called database_type. My question is: Is there any way to access the value ...

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

Run the jQuery script once it has been successfully loaded using jQuery's .load method

On the Index.html page, there is a select box labeled #choose_content_to_load and a div named #get_loaded_content <select id="choose_content_to_load"> <option>Some content from the page content.html and div #content</option> </select ...

Declining Effects of AJAX using jQuery

Hi there, I am currently working with an AJAX script that is a combination of jQuery 1.4.4 and jQuery address 1.3.2. What I'm trying to achieve is to make the transitions between divs more smooth by fading them in and out instead of just changing abru ...

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

Unsuccessful Ajax call in Rails application

I'm a bit perplexed as to why my Ajax call is failing. It was previously working fine and I can't identify any changes that might have caused it to stop. When I initiate the call, an error pops up in Firebug's console pointing to this sectio ...

Unraveling the Mystery: Determining the Position of a Keyword in an HTML File

My challenge involves analyzing an HTML document in string form to locate a specific keyword and identify the tag in which it appears. For instance, if my document looks like this: $string = "<html> <head> <title> ...

Is there a way to ensure that clicking a link_to only opens a partial once?

These are the files I am working with: _comment.haml %div.comment{ :id => "comment-#{comment.id}" } %hr - if current_user && current_user.id == comment.user_id || current_user && current_user.id == reel_user = link_to " ...

Tips for Keeping Sub Menu Visible Without Having to Click

I am working on an HTML navigation menu that opens submenus on click like this... $("#nav_evnavmenu > li > a").click(function () { // bind onclick if ($(this).parent().hasClass('selected')) { $("#nav_evnavmenu .selected div div ...

Subsequent pages are failing to load stylesheets

My HTML is not linking my CSS properly. I am using the Prologue template from html5up.com. In my main directory where index.html is located, I created a subfolder for the different products I want to display. This folder contains several files including 12 ...

Passing Data Between Multiple Ajax Requests

I have a challenge that involves making multiple AJAX calls, where each call returns a value required for the next one. I understand that AJAX operates asynchronously and may not be straightforward to handle in this scenario. I've come across informa ...

Switching between displaying or hiding one of two backgrounds within a div using CSS and jQuery

Seeking guidance on implementing a two-background div setup where A is constantly displayed within the element and toggling B based on button control click. HTML <div class="container"></div> CSS .container{ url(B.png) 10px 10px no-repeat ...

Tips for ensuring your anchor links function properly with Ajax interactions

I have been working on transferring data from a MySQL database using AJAX with JSON as the datatype. Below is the code I've used: $("#klik_cari").click(function() { //ajax configuration $.ajax({ url: "<?php echo ...

I'm encountering inexplicable duplications of elements on my Wordpress site

Here is an example of my template header: <header> <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?> <a class="menu-toggle">menu</div> <?php wp_nav_menu( array('them ...

Is there a way to trigger a click event on an href using asp code behind?

Is there a way to programmatically trigger a click event on the href "shipping_question_ID_product_received_as_ordered_link" from the code behind of an ASP form? This href triggers a complex function in jquery when clicked by the user. I need to simulate ...

Combining multiple form actions into one submission to a SQL/FTP server using PHP

Looking for some assistance and suggestions, please. Currently, I have a form that successfully submits data to MySQL database using the <form method="post">, but I am facing issues when trying to submit images along with the data because it requires ...

Adjusting a parameter according to the width of the browser window?

Using Masonry, I have implemented code that adjusts the columnWidth to 320 when the screen or browser window width is less than 1035px. When the width exceeds 1035px, the columnWidth should be 240. However, the current code keeps the columnWidth at 320 re ...