Preventing Bootstrap 4 slider images from shifting position when using background-attachment:fixed for a parallax effect

I'm trying to implement a Parallax scrolling effect on my Bootstrap 4 slider. However, every time the slider switches to the next image, the image needs to readjust itself into place. How can I avoid this?

.customOverlayText {
  position: absolute;
  color: white;
  z-index: 2;
  left: 0;
  right: 0;
}

.carousel-inner .carousel-item {
  height: 500px;
  background-size: cover;
  background-position: center center;
  background-color: black;
  background-attachment: fixed;
}

.general {
  background-color: #f0f0f0;
  padding-left: 200px;
  padding-right: 200px;
  padding-top: 50px;
  padding-bottom: 50px;
}

@media only screen and (max-width: 1146px) {
  .general {
    padding-left: 50px;
    padding-right: 50px;
  }
}
<div class="carousel slide" data-pause="false" data-ride="carousel">
  <div class="customOverlayText d-flex h-100 align-items-center justify-content-center">
    <center>Overlay</center>
  </div>
  <div class="carousel-inner text-center">
    <div class="carousel-item active" style="background-image:url(http://coopertimewell.com/testing/images/slider/1.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/2.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/3.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/4.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/5.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/6.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/7.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/8.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/9.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/10.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/11.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/12.jpg);"></div>
  </div>
</div>
<center>
  <div class="general" id="redGeneral">
    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Dolor sit amet ...

Is it possible to incorporate text overlay in the Parallax scrolling effect as well?

javascriptjqueryhtmlcssbootstrap-4

Answer №1

To create a parallax effect, typically two layers must move at different speeds. It seems that the BS carousel may not have been designed to accommodate this feature. Additionally, images are usually inserted using the 

<img src="">

tag rather than setting them as background images in order to maintain the perspective ratio. If you plan on implementing the desired effect, could you provide an image explanation or example that you have come across? Achieving this within the BS framework may pose challenges (due to numerous overrides). https://getbootstrap.com/docs/4.0/components/carousel/ Could you include a complete code example along with your query? Please edit it and then select the code icon (<>).

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

Intrusive JQuery Code Incorporating Itself into SharePoint 2010's HTML Markup

There seems to be an issue with my content editor web part wherein the menu, which is clickable and hoverable due to the jQuery installed, is causing some unexpected behavior. Whenever the menu is clicked or hovered over, it changes the content in the adja ...

jquerycsssharepoint-2010

Adjusting the starting point on a 2D canvas with EaselJS translation

When using plain javascript, I was able to change the origin of the canvas to the center by following these steps: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.width = 1024; canvas.heigh ...

javascriptcanvaseaseljs

Issue with fortawesome icon: relative and absolute positioning not functioning as expected

I have utilized a diamond symbol from the Fort Awesome icon collection and noticed that when I target the i tag in my CSS, the icon becomes highlighted (see screenshot attached). However, I am encountering issues with relative and absolute positioning not ...

htmlcss

Creating a REST API with the POST method using Vanilla JavaScript/AJAX and encountering a 400 error (Bad request) issue

Could you assist me in figuring out how to utilize the POST method in vanilla JavaScript (without jQuery)? I've been attempting to do so with this code: var call = { "filterParameters": { "id": 18855843, "isInStockOnly": false, "newsOn ...

javascriptajaxrest

Sharing and displaying images on Sails JS platform

Using Sails JS, I am attempting to upload an image and display it in a view. Queries: The uploaded image is located in .tmp/uploads, how can I retrieve it from a view? Is there a method to access the uploaded image? The image's name is altered in ...

javascriptnode.jssails.js

Angular: Defining variables using let and var

When working with TypeScript and JavaScript, we typically use either let or var to declare a variable. However, in Angular components, we do not use them even though Angular itself uses TypeScript. For instance, export class ProductComponent implements OnI ...

javascriptangulartypescriptoop

show the popover only once the cursor has been hovering for a couple of seconds

Looking to customize the behavior of a bootstrap popover? Here's an example of using the popover to trigger on hover: $("#example").popover({ trigger: "hover" }); However, if you want the popover to appear after a few seconds of hover (e.g. 2 ...

jquerytwitter-bootstrappopover

Exploring different ways to make API requests using technologies like jQuery, Angular, and more

I'm new to APIs and I want to create an eco game with Facebook for London and Amsterdam. To do this, I need to obtain data from APIs in each city. After doing some research, I think I can request information on the client side of the app, process it, ...

jqueryjsonangularjsnode.jsfacebook

Applying conditional statements to an array's parent elements during iterations in JavaScript

Here is my complete script for relevance. I am currently looping through an array from a JSON object and populating content into an HTML div based on the content's ID. The process works well, but I am facing an issue with the logic related to the par ...

javascripthtmlarraysjson

Finding strikeout text within <s> or <del> tags can be identified by closely examining the HTML codes

The issue arises with the text that reads as follows: 316.6.1 Structures. Structures shall not be constructed This is represented in HTML as: <b> <s> <span style='font-size:10.0pt'>316.6.1 Structures</span> ...

javascripthtmlcssselenium

What strategies can I employ to manage browser compatibility issues while utilizing contemporary JS and CSS frameworks?

I have been working on a project that utilizes the most recent versions of Angular (version 5) and Bootstrap (4). However, after a few weeks of development, I noticed that some features are not functioning properly on Safari, and I am uncertain if all fea ...

angularreactjsframeworkscross-browserbootstrap-4

It is not possible to trigger an input click programmatically on iOS versions older than 12

Encountering a challenge in triggering the opening of a file dialogue on older iOS devices, particularly those running iOS 12. The approach involves utilizing the React-Dropzone package to establish a dropzone for files with an added functionality to tap ...

javascriptcssiosmobile-safarireact-dropzone

Is it possible to import data into a script?

When working with Angular, I am attempting to: $scope.data = "<script> alert('hi'); </script>"; Unfortunately, this approach does not seem to be effective. I also experimented with adding ng-bind-html but did not achieve any success ...

javascriptjqueryangularjs

Reset the form upon submission in AngularJS

Hey, I'm looking to reset the form values after a successful submission. How can I achieve this? <div ng-controller="employeelistController as listControl"> <div class="container form-group" ng-controller="addEmployee as addemp"> ...

javascriptangularjs

The legends on the Google chart are having trouble being displayed accurately

Take a look at the screenshot below to pinpoint the sample issue. While loading the graph UI with Google Charts, the legends data is showing up but not appearing correctly. This problem seems to occur more frequently on desktops than on laptops. Any advi ...

javascriptangularjschartsgoogle-visualizationgoogle-developer-tools

function to choose in antd datepicker component

Is there a way to obtain the currently selected date within the onSelect function after updating the selected date in the state? onSelect = (cal) => { this.setState({ selectedValue: cal }); alert(this.state.selectedValue); After making ...

javascriptreactjsantd

How to initialize data in Vue.js components

I'm working on a Map.vue component and I need to update its data in Vue.js. However, I'm struggling to figure out how to do this: <template> <div> <div class="google-map" :id="mapName"> </div> </div> < ...

javascriptecmascript-6vue.jsvuejs2components

"Unraveling the Mystery: Leveraging jQuery to Unleash the

I'm working on a script that looks like this: $(document).on("click", ".passingID", function () { var ids = $(this).attr('data-id'); $("#idkl").val( ids ); $.ajax({ method: "POST", url: ...

phpjqueryhtmljsonajax

Best Practices and Tips for Layout Design Using HTML and CSS Grid

As I begin my journey into front-end development, I am currently immersing myself in studying html, css, and vanilla javascript. While things are going well so far, I find myself struggling with understanding the organization of design layouts in general. ...

htmlcssfrontend

Click on a button to completely remove all JavaScript from your website using jQuery

I'm currently experiencing some difficulties with my website Concept Studio. On a specific page, I have a typing animation within a form and I'd like to include a button that allows users to skip the animation. However, I'm unsure of how to ...

javascriptjquery