How to create a parallax effect in Bootstrap

1. Use CSS background-attachment: fixed for a simple parallax effect with Bootstrap by applying it to a full-width div with a background image, ensuring the content below scrolls normally. 2. Enhance mobile compatibility with JavaScript by dynamically adjusting the background position on scroll using window.pageYOffset and a multiplier for speed control. 3. Integrate Bootstrap utilities like vh units, w-100, and my-/py- classes to ensure responsiveness and proper spacing. 4. For advanced effects, use Rellax.js to apply parallax to any element by adding the rellax class and data-rellax-speed attribute, then initializing the library. Always optimize images, test on mobile devices, and avoid excessive use to maintain performance and accessibility.

Creating a parallax effect in Bootstrap can enhance the visual appeal of your website by giving a sense of depth as users scroll. While Bootstrap itself doesn’t include built-in parallax components, you can easily achieve this effect using CSS or lightweight JavaScript. Here’s how to do it effectively and responsively.

1. Use Pure CSS for a Simple Parallax Effect

The easiest way to create a parallax effect is with CSS background-attachment: fixed. This works well with Bootstrap’s grid system.

HTML (Bootstrap structure):

<div class="parallax-section"></div>

<div class="container py-5">
  <div class="row">
    <div class="col">
      <h2>Content Below Parallax</h2>
      <p>This content scrolls normally while the section above has a parallax background.</p>
    </div>
  </div>
</div>

CSS:

.parallax-section {
  height: 500px;
  background-image: url('your-image.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

✅ Pros: Simple, no JavaScript needed.
⚠️ Note: On mobile devices, background-attachment: fixed may not work consistently due to performance or touch-scroll behavior.

2. Improve Mobile Compatibility with JavaScript (Optional)

To make the parallax effect more consistent across devices, especially mobile, you can use a lightweight JavaScript approach that adjusts the background position on scroll.

HTML (same as above, add an ID):

<div id="parallax" class="parallax-section-js"></div>

CSS:

.parallax-section-js {
  height: 500px;
  background-image: url('your-image.jpg');
  background-position: center;
  background-size: cover;
}

JavaScript:

window.addEventListener('scroll', function () {
  const parallax = document.getElementById('parallax');
  const offset = window.pageYOffset;
  parallax.style.backgroundPositionY = offset * 0.5   'px'; // Adjust speed
});

This moves the background slower than the scroll, creating a parallax illusion. You can tweak 0.5 to control the speed.

3. Use Bootstrap Utilities for Better Layout Integration

Combine the parallax section with Bootstrap’s utility classes for spacing and responsiveness.

Example:

<div id="parallax" class="w-100" style="height: 60vh;"></div>

<section class="container my-5">
  <div class="row">
    <div class="col-md-8 mx-auto text-center">
      <h3>Welcome to Our Site</h3>
      <p class="lead">Scroll down to see the parallax effect in action.</p>
    </div>
  </div>
</section>

Use vh units for responsive height and Bootstrap’s my-*, py-* classes to manage spacing around the parallax section.

4. Alternative: Use a Lightweight Library (e.g., Rellax.js)

For more advanced effects, consider Rellax.js:

Include Rellax:

<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.1/rellax.min.js"></script>

Add data-rellax attribute:

<div class="container">
  <div class="row">
    <div class="col">
      <img class="rellax lazy"  src="/static/imghw/default1.png"  data-src="floating-element.png"  data-rellax-speed="-3" alt="Parallax element">
    </div>
  </div>
</div>

Initialize:

new Rellax('.rellax');

This lets you apply parallax to any element, not just backgrounds—great for floating graphics or text.

Final Tips

• Always use high-quality, optimized background images to avoid lag.
• Test on mobile: CSS fixed backgrounds may scroll normally on iOS/Android.
• Avoid overusing parallax—it can impact performance and accessibility.

Basically, with a little CSS and optional JavaScript, you can integrate smooth parallax effects into your Bootstrap site without heavy libraries.

The above is the detailed content of How to create a parallax effect in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!