Steady Content of a Parallax Webpage

Question

Steady Content of a Parallax Webpage

Hey there! I recently put together this awesome site and I'm facing a challenge with fixing text on the first slide, specifically the one featuring the Nike basketball. Right now, the text 'The first of its kind' is part of the background image, but I'm wondering if it's possible to isolate it from the background and place it in its own div.

I've hit a roadblock trying to come up with ideas because the first slide is made up of three separate div elements - one for the top of the ball, another for the bottom, and a third for the magnified ball. I considered adding the text within the first and second divs, but that caused the text to move with the page instead of staying fixed in place.

Check out the site here:

javascript html css

Answer 1

Answer №1

Indeed, you can utilize position:fixed along with left and top css attributes.

For example:

#fixedText {
  position:fixed;
  left:100px;
  top:50px;
}

UPDATE:

To handle the overlapping of slides, you need to assign a z-index to the slides and the text.

For instance, you could assign a z-index of 2 to the page class (and use position:relative, so the z-index takes effect), the #fixedText rule a z-index of 1, and the #first rule a z-index of 0. This setup will achieve the desired layering:

  #fixedText {
    position: fixed;
    left: 75px;
    top: 120px;
    font-size: 35pt;
    color: white;
    z-index: 1;
    font-family: helvetica;
  }

  #first {
    background: url(images/01.jpg) no-repeat fixed;
    height: 1000px;
    z-index: 0;
  }

  .page {
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
    z-index: 1;
    position: relative;
  }

Answer 2

Indeed, you can utilize position:fixed along with left and top css attributes.

For example:

#fixedText {
  position:fixed;
  left:100px;
  top:50px;
}

UPDATE:

To handle the overlapping of slides, you need to assign a z-index to the slides and the text.

For instance, you could assign a z-index of 2 to the page class (and use position:relative, so the z-index takes effect), the #fixedText rule a z-index of 1, and the #first rule a z-index of 0. This setup will achieve the desired layering:

  #fixedText {
    position: fixed;
    left: 75px;
    top: 120px;
    font-size: 35pt;
    color: white;
    z-index: 1;
    font-family: helvetica;
  }

  #first {
    background: url(images/01.jpg) no-repeat fixed;
    height: 1000px;
    z-index: 0;
  }

  .page {
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
    z-index: 1;
    position: relative;
  }

Steady Content of a Parallax Webpage

Answer №1

Similar questions

How can a React app be developed offline?

Why is my IEDriverServer typing so slow? Seeking JavaScript solutions

Is it possible to automatically refresh the Next Auth Session upon page reloads using API data updates?

Utilizing HTML data retrieved from an ajax request

Using the excel.js module in conjunction with node.js to create distinct columns within a header row

Retrieve the URL of a particular XML document from the server using a PHP script, then dynamically load it into a JavaScript file for further processing

I'm looking for guidance on utilizing the NodeRT (Windows.Gaming.Input) module within an electron environment. Can anyone provide some

What's the process for creating a Java object in PHP and utilizing it in JavaScript?

parsing the data from an HTML document containing embedded variables

Discover the "route" of a JSON element using JavaScript

"Implement a CSS hover effect that targets the child elements within a div, rather than

Unable to delete a row from a dynamically generated table using jQuery

Discover the best ways to repurpose an HTML page with varying jQuery/PHP code

Using Node.js with the express framework for requiring and posting data

Store the Ajax response in localStorage and convert it into an object for easy retrieval and manipulation

Edge Browser does not support PHP Websocket technology

Rotating camera independently from its parent in Three.js

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

Continuously looping through the function based on availability in Symbol ES6

Is there a way to convert a json array to a javascript array in AngularJs?