An overabundance of parallax visuals

I'm currently working on a static website that features several parallax images dividing each section. However, I've run into an issue as I continue to add more sections and parallax images. Some of the images at the bottom of the website are shifting out of the frame. This means that the images are initially positioned incorrectly, causing them to slide out of their designated div or frame when scrolling, leaving empty space beneath the image.

This problem seems to be isolated to images near the bottom of the website. Additionally, the lower the image is positioned, the more noticeable the issue becomes.

Below is the code I'm using to insert the parallax images:

<div class="section parallax light-translucent-bg parallax-bg-5">
  <div class="container">
    <div class="call-to-action">
    </div>
  </div>
</div>

And here is the CSS for this specific div:

.parallax-bg-5 {
  background: url("../images/parallax-bg-5.jpg") 50% 0px no-repeat;
}

Answer №1

Try using the CSS property background-attachment: fixed

For example, you can create a parallax effect with this CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
h1,
h2 {
    color: #fff;
    text-align: center;
    padding: 25px 0;
    margin: 0;
}
.block-parallax {
    overflow: hidden;
    position: relative;
}
.block-parallax .parallax-bg {
    background-attachment: fixed;   
    background-position: 0px 0px;
    background-repeat: repeat;
    height: 100%;
    position: absolute;
    width: 100%;
    min-width: 1170px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
/* Additional CSS code for different background images */
/* Each block-parallax class defines a different background image and content */
<section class="block-parallax block-parallax-1">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h1>background 1</h1>
    </div>
</section>
/* Repeat the above HTML section template for block-parallax-2 to block-parallax-10 */

Check out this JSFiddle for a live demo.

Answer №2

I managed to resolve the issue by implementing a repeating pattern for the images. Through feedback provided in the comments, I pinpointed the core of the problem. The images would initiate movement as soon as the website was scrolled from the top, resulting in them shifting too far by the time the bottom was reached, causing them to extend beyond the designated div.

For instance, I made the following adjustment:

.parallax-bg-4 {
  background: url("../images/parallax-bg-4.jpg") 50% 0px no-repeat;
}

which I modified to:

.parallax-bg-4 {
  background: url("../images/parallax-bg-4.jpg") 50% 0px;
}

I repeated this process for each div or image with parallax effects.

I do have some concerns regarding performance, as I noticed that my laptop started to heat up when I replicated the images, despite owning a high-powered machine (rMBP 15"). If anyone has a more optimal solution, please share it here.

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

Struggling with setting up Chrome options using Selenium WebDriver in JavaScript?

Encountering an issue while attempting to access a specific website using Selenium WebDriver in JavaScript with the Chrome browser. In the provided code snippet, the browser driver is initialized; however, there seems to be a problem when utilizing setChro ...

Show the checkboxes' names listed in an array

I am having trouble displaying the names of my checkboxes using the foreach statement below. Currently, all I see is "on" for each checked box. I have included the code for one of the checkboxes and I am looking to see if there is anything I can modify i ...

What is the process for assigning values once the Google Charts program has completed its drawing?

It might sound strange, but I have a piece of code here: let globalResult = []; let defaultData = ["None", 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200]; $(document).ready(() => { // add a listener to the textbox $('#in ...

Unravel and extract information from a JavaScript object using PHP

I am working with a variable called "type" in my code. var type = []; Within this variable, I am using the method push to add an object {'type' : 1}. type.push({'type' : 1}); After performing this operation, I end up with the follow ...

Converting Integers to Integers in Javascript: A Step-by-Step

Let's say I have a Method written in JavaScript in GWT(JSNI) which accepts the wrapper data type Integer and I need to convert it into a Primitive Data type inside JS. public static native void nativeMethod(Integer index)/*-{ // What is the best ...

Execute a function within a different function once the ajax call has been completed

There's an issue with the timing of my function that runs inside another function. It seems like sometimes the ajax call to the server isn't completed before the function is called. function obtainPlans(row, user, id, type) { $.get( "/ ...

How to integrate a jQuery plug-in into your Meteor 1.7.0.3 project

Recently, I delved into using Meteor for the first time, and it has been about a week since I started exploring its functionalities. However, I encountered an issue with integrating jQuery plugins that were installed via npm. After running: meteor npm i ...

Tips for retrieving return values from an ajax form submission

When using ajax to submit a form, I encountered an issue where the process would halt at api.php and not return to the ajax success. Below is the code snippet: <form method="POST" id="form_1" action="../api.php" enctype="multipart/form-data" novalidate ...

Flexbox does not support sub-columns

I'm having trouble integrating these two columns along with their sub-columns. I have to resort to using this structure instead: <div class="custom_classes"> <div class="custom_classes">col1</div> <div class=&q ...

Combine the input element's value with a string using jQuery

I am looking to combine the content of an input element into a string using jQuery I am experiencing difficulties appending the content of the input element at the end of the string. Simply using companyString or #companyString is not producing the desir ...

The act of initiating a click on a radio button involves evaluating conditions prior to toggling

Apologies for the slightly ambiguous title, let me provide a clearer explanation. I have created a codepen to demonstrate an issue that I am facing. You can view it here. In my codepen, I have two toggle buttons labeled "Male" and "Female" for simplicity. ...

Encountering error: Unknown flag '-p' when trying to execute yarn build:prod in Angular 6

For the past two days, I have been encountering a problem. After updating Angular from version 4 to 6, I am unable to generate a production build. Commands like yarn build and yarn dev are functioning properly. However, when I execute yarn build:prod, I re ...

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

Can you tell me why the jquery datepicker control is only loading a portion of the CSS?

Working on a new C#/ASP.Net application and I decided to incorporate the datepicker control that I've used before. I transferred all the necessary components from my previous app to this one. The appearance of the datepicker in the old app was like th ...

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

Alter the color of H3 when clicked and then gently fade it back

Is it possible to create a button on the top of my webpage that scrolls to a specific DIV when clicked, and also have it change the color of an h3 element once it has scrolled to it? This effect is similar to how Facebook highlights notifications. This is ...

What could be causing the issue with Vite build and npm serve not functioning together?

After shifting from CRA to VITE, I am encountering a problem with serving my app. I successfully build my app using vite build. and can serve it using Vite serve without any issues. However, I want to use npm's serve command. Whenever I run vite bui ...

Introducing the brand new feature: Video Mute Button!

Currently, I am working on implementing a mute button for a video on my webpage. The background of my page consists of a looping video with no other content, but the sound becomes quite bothersome after a while. While I have managed to find a button to pau ...

Change the color of a specific day on the Arshaw Calendar using CSS

Can anyone help me with changing the color of the box in the month view in the arshaw calendar? I've been attempting to do so using this script, but my lack of expertise in javascript is proving to be a hurdle. The goal is for this script to be called ...

Delayed Passport Session Login

Every time I try to log in, my Express app loads very slowly... I've implemented Passport and Express Validator, but there are no errors. However, the login process for some users is extremely slow. Can anyone offer assistance? Below is a snippet o ...