如何使用Parcel Bundler实现parallax.js视差效果？已安装jQuery

Got it, let's walk through getting parallax.js up and running with Parcel Bundler, since you already have jQuery installed. I'll break this down into simple, actionable steps:

1. Install the Official parallax.js Package #

First, you'll need to add the official @pixelcog/parallax.js package to your project (this is the one from the repo you referenced). Run this in your terminal:

npm install @pixelcog/parallax-js

2. Set Up Your Project Structure #

Keep things organized with a basic structure like this:

your-project/
├── src/
│   ├── index.html
│   ├── app.js
│   └── images/
│       └── your-background.jpg  # Replace with your own background image
└── package.json

3. Write Your HTML Markup #

In src/index.html, create a container for your parallax effect. We'll define styling to give the container a fixed height (required for the parallax to work):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parcel + Parallax.js Demo</title>
  <style>
    /* Critical: Give the parallax container a fixed height */
    .parallax-container {
      height: 600px;
      overflow: hidden;
      margin: 2rem 0;
    }
  </style>
</head>
<body>
  <!-- Parallax container -->
  <div class="parallax-container">
    <!-- Background image element (parallax.js will handle positioning) -->
    <div class="parallax-bg"></div>
  </div>

  <!-- Link your JS file (Parcel will bundle all dependencies here) -->
  <script src="./app.js"></script>
</body>
</html>

4. Initialize Parallax in Your JS File #

In src/app.js, import jQuery and parallax.js, then initialize the effect. Since you already have jQuery installed, this will work seamlessly:

// Import jQuery (no need to add it as a script tag in HTML!)
import $ from 'jquery';
// Import parallax.js
import '@pixelcog/parallax-js';

// Wait for the DOM to fully load before initializing
$(document).ready(() => {
  $('.parallax-container').parallax({
    // Point to your background image (Parcel handles path resolution)
    imageSrc: './images/your-background.jpg',
    // Optional: Adjust parallax speed (0 = no movement, 1 = full scroll speed)
    speed: 0.2,
    // Add other options here if needed—like offset, bleed, or mobile disable
  });
});

5. Run Parcel and Test the Effect #

Add these scripts to your package.json to streamline running Parcel:

{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

Then run this command to start a local development server:

npm run dev

Parcel will launch a server (usually at http://localhost:1234). Open that URL in your browser, and you’ll see the parallax effect as you scroll!

Quick Troubleshooting & Tips #

• No effect showing? Double-check your image path, ensure the container has a fixed height, and confirm jQuery/parallax.js are imported correctly.
• Image quality? Use high-res but compressed images to balance smoothness and load times.
• Customization? You can tweak options like offset (adjust image position) or bleed (extend image beyond container edges) per the official docs.

内容的提问来源于stack exchange，提问作者バイリメイ