Achieve a stunning visual effect by gradually blending the background image in a parallax

Adding some parallax scrolling background images to my site using this awesome plugin:

Looking to achieve a fade out effect on user scroll, similar to what is seen on this cool website:

Tried implementing the code below but it doesn't seem to work due to how the plugin functions:

$(window).scroll(function() {
    $(".parallax-holder").css({
    'opacity' : 1-(($(this).scrollTop())/250)
    });
});

Created a pen to demonstrate progress so far:

http://codepen.io/mikehdesign/pen/KVKNyr

Any suggestions on getting the image to fade out on scroll? Do I need to adjust the jQuery target or consider switching plugins? There are multiple parallax images on the page that I want to affect individually.

Appreciate any help!

javascriptjquerycssparallax

Answer №1

Hey there! Give this a shot:

$(window).scroll(function() {
  $(".parallax-mirror img").css({
    'opacity': 1 - (($(this).scrollTop()) / 250)
  });
});

Answer №2

To actually make the necessary adjustments in the scroll function, you will need to modify the class name...

$(window).scroll(function() {
    $(".parallax-container").css({
    'opacity' : 1-(($(this).scrollTop())/250)
    });
});

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

Having Problems Editing Records with Ajax and Jquery in Asp.Net?

Currently, I am working on CRUD operations using Jquery Ajax. I encountered an issue when trying to update a record. After filling out the form data and clicking the update button, if I make changes to the name or address fields and then try to edit again ...

jqueryasp.netajax

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

javascripthtmldeveloper-tools

Tips for saving data after reading lines in Node.js

I am working on a project where I need to read data from an external text file into my function. How can I efficiently store each line of the file as a separate variable? const fs = require("fs"); const readline = require("readline"); const firstVariable ...

javascriptnode.js

Utilizing jPlayer to play music files uploaded using Paperclip in a Ruby on Rails application with the help of jQuery

Just wanted to say thanks in advance for any help. Currently, I am storing songs in a filesystem using Paperclip and attempting to play them with jPlayer. Despite following all the necessary steps, I am unable to get the audio to play when clicking on a ...

jqueryruby-on-railshtmlhtml5-audiojplayer

Can JavaScript be used to bypass AJAX cookies?

Is there a way in JavaScript to programmatically ignore server-sent cookies without adjusting browser settings? We have implemented plugins on our web server that periodically update our security cookie, resulting in compatibility issues with certain URLs ...

javascriptajaxcookies

What is the best way to retrieve a JSON object from within a nested JSON object within another parent object?

I am facing an issue with accessing a nested json object in JavaScript. The main json object contains another json object called "from", which in turn has a json object named value, and inside value is the address property that I need to access. Here' ...

javascriptjson

Can the Browser Handle Quick Sorting of Enormous XML Data?

Currently, our team is facing a problem due to server restrictions that are beyond our control. We are required to use an XML file and parse it using JavaScript/jQuery instead of utilizing a database for a job. Moreover, we do not have direct write access ...

javascriptjqueryxmlxslt

Insufficient column height when using CSS flex-grow property

I am facing an issue with my 3 flex columns that have varying text lengths, resulting in uneven heights. I have tried using flex-grow: 1; to make them match in height, but it does not seem to be working as intended. Can someone please help me identify what ...

cssvue.jssassflexbox

ReactJS with Redux Form and Material UI framework featuring automatic typing and field clearing capabilities

Currently, I am in the process of developing a nested form framework that utilizes both the redux form and material ui frameworks. The components are already built up to this point - you can view them here: https://codesandbox.io/s/heuristic-hopper-lzekw ...

javascriptreactjsmaterial-uiredux-form

What is the process to ensure a React JS click handler updates the DOM upon execution?

I have almost completed a demo app using React JS, where data is displayed in a table. In the status column, hovering over an item triggers a popup div with 3 options to click on. After clicking on an option, I am able to run the click handler, but I' ...

javascriptreactjsevent-handlingrendering

Tips for effectively invoking a method in a Vue component

As a Vue2 beginner, I am currently working with the Vue CLI and following the structure generated from it. My goal is to submit form data, but I keep encountering a warning and error: [Vue warn]: Property or method "onSubmit" is not defined on the insta ...

javascriptformsvue.js

Chrome Web Store issues an overly stringent warning for accessing a public API

A new Chrome Extension called FrontPage was recently created, utilizing the New York Times API. The extension sends an AJAX request to the API and receives a JSON response. However, to make this possible, specific permissions need to be set in the manifes ...

javascriptjsongoogle-chromegoogle-chrome-extensionchrome-web-store

Guide on resizing a background image to fit a div

Looking to enhance the appearance of my website by incorporating a cover image. Positioned at the top of the page is a div tag with dimensions set to 80% width and auto height. I aim to insert an image as the background of this div, stretching in width b ...

csshtml

"The function you are attempting to call is not defined within the HTMLButtonElement.onclick

How do I trigger the DeleteRow and EditRow functions when clicking on the Delete Button and Edit Button? <button style="margin-right: 5px;" type='button' onclick='return EditRow(@i)' id='@editrow' class='btn btn-prima ...

javascriptjquery

Is there a way to create a binding between Javascript and C

Looking to incorporate my C++ code into a web app's client side, I am interested in creating Javascript wrapper objects for my C++ classes. Is there any previous examples or tutorials available for achieving this? ...

javascriptc++

Refreshing the entire page upon modifying a single state

I am currently in the process of constructing a page that includes numerous Charts, and I am utilizing a Material UI menu to switch between graphs. Each time I click on a new MenuItem, it alters my state and presents a new array of components. The pr ...

javascriptreactjsreact-hooksmaterial-ui

Loop through the HTML and print it repeatedly

I've been using this code to retrieve Json data and display it based on the same id. However, I've noticed that it only prints once and doesn't display all the data as expected. var requiredData; $.getJSON('http://127.0.0.1/appcpanel/ ...

javascriptjqueryjsonajaxcordova

Screen rendering can be a challenging task

As I dive into learning how to use THREE.js for creating browser games, I've encountered a roadblock. Every time I attempt to import a model using the code, the screen just renders black. Surprisingly, I've been smoothly coding and running it in ...

javascripthtmlthree.js

Using setTimeout with jQuery.Deferred

I decided to experiment with jQuery Deferred and setTimeout by creating a basic list. <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> In my script, I ...

javascriptjquery

Using TypeScript with Vue and Pinia to access the store

Is it necessary to type the Store when importing it to TypeScript in a Pinia Vue project? // Component <p>{{ storeForm.firstName }}</p> // receiving an error "Property 'storeForm' does not exist on type" // Store ...

javascripttypescriptvue.jsimportpinia