Parallax Plugin

Parallax Plugin for FearlessCMS

A powerful parallax scrolling effects plugin that adds dynamic, engaging visual elements to your website content.

Features

Multiple Parallax Effects: Scroll, fixed, scale, rotate, fade, fade-in, blur, slide, and zoom effects
Customizable Speed: Adjust parallax intensity from 0.1 to 1.0
Overlay Controls: Customizable overlay colors and opacity
Responsive Design: Works seamlessly across all devices
Performance Optimized: Efficient JavaScript with smooth animations
Dark Mode Support: Automatic dark mode detection and styling

Installation

Copy the parallax folder to your plugins/ directory
Activate the plugin through the admin panel
Start using parallax shortcodes in your content

Basic Usage

Shortcode Syntax

The basic parallax shortcode syntax is:

<div class="parallax-section parallax-effect-scroll" id="unique-id" data-parallax-speed="0.5" data-parallax-effect="scroll""><div class="parallax-background" style="background-image: url('/path/to/image.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content">Your content here</div></div>

Required Attributes

id: A unique identifier for the parallax section
background_image: Path to the background image file

Optional Attributes

speed: Parallax speed (0.1 to 1.0, default: 0.5)
effect: Parallax effect type (default: scroll)
class: Custom CSS classes for styling
custom_id: Alternative ID for the HTML element
overlay_color: Custom overlay color (default: rgba(0,0,0,0.4))
overlay_opacity: Overlay opacity (default: 0.4)

Available Effects

1. Scroll Effect (Default)

Traditional parallax scrolling where background moves at different speed than content.

<div class="parallax-section parallax-effect-scroll" id="hero" data-parallax-speed="0.3" data-parallax-effect="scroll""><div class="parallax-background" style="background-image: url('/hero.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Hero Content
Your engaging hero text here</div></div>

2. Fade-In Effect

Content gradually fades in as you scroll down the page.

<div class="parallax-section parallax-effect-fade-in" id="fade-demo" data-parallax-speed="0.5" data-parallax-effect="fade-in""><div class="parallax-background" style="background-image: url('/demo.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Fade In Content
This content will fade in as you scroll</div></div>

Fade-In Specific Attributes:

fade_start_percent: When the fade starts (default: 30)
fade_distance: How far to fade (default: 60)
start_opacity: Starting opacity (default: 0.2)
start_offset: Starting offset (default: 30)

3. Fixed Effect

Background image stays fixed while content scrolls over it.

<div class="parallax-section parallax-effect-fixed" id="fixed-bg" data-parallax-speed="0.5" data-parallax-effect="fixed""><div class="parallax-background" style="background-image: url('/fixed.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Fixed Background
Content scrolls over a fixed background</div></div>

4. Scale Effect

Background image scales as you scroll.

<div class="parallax-section parallax-effect-scale" id="scale-demo" data-parallax-speed="0.4" data-parallax-effect="scale""><div class="parallax-background" style="background-image: url('/scale.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Scale Effect
Background will scale as you scroll</div></div>

5. Rotate Effect

Background image rotates slightly as you scroll.

<div class="parallax-section parallax-effect-rotate" id="rotate-demo" data-parallax-speed="0.5" data-parallax-effect="rotate""><div class="parallax-background" style="background-image: url('/rotate.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Rotate Effect
Background will rotate as you scroll</div></div>

6. Blur Effect

Background image blurs as you scroll.

<div class="parallax-section parallax-effect-blur" id="blur-demo" data-parallax-speed="0.5" data-parallax-effect="blur""><div class="parallax-background" style="background-image: url('/blur.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Blur Effect
Background will blur as you scroll</div></div>

7. Slide Effect

Content slides in from the side as you scroll.

<div class="parallax-section parallax-effect-slide" id="slide-demo" data-parallax-speed="0.5" data-parallax-effect="slide""><div class="parallax-background" style="background-image: url('/slide.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Slide Effect
Content will slide in from the side</div></div>

8. Zoom Effect

Background image zooms in/out as you scroll.

<div class="parallax-section parallax-effect-zoom" id="zoom-demo" data-parallax-speed="0.5" data-parallax-effect="zoom""><div class="parallax-background" style="background-image: url('/zoom.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Zoom Effect
Background will zoom as you scroll</div></div>

Advanced Usage

Custom CSS Classes

Add custom CSS classes to style your parallax sections:

<div class="parallax-section hero-section dark-theme custom-spacing parallax-effect-scroll" id="hero" data-parallax-speed="0.5" data-parallax-effect="scroll""><div class="parallax-background" style="background-image: url('/hero.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Custom Styled Hero
This section uses custom CSS classes</div></div>

Custom IDs

Use custom IDs for specific styling or JavaScript targeting:

<div class="parallax-section parallax-effect-scroll" id="hero" data-custom-id="main-hero-section" data-parallax-speed="0.5" data-parallax-effect="scroll""><div class="parallax-background" style="background-image: url('/hero.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Custom ID Section
This section has a custom ID for targeting</div></div>

Overlay Customization

Customize the overlay appearance:

<div class="parallax-section parallax-effect-scroll" id="custom-overlay" data-parallax-speed="0.5" data-parallax-effect="scroll""><div class="parallax-background" style="background-image: url('/image.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(255,0,0,0.3); opacity: 0.3;"></div><div class="parallax-content"># Custom Overlay
This section has a red overlay with 30% opacity</div></div>

Complete Examples

Hero Section with Dark Overlay

<div class="parallax-section hero-parallax dark-theme parallax-effect-scroll" id="hero" data-parallax-speed="0.3" data-parallax-effect="scroll""><div class="parallax-background" style="background-image: url('/hero.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Welcome to Our Site
## Experience the difference

This hero section demonstrates a classic parallax scroll effect with a dark overlay for better text readability.

[Get Started](#contact)</div></div>

Services Section with Fade-In

<div class="parallax-section services-section light-overlay parallax-effect-fade-in" id="services" data-parallax-speed="0.4" data-parallax-effect="fade-in""><div class="parallax-background" style="background-image: url('/services.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Our Services
## Comprehensive Solutions

- **Web Development**
- **Design Services**
- **Consulting**
- **Support & Maintenance**

This section showcases the fade-in effect, where content gradually appears as you scroll down the page.</div></div>

Contact Section with Fixed Background

<div class="parallax-section contact-section parallax-effect-fixed" id="contact" data-custom-id="main-contact-form" data-parallax-speed="0.6" data-parallax-effect="fixed""><div class="parallax-background" style="background-image: url('/contact.jpg');"></div><div class="parallax-overlay" style="background-color: rgba(0,0,0,0.4); opacity: 0.4;"></div><div class="parallax-content"># Get In Touch
## Ready to Start Your Project?

Contact us today to discuss your needs and discover how we can help transform your online presence.

[Contact Form or Contact Information]</div></div>

CSS Customization

The plugin automatically generates CSS classes for each parallax section. You can override or extend these styles:

/* Custom styling for hero parallax sections */
.hero-parallax {
    min-height: 500px;
    text-align: center;
}

.dark-theme .parallax-content {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.custom-spacing .parallax-content {
    padding: 4rem 2rem;
}

/* Premium theme styling */
.premium-theme .parallax-content {
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
    padding: 2rem;
}

JavaScript Integration

You can target parallax sections using the custom IDs or classes:

// Target specific parallax sections
const heroSections = document.querySelectorAll('.hero-parallax');
const fadeSections = document.querySelectorAll('[data-effect="fade-in"]');

// Add custom animations
heroSections.forEach(section => {
    section.addEventListener('scroll', function() {
        // Custom scroll handling
    });
});

// Trigger custom events
fadeSections.forEach(section => {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    });
    observer.observe(section);
});

Performance Optimization

Best Practices

Limit Sections: Don't use more than 3-4 parallax sections per page
Optimize Images: Use compressed images for better loading performance
Appropriate Speeds: Use lower speed values (0.1-0.3) for subtle effects
Mobile Testing: Test on mobile devices as parallax effects may behave differently

Image Optimization

Use WebP format when possible for better compression
Optimize images to appropriate sizes (1920x1080 max for most cases)
Consider lazy loading for images below the fold

Troubleshooting

Common Issues

Images not loading: Check file paths and permissions
Effects not working: Ensure JavaScript is enabled and no console errors
Performance issues: Reduce number of parallax sections or use lower speed values
Mobile issues: Test on mobile devices and adjust settings accordingly

Debug Mode

Enable debug mode to see detailed logging:

export FCMS_DEBUG=true

Browser Support

Modern Browsers: Full support for all effects
Mobile Browsers: Basic support with some limitations
Older Browsers: Graceful degradation to static backgrounds

Changelog

Version 2.0

Fixed image coverage issues
Improved CSS architecture
Enhanced JavaScript performance
Better dark mode support
Added multiple new effects (blur, slide, zoom)
Improved mobile responsiveness

Version 1.0

Basic parallax scrolling effect
Simple overlay system
Basic responsive support

Support

For support and feature requests, please visit the FearlessCMS documentation or submit an issue through the project repository.

The parallax plugin transforms your content with engaging visual effects while maintaining performance and accessibility.