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

Align an element in the middle next to its sibling element

Utilizing the pagination component in Bootstrap, the structure of the pagination itself is quite straightforward: <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo; ...

htmlcss

Radio buttons have been concealed and are not visible

Tried the solutions recommended in a previous question about radio buttons not showing in Safari and Chrome, but unfortunately, it did not solve my problem. It seems like this issue is different from the one discussed in that question. The WordPress them ...

htmlcssradio-button

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

Ways to access the scrollTop attribute during active user scrolling

I've been working on a website that utilizes AJAX to keep a chat section updated in real-time. One issue I encountered was ensuring the chat automatically scrolled to the bottom when a user sent a message, but remained scrollable while new messages we ...

javascriptjqueryhtmlajax

Embed a javascript tag to print a PDF document

I have been struggling with printing a PDF file using JavaScript. I attempted to use the embed trick suggested in this Silent print a embedded PDF but unfortunately, the print function remained undefined. Then, I tried another approach using an Iframe and ...

javascripthtmlpdf

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

htmlcssmargin

Automatically submit a PHP form if the input text box is left blank

I need a way to automatically refresh the data on my page when the textbox is empty. Manually submitting the form works perfectly, but I want it to happen automatically if the textbox is empty. The catch is that I don't want the form to submit while t ...

javascriptphphtmlforms

Adjust font size using jQuery

Hey there! I have a small question. I want to resize all HTML elements using jQuery, but the current code allows me to increase and decrease the size infinitely. var originalSize = $('html').css('font-size'); // Reset ...

jqueryhtmlcssfont-size

Is it possible to generate HTML form fields with fixed positions when using Orbeon forms?

Is there a way in Orbeon forms to position input fields at specific coordinates, relative to a background image? I currently have a paper form that fills an entire page. My goal is to use the scanned image of this form as a background and then overlay inp ...

javascripthtmlformsorbeon

What is the reason for the enhanced sharpness of fonts in Chrome compared to other browsers?

I couldn't find an answer to this question through my searches on Google, so I apologize if it's already been asked. I've been working on a web project recently and one thing I noticed is that the fonts appear much bolder in Firefox or Safar ...

htmlgoogle-chromefirefoxsafaritypography

What is the proper way to utilize a variable within the translate3d function?

Currently, I am developing my portfolio and working on a function in JavaScript called translate3d(0,10px,0). My question is, how can I use a variable instead of hardcoding the value 10px? I attempted to use translate3d(0,a,0) where 'a' is a vari ...

javascripthtmlcss

Incorporating an external HTML page's <title> tag into a different HTML page using jQuery

I am faced with a challenge involving two files: index.html and index2.html. Both of these files reside in the same directory on a local machine, without access to PHP or other server-side languages. My goal is to extract the <title>Page Title</ ...

javascriptjqueryhtmlfrontend

Issue with Safari not displaying properly when using float:left and float:right (works fine in Firefox and Chrome)

My website has a left side column and a right side column, which display correctly in Firefox and Chrome. However, I am experiencing issues with Safari. Any insights on what could be causing this problem and why it only occurs in Safari? View the code on ...

htmlcssfirefoxgoogle-chromesafari

Ensure the filelist resets each time the bootstrap-modal is hidden or closed

Context I am in the process of developing a form where users can input data and upload an image file. The information entered into the form, along with the file name, is stored in a MySQL database. To style the website, I am utilizing Bootstrap. When a u ...

jqueryhtmlbootstrap-modalfilelist

What is the best way to choose an Animatedmodal that can showcase various demos while using just one ID?

I am currently customizing my website and utilizing the AnimatedModal.js framework. I have successfully displayed content in one modal, but encountered difficulty when attempting to create multiple modals as they all share the same ID. My question is, how ...

javascripthtml

I'm currently on the hunt for the most efficient method of parsing through HTML code

Currently, I am developing a school application that reads the subject name and class name to determine attendance. The goal is to calculate the attendance rate for each school subject throughout the year. This piece of code represents just one day, but I ...

pythonhtmlpython-3.xparsingbeautifulsoup

I require assistance in troubleshooting and repairing my HTML and JavaScript code

I am working on creating a feature where users can input their upcoming birthday date and receive an alert showing how many days are left until then. However, I encountered an issue where the alert displays NaN (Not a Number) before the birthday is entered ...

javascripthtml

Managing multiple sets of data in a structured form similar to an array

How Do I Send Form Data as an Array? Take a look at the code snippet below. I'm having trouble setting the index in product_attribute['index must be here']['key'] <tr v-for="index in attributes"> <td class="text-left ...

javascripthtmlvue.jsvuejs2vue-component

Utilize data attributes for streamlined markup efficiency

I'm facing a challenge with two almost identical animations, the only difference being the positioning of "left vs right". I want to find a way to reuse the same block of code for both .forward and .backward. I have considered using HTML 5 data-attrib ...

jqueryjsonhtmljquery-animate

Focus on a specific button based on its text inside

Two buttons are present with the same class but different content <a class="button ordrViewBtn">Sold Out</a> <a class="button ordrViewBtn">Re-Sell</a> I want to change the color of the "Sold Out" button. Is it p ...

htmlcssbutton