SuperParallax 3D Demo

🎮 3D WebGL Parallax

SuperParallax3D uses Three.js to create true 3D parallax effects with WebGL rendering. Experience depth like never before!

What's different from the 2D version?

✅ True 3D positioning with depth (Z-axis)
✅ Camera rotates and moves in 3D space
✅ Layers rotate slightly for enhanced depth perception
✅ GPU-accelerated WebGL rendering
✅ Smoother animations with hardware acceleration

📦 Installation

Include Three.js from CDN (keeping it simple with minimal dependencies):

        <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
      

Then include SuperParallax3D:

<script src="path/to/super-parallax-3d.js"></script>

💻 Usage

        // Initialize SuperParallax3D

const parallax3d = new SuperParallax3D('.parallax-3d-container', {

  scrollMultiplier: 0.5,

  mouseMultiplier: 2,

  smoothing: 0.08,

  fov: 75,

  cameraZ: 5

});

HTML structure is the same as the 2D version:

        <div data-parallax-layer data-parallax-depth="1.5">

  <img src="layer.png">

</div>

🔍 2D vs 3D Comparison

SuperParallax (2D)

✅ Zero dependencies
✅ Lightweight (~6KB)
✅ CSS transforms only
✅ Works everywhere
✅ Best for most use cases
✅ Easier to customize

SuperParallax3D (3D)

⚡ Requires Three.js (~600KB)
⚡ Larger footprint
⚡ WebGL rendering
⚡ Modern browsers only
⚡ True 3D effects
⚡ More complex setup

When to use 3D: Use the 3D version when you want true depth perception, camera movement, and don't mind the Three.js dependency.

Recommendation: For most websites, the 2D version is more than sufficient and loads much faster!

⚙️ Options

scrollMultiplier: Controls scroll effect intensity (default: 0.5)

mouseMultiplier: Controls camera movement intensity (default: 2)

smoothing: Animation smoothness 0-1 (default: 0.08)

fov: Camera field of view in degrees (default: 75)

cameraZ: Camera distance from scene (default: 5)

Pro Tip: Higher mouseMultiplier values create more dramatic camera movement. Try values between 1 and 3 for different effects!