Is the parallax effect achieved by stacking one div on top of another div?

Here is a sample of my HTML code:

<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>

In my layout, I want the <div> with ID b to appear on top of the <div> with ID a, and the <div> with ID d to appear on top of the <div> with ID c. Both divisions have the same size. I've tried adding position:fixed and top:0 to the first <div> with ID a, but I'm not achieving the desired effect. The first <div> keeps repeating every time another <div> goes on top. I understand that this issue stems from using position:fixed, but I'm unsure how to resolve it in order to create a parallax effect for all divisions.

I created a demo showcasing my issue: http://jsfiddle.net/1g8sLnfk/5/

htmlcssparallax

Answer №1

Try using position: absolute instead of position:fixed

html,body {
  padding:0;
  margin:0;
  background:black;
}

.panels {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
}

#a{
  background-image:url("https://www.w3schools.com/css/img_lights.jpg");    
  color:red;
  top:0;
  background-attachment: fixed;
  z-index: 1;
}

#b{  
  background:yellow;
  top: 100vh;
  z-index: 2;
}

#c{
   background:pink;
   top: 200vh;
   z-index: 3;
}

#d{  
  background:green;
  top: 300vh;
  z-index: 4;  
}
<div id="wrapper">
    <div id="a" class="panels">FIXED PANEL</div>
    <div id="b" class="panels">Scrolling-Panel 1</div>
    <div id="c" class="panels">Scrolling-Panel 2</div>
    <div id="d" class="panels">Scrolling-Panel 3</div>
</div>

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 could be causing my title (titulo) to be misaligned? Why aren't justify and align functions fixing the issue?

My attempt to center my title "Scream" is not working as expected. Here is how it looks: Visit this link for visualization. I have tried using justify, align, and text-align properties in my CSS code but the title (titulo) remains misaligned. Surprisingly ...

htmlcssresponsive-design

Ensuring HTML is clean in SQL query using PHP function for sanitization

I am currently working on a PHP page that contains a dropdown form. When an option is selected, it triggers an AJAX script which queries a result from the same MySQL table. Overall, the functionality works as expected. However, I have encountered an issue ...

phphtmlsqlfunctionsanitize

How to Retrieve Upload Progress via HTTP Request in PHP

Is there a way to monitor the progress of file uploads by accessing the HTTP request in PHP? If so, how can this be achieved when uploading files into a MySQL database? require('../connect_db.php'); //Collect all necessary data $name = $dbc-> ...

javascriptphphtmlmysql

Is there a way to ensure that the fixed modal remains at the forefront and that its top stays in view even as the user scrolls?

Can you assist me in simplifying this code? import { LoginProps } from '@/layouts/layout.props'; import { Box, Button, Divider, Flex, FormControl, FormLabel, Heading, HStack, IconButton, Input, Link, Stack, Text, } from ...

cssnext.jstailwind-csscss-positionchakra-ui

How can I use jQuery to reposition an inner element to the front?

Imagine you have a collection of elements: <ul id="ImportantNumbers"> <li id="one"></li> <li id="two"></li> <li id="topNumber"></li> <li id="four"></li> </ul> Every five seconds, the ...

jqueryhtmlsorting

An animation in CSS where an element moves off the screen to the right in absolute position and then returns from the

I am currently working on a website featuring moving clouds traveling across the screen from left to right. Although I have successfully implemented the animation for the clouds, there is one specific issue that has me stuck. My goal is to display some of ...

cssanimation

Determining the visibility of an element on a webpage using JavaScript and Puppeteer

I've created a framework that scans websites hosted on our servers to ensure they comply with our policies. If any prohibited content is found, we capture a screenshot along with other relevant details. However, taking a screenshot may not be possibl ...

javascriptjqueryhtmlnode.jspuppeteer

Tips for adjusting a web address provided by a user

I have a JavaScript code that prompts the user to input a URL and then appends it to a div. The code is working fine, but now I am trying to add functionality to edit the entered URL by changing the width and height of any iframes before appending them. ...

javascripthtml

Implement a dynamic table in real-time with jQuery AJAX by fetching data from JSON or HTML files

Hey @SOF, I'm trying to add an auto-update feature to my school grades webpage using jquery and ajax to refresh the data when new information is available. I also want to create a "single view" for classes. The challenge I'm facing is getting t ...

javascriptjqueryhtmlajaxjson

What is the best way to incorporate a dynamic background in NextJS using Tailwind?

I have a poster image that I want to use as a background image, fetched from MovieDb. I tried putting it inside the className like this: className={bg-[url('${path}')] h-screen bg-cover bg-center text-white border-b-8 border-b-solid border-b-sla ...

javascriptcssnext.jstailwind-css

Achieving proper HTML element order?

Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...

javascriptjqueryhtmlcss

Set Divs in Absolute Position Relative to Each Other

I need to create a simple navigation system using <div> elements as individual pages. The goal is to have "next" and "back" buttons that allow users to switch between these pages with a smooth fade-in and fade-out effect, all powered by jQuery. Howev ...

javascriptjquerycsspositioningslideshow

Responsive Design: Concealing a Sidebar with CSS

Seeking assistance with optimizing the layout of my app, . It currently displays a menu on the left and a login form in the center, with a graph shown to users upon logging in. Is there a way to configure it so that when accessed on iOS: 1) the left menu ...

javascripthtmlcss

Issue with Bootstrap Scrollspy: Scrollspy function not functioning as expected

I need help with creating a one-page website where the navbar links change based on the section of the page you are on. I tried implementing it using HTML, but it didn't work out as expected. The code I used was within the container holding different ...

javascripthtmlscrollspy

What is the best way to toggle and slide two forms within a single page?

In this scenario, the goal is to display multiple forms on a single page, like a Login Form and Reset Password Form shown below. One form is initially hidden until a link is clicked, triggering an effect. The current setup includes a .toggle() effect that ...

jqueryhtml

How to Retrieve Multiple Values by Passing Arguments using AJAX, PHP, and MYSQL

I am currently working on developing an ajax Based Search feature. This is just a demo showing how it will function. However, I have encountered an issue with returning the results. I want to display the result twice, but it is only appearing once. Below i ...

phpmysqlhtmlajaxjquery

Error alert: Conversion issue encountered when trying to output a singular variable as a string from

Encountered a peculiar error while attempting to display a single variable retrieved from the database. The process involves querying the top ID from the database and storing it in a variable. The code snippet looks like this: $ID_Query = "SELECT DIS ...

phphtmlmysql

Positioning the filters in jQuery Datatables

I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable. Attached is a screenshot for reference: https://i.stack.imgur.com/nzbIl.png He ...

javascriptjqueryhtmlcssdatatable

What is the method for printing a background image with CSS?

I recently implemented the ASP Net Sprites package to create CSS Sprites for my website. While the sprites are working perfectly on the webpage, I've encountered an issue where the generated images do not show up when the page is printed. Here' ...

htmlcssprintingimage

Adjusting border width in Firefox with HTML buttons

Here is the HTML button I am working with: <input ID = "btnModel" value="Submit"> This is how it appears in Firefox: However, when I assign a border-width to it: input#btnModel{ border-width:2px; } it changes to this: 1- It does not revert ...

htmlcss